20 советов начинающему веб-дизайнеру.

Веб-дизайнер – один из важнейших специалистов в разработке сайта. Именно от него зависит, будет ли страницей удобно пользоваться, продемонстрирует ли она идентичность компании и бренда, а ещё – будет ли фронтэндер материться, пытаясь подогнать красивые скругления углов под не менее красивый анимированный бэкграунд на Canvas и jQuery.

И поэтому мы решили поделиться несколькими советами, которые сделают ваш веб-дизайн красивым и практичным: как для пользователей, так и для разработчиков.

Совет 1: Следите за трендами.

Над проектом работаете не только вы, но и несколько других специалистов. Вам нужно нарисовать сайт, менеджеру – продать его, фронтэндеру – сверстать, а бэкэндеру – разработать серверную составляющую.

Модный сайт продать проще. Фронтэндер хочет опробовать Canvas, Vue и Angular, и ему совершенно не хочется верстать очередную табличную страницу из 2005 года.

Совет 2: Изучайте не только веб-дизайн.

Мастерское владение Figma и Photoshop – это, конечно, хорошо. Но современный дизайн не ограничивается расположением кнопок и картинок на странице (если, конечно, речь идёт не об очередном лендинге с китайским кремом для похудения, сделанным в Перми). Изучайте тенденции мобильной вёрстки, моды, культуры, фотографии и так далее.

Когда Google представили Material Design – все начали делать сайты «материальными», хотя это стилистика для мобильных приложений.

Совет 3: Поиграйте со шрифтами.

Есть два подхода к использованию шрифтов на веб-страницах. Заказчики «попроще» предпочитают ограничиваться начертаниями из библиотеки Google Fonts – они бесплатные, хорошо читаемые и быстро загружаемые.

А вот компании, которым важна идентичность, могут себе позволить платные уникальные шрифты. Проверьте – может, какой-нибудь PF Beau Sans Pro за 68 долларов лучше раскроет фирменный стиль заказчика.

Совет 4: Два цвета – хорошо, три цвета – плохо.

Многие веб-дизайнеры любят делать страницы разноцветными. Это выглядит ярко, необычно и красиво. Но при этом у читателя начинает «рябить в глазах». Есть базовое правило для страниц с контентом: 80-90% должно быть окрашено в базовый цвет, а 10% – в акцентный.

Совет 5: Начинайте с прототипирования.

Сначала нарисуйте прототип страницы – прямо ручкой или карандашом на листе бумаги. Вы поймёте, как это выглядит. А заказчик оценит, ничего ли не забыли или нет ли ничего лишнего.

Совет 6: Используйте итерации (но осторожно).

Использование итераций позволяет сделать сайт более практичным. Пользователь запоминает, где находится какое меню, как найти нужную кнопку, где текст и картинки. Он не «зависает», переходя по ссылкам.

Но, в то же время, некоторые дизайнеры – например, Артемий Лебедев – категорически против повального использования итераций. Если весь сайт однообразный – он скучный. Постарайтесь соблюдать баланс.

Совет 7: Изучите сторителлинг.

Сторителлинг – это умение рассказать историю. И каждая страница может быть представлена именно как история – продукта, компании, особенностей. Проведите пользователя через продукт – расскажите, для чего он, как работает, как поможет. И используйте для этого дизайнерские приёмы.

Совет 8: Слишком много контента – это плохо.

Страница должна быть простой и комфортной, как удобное кресло. Используйте минимализм и в подаче контента, и в разработке системы навигации. Если на экране будет много контента – пользователь запутается и не поймёт, что ему читать, рассматривать или изучать в первую очередь.

Совет 9: Две колонки – это зло.

Никогда не располагайте текст в две колонки. Или в три колонки. Или ещё как угодно. Люди не так читают, они могут потерять нить изложения, пытаясь разобраться, перескочили они с нужной строки или нет.

Если очень-очень хочется – делайте выноски.

Совет 10: Рисуйте не только в Photoshop, но и в Figma.

Figma – хороший инструмент для создания простых веб-страниц. Он позволяет быстро отрисовать типичные элементы (блоки, кнопки, фреймы и так далее). А верстальщику будет несложно выцепить оттуда необходимый для CSS и HTML код.

Ещё 10 полезных советов.

Некоторые полезные рекомендации не требуют подробно их расписывать. Поэтому быстро «пробежимся» по ним:

  • 1. Покажите макет другу, маме или соседке, которые не работают в веб-дизайне. Но спросите не о красоте, а об удобстве. Это поможет выявить UX-провалы;
  • 2. Откажитесь от типичных Bootstrap-элементов (стрелка «Листайте вниз», карточки с флип-эффектом при наведении мыши). Они перестали быть модными ещё в 2017 году;
  • 3. Показывайте продукт, а не пишите о нём. Пусть на странице будут большие картинки и поменьше текста;
  • 4. Откажитесь от каруселей с автоперелистыванием. Люди воспринимают контент с разной скоростью. А автоперелистывание не даёт им рассмотреть картинку – или заставляет ждать следующую;
  • 5. Изучите приёмы визуального повествования;
  • 6. Сохраните готовые элементы для дизайна в отдельной папочке. В будущем они очень помогут быстрее разместить кнопки, заголовки, блоки текста и так далее;
  • 7. Никогда не уменьшайте дедлайн. Даже если кажется, что способны справиться намного быстрее, чем это указано заказчиком. Пусть у вас будет немного времени на «непредвиденные ситуации» и полировку сайта;
  • 8. Не показывайте заказчику недоработанный макет. Сначала отполируйте каждую деталь, и только потом демонстрируйте результат. Показывая макет со словами «Я ещё вот тут немного доделаю», вы расписываетесь в собственном непрофессионализме;
  • 9. Клипарт – это, конечно, хорошо, но зачастую проще, быстрее и дешевле самостоятельно нарисовать кнопки и иллюстрации. Заодно и «руку набьёте»;
  • 10. Изучайте дизайны других компании, пытаясь понять, почему они сделали именно так, а не иначе. Почему Apple показывает смартфоны крупным планом, а Samsung делает акцент на технические характеристики?

И главное – не стесняйтесь экспериментировать. На многих отличных с визуальной точки зрения сайтах есть и текст в две колонки, и радужные градиенты, и даже, о ужас, карусели с автоперелистыванием. Создавайте свой собственный стиль, а не следуйте инструкциям в интернете. И тогда ваш дизайн будет узнаваем.