Было время, когда веб-дизайном было что-то вроде создания красивых картинок в Photoshop, а затем передача этого кому-то еще, чтобы нарезать их. Тем временем, дизайнеры научились кодировать и сейчас, быть хорошим веб-дизайнером значит иметь способность сочетать свои навыки дизайна с юзабилити и знаниями доступности для того, чтобы создать хороший пользовательский опыт. О, и я почти забыл о SEO – вам действительно нужно это знать, чтобы поисковые системы любили вас.
От эскиза до конечного результата, мастеря веб-страницу или элемент пользовательского интерфейса, вы должны ответить на много-много вопросов.
Для мобильных устройств (mobile first), не так ли?
Новая вещь, над которой вы работаете, будет для мобильных устройств, не так ли?
Тогда вы знаете, о том, как правильно использовать viewport мета-тег, и вы хотели бы использовать последние типы входных данных HTML5 как поиск, электронная почта, URL и т.д.
Со всем этим набором для удобного просмотра на мобильных устройствах (mobile-friendly), вы знаете, что должны пройти новый mobile-friendly тест от Google, не так ли? Ведь все мы хотим хорошие мобильные рейтинги.
Также по-прежнему обязательно иметь в вашей панели инструментов PageSpeed и YSlow.
Как это будет работать на нескольких дисплеях?
Каковы основные точки останова макета? Как это можно постепенно усилить, чтобы воспользоваться современными методами веб-разработки? CSS @supports? Или, может быть, flexbox будет полезен позже, чтобы решить некоторые проблемы CSS.
Как SVG может помочь в данном случае?
Если вы используете фоновое изображение SVG, то вы должны использовать множественные резервные фоны, чтобы добавить PNG для старых браузеров.
Но вы бы могли использовать SVG, потому что у вас есть полный контроль над своими путями и формами. Круто, так что теперь вы должны добавить IE только HTML комментарий для того, чтобы добавить резервный PNG, на случай, если вы не используете Modernizr для вашего проекта.
Как оптимизировать изображения?
Не забудьте оптимизировать изображения, это хорошо для здоровья вашего веб-сайта!
Сохранить как оптимизированное теперь не достаточно. Вам нужны инструменты, как TinyPNG, JPEGmini и SVGO для того, чтобы получить наилучшие результаты. И когда дело доходит до использования JPEG, сделать прогрессивным является обязательным.
Какой гамбургер выбрать из меню?
Если вы имеете дело со списком меню, то вы должны выбрать хороший и вкусный гамбургер. Или, может быть, кебаб?
ОК, теперь серьезно, вы сложите пункты меню на мобильных дисплеях или спрячете их под иконкой гамбургера? Выдвигающийся стиль? Что будет лучше соответствовать вашему дизайну?
На каких CSS сетках будет основан ваш дизайн?
Вы знаете, что плавающие системы сетки не подходят вертикальному выравниванию. Встроенные блоки подходят, но хотите ли вы бороться с пробелами? Сетка, основанная на Flexbox? Или вы не можете позволить себе этого из-за ваших пользователей?
Это ссылка или кнопка?
Должен ли этот элемент быть ссылкой? Если вы нажмете на нее, и она вызывает некоторое действие, а не переход на новый адрес, скорее всего, вы должны использовать кнопку. Основное правило: используйте a, когда вам нужна ссылка и button, когда вам нужна кнопка.
Это просто… но почему form появляется, когда я нажимаю на эту кнопку? Она не должна! Да, но как вы уже догадались, есть ловушка: всегда устанавливайте тип на button, потому что значение по умолчанию, это submit, что означает, что любая button в форме может представить форму – а вы не хотите этого.
Это форма, о которой мы говорим?
Проверьте лейблы, убедитесь, что все сгруппированы для лучшей читаемости и следите за лейблами и радио – их легче сканировать и понять, сложены ли они и не встроены ли. Если основные правила применены, подумайте об использовании пользовательского вида для элементов формы или попробуйте плавающий эффект лейбла для входов.
Всегда имейте в виду, что placeholder не замена для label.
Все, что было написано выше – поможет пользователю насладиться лучшим опытом, независимо от того, какое устройство или браузер он использует.
Но…
Но потом я слышу, как люди вокруг говорят: “Вы должны думать, как пользователь! Меньше дизайна, больше функциональности!”
Так ведь я это и делаю! Высоких конверсий!
