Было время, в то время, когда веб-дизайном было что-то наподобие создания прекрасных картин в Photoshop, а после этого передача этого кому-то еще, дабы нарезать их. Тем временем, дизайнеры обучились кодировать и по сей день, быть хорошим веб-дизайнером значит иметь свойство сочетать собственные навыки дизайна с юзабилити и знаниями доступности чтобы создать хороший пользовательский опыт. О, и я практически забыл о SEO – вам вправду необходимо это знать, дабы поисковые совокупности обожали вас.
От эскиза до конечного результата, мастеря веб-страницу либо элемент интерфейса пользователя, вы должны ответить на много-много вопросов.
Для мобильных устройств (mobile first), не так ли?
Новая вещь, над которой вы трудитесь, будет для мобильных устройств, не так ли?
Тогда вы понимаете, о том, как верно применять viewport мета-тег, и вы желали бы применять последние типы входных данных HTML5 как поиск, email, 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.
Все, что было написано выше – окажет помощь пользователю насладиться лучшим опытом, независимо от того, какое устройство либо браузер он применяет.
Но
Но позже я слышу, как люди около говорят: “Вы должны думать, как пользователь! Меньше дизайна, больше функциональности!”
Так так как я это и делаю! Высоких конверсий!
Случайные статьи:
Законы веб дизайна и построения интерфейса сайта
Подборка похожих статей:
-
Веб-дизайн и seo оптимизация при создании сайта
В то время, когда речь заходит о разработке нового сайта, большая часть дизайнеров-новичков заботятся лишь о том, как превосходно будет смотреться сайт….
-
Отличные шаблоны, шепетильно продуманные шаблоны дизайна, автоматизация, AI и мобильные разработки оповещают о закате веб-дизайна таким, как мы его…
-
5 Вредных советов, или зачем нужен сложный веб-дизайн?
Вы вспоминали о том, какое влияние Сейчас оказывает доступность и простота на общество и людей в целом? Так, в ответ на любой запрос пользователя…
-
Почему электронную почту нужно проверять только после полудня?
Путь Даны Вольмер (Dana Vollmer) к олимпийскому пьедесталу был тернист и полон препятствий. Да, у нее, как у олимпийского спортсмена-пловца, вправду был…