Веб-дизайнер – один из важнейших специалистов в разработке сайта. Именно от него зависит, будет ли страницей удобно пользоваться, продемонстрирует ли она идентичность компании и бренда, а ещё – будет ли фронтэндер материться, пытаясь подогнать красивые скругления углов под не менее красивый анимированный бэкграунд на Canvas и jQuery.
И поэтому мы решили поделиться несколькими советами, которые сделают ваш веб-дизайн красивым и практичным: как для пользователей, так и для разработчиков.
Над проектом работаете не только вы, но и несколько других специалистов. Вам нужно нарисовать сайт, менеджеру – продать его, фронтэндеру – сверстать, а бэкэндеру – разработать серверную составляющую.
Модный сайт продать проще. Фронтэндер хочет опробовать Canvas, Vue и Angular, и ему совершенно не хочется верстать очередную табличную страницу из 2005 года.
Мастерское владение Figma и Photoshop – это, конечно, хорошо. Но современный дизайн не ограничивается расположением кнопок и картинок на странице (если, конечно, речь идёт не об очередном лендинге с китайским кремом для похудения, сделанным в Перми). Изучайте тенденции мобильной вёрстки, моды, культуры, фотографии и так далее.
Когда Google представили Material Design – все начали делать сайты «материальными», хотя это стилистика для мобильных приложений.
Есть два подхода к использованию шрифтов на веб-страницах. Заказчики «попроще» предпочитают ограничиваться начертаниями из библиотеки Google Fonts – они бесплатные, хорошо читаемые и быстро загружаемые.
А вот компании, которым важна идентичность, могут себе позволить платные уникальные шрифты. Проверьте – может, какой-нибудь PF Beau Sans Pro за 68 долларов лучше раскроет фирменный стиль заказчика.
Многие веб-дизайнеры любят делать страницы разноцветными. Это выглядит ярко, необычно и красиво. Но при этом у читателя начинает «рябить в глазах». Есть базовое правило для страниц с контентом: 80-90% должно быть окрашено в базовый цвет, а 10% – в акцентный.
Сначала нарисуйте прототип страницы – прямо ручкой или карандашом на листе бумаги. Вы поймёте, как это выглядит. А заказчик оценит, ничего ли не забыли или нет ли ничего лишнего.
Использование итераций позволяет сделать сайт более практичным. Пользователь запоминает, где находится какое меню, как найти нужную кнопку, где текст и картинки. Он не «зависает», переходя по ссылкам.
Но, в то же время, некоторые дизайнеры – например, Артемий Лебедев – категорически против повального использования итераций. Если весь сайт однообразный – он скучный. Постарайтесь соблюдать баланс.
Сторителлинг – это умение рассказать историю. И каждая страница может быть представлена именно как история – продукта, компании, особенностей. Проведите пользователя через продукт – расскажите, для чего он, как работает, как поможет. И используйте для этого дизайнерские приёмы.
Страница должна быть простой и комфортной, как удобное кресло. Используйте минимализм и в подаче контента, и в разработке системы навигации. Если на экране будет много контента – пользователь запутается и не поймёт, что ему читать, рассматривать или изучать в первую очередь.
Никогда не располагайте текст в две колонки. Или в три колонки. Или ещё как угодно. Люди не так читают, они могут потерять нить изложения, пытаясь разобраться, перескочили они с нужной строки или нет.
Если очень-очень хочется – делайте выноски.
Figma – хороший инструмент для создания простых веб-страниц. Он позволяет быстро отрисовать типичные элементы (блоки, кнопки, фреймы и так далее). А верстальщику будет несложно выцепить оттуда необходимый для CSS и HTML код.
Некоторые полезные рекомендации не требуют подробно их расписывать. Поэтому быстро «пробежимся» по ним:
И главное – не стесняйтесь экспериментировать. На многих отличных с визуальной точки зрения сайтах есть и текст в две колонки, и радужные градиенты, и даже, о ужас, карусели с автоперелистыванием. Создавайте свой собственный стиль, а не следуйте инструкциям в интернете. И тогда ваш дизайн будет узнаваем.