Пошаговый гайд, который поможет сделать дизайн сайта с нуля. Часть вторая: разрабатываем визуальную концепцию сайта

Дизайн сайта для бизнеса и пользователя — это, на мой взгляд, не столько эксперименты, сколько решение конструкторской задачи: каждый параметр выбирается больше на основе анализа и выводов. Тем не менее, чем проще сайт по функциональности, тем больше можно экспериментировать с дизайном. Если у вас лэндинг с единственным целевым действием и небольшим количеством текста, то можно поиграться с оформлением блоков (опираясь на референсы), также можно пробовать подбирать разные визуалы для баннеров.

Не советую «играться»:

• С типографикой. Несмотря на то, что едва ли не каждый считает своим долгом сказать дизайнеру «поиграй со шрифтами», это довольно непростая тема, которая требует немалых теоретических знаний и практического опыта. Здесь лучше опираться на подборщики шрифтовых пар, иерархию текста и ограниченный небольшой набор стилей текста.
• С пользовательскими сценариями. Если пользователь привык, что после оплаты товара должен быть экран подтверждения успешной оплаты, то он будет крайне удивлён и обеспокоен, если его не будет. Так что вдвойне смотрите на уже реализованные примеры.
• С оформлением элементов управления. История та же: если пользователь привык, что радиокнопка — это кружок с точкой внутри, и если сделать её квадратной, то пользователь может неправильно понять, что произойдёт после нажатия. И вообще он может забеспокоиться от неведения, не выбрать, скажем, способ доставки с помощью этой радиокнопки и уйти покупать к конкурентам.

При выборе цветов, шрифтов, и графических элементов есть великое желание быть модным и трендовым дизайнером (говорю по своему опыту). А нужно ли? На мой взгляд, цели может быть две: быть модным в дизайнерском сообществе или быть модным для пользователей. Если вы в первой категории, то, скорее всего, вы будете делать фестивальные сайты, которые, как правило, не отличаются функциональностью и полезностью для клиента, зато свистелок, красот и анимации будет очень много. С точки зрения бизнеса задача здесь может быть только «быть модным и wow-эффект». Если этого хочет заказчик, то вперёд. ?

Если речь идёт о том, чтобы «быть модным для пользователя», то получается как с модой в одежде: только через какое-то время нововведения с подиумов переходят в массовый обиход. При этом важно не забывать, что чем сложнее сайт, тем более простым его нужно делать в визуальном плане. Иначе вы рискуете сделать сайт по последним трендам, а пользователь посмотрит и подумает: «Что это вообще такое? Я хотел просто пылесос купить».
Будьте осознанны: подумайте, какая цель этого сайта? Чего хочет достичь заказчик? Поможет ли мне для этого применение трендов?

В 2020, например, популярны плоские векторные иллюстрации с текстурами и персонажами, градиенты, яркие чистые цвета, 3D-иллюстрации, аккуратная анимация, короткие видео, простота и минимализм, неоморфизм, изометрия, mobile first. Некоторые из этих трендов обсуждают уже года три подряд, но аргументировать их использование и наличие в конечном счёте только вам.

Красота — да, но восприятие определённых характеристик — нет. В работе над макетами также нужно не забывать, что есть факторы, которые работают для всех людей как биологических существ. Про воздействие разных цветов и шрифтов я уже рассказала, перечислю ещё несколько таких моментов.

Визуальная иерархия. Наш взгляд замечает что-то самым первым, а что-то не замечает совсем. Это зависит от контраста, размера, цвета элементов и других параметров. Для быстрой оценки визуальной иерархии расфокусируйте взгляд и постарайтесь заметить, в какой последовательности глаз переходит по элементам. Это важная тема для восприятия информации на сайте — кнопку «Купить» пользователь должен заметить, даже если он отвлечённо смотрит на сайт, а какую-либо не слишком важную информацию стоит визуально заглушить, чтобы не отвлекать от главного действия.

Паттерны чтения. Существуют три паттерна — F, T и Z. Согласно им, глаз двигается по информации на сайте аналогично форме этих букв. Соответственно, нужно иметь в виду, что и где вы располагаете на сайте, поскольку это может выпасть из паттерна и не быть замеченным пользователем.

Теория близости. Элементы, которые стоят ближе друг к другу по отношению к остальным элементам, будут казаться «вместе», из одной категории. Это к вопросу о композиции и отступах — если вы хотите обозначить отдельный блок, отделите его отступами от остальных или уменьшите отступы между элементами. Смотря на сайт не слишком внимательно (а именно так мы делаем в большинстве случаев), пользователь может посчитать, например, что эта «отстоящая» строка с суммой на счету не относится к общей сумме, и вообще что это отдельные деньги, которые добавляются к общей сумме денег, хотя это всего лишь часть общей суммы. Вот к такому беспорядку может привести пренебрежение теорией близости. ?

Когнитивные искажения. Это результат того, что мозг оптимизирует работу с информацией и что-то отсекает, додумывает, обобщает и т. д. Это довольно обширная, но любопытная тема, её стоит изучать, когда уже познал цвета, шрифты и композицию.

Референсы — это поиск выхода из лабиринта. При создании дизайна часто бывают моменты, когда бьёшься, скажем, над видом карточки товара — и так попробовал, и так, и всё не то. Короче говоря, идеи закончились. Что делать в такой ситуации? Идти смотреть референсы!

По референсам действительно можно сделать хороший дизайн, просто повторяя и адаптируя то, что уже кем-то создано. С их помощью можно как выбрать цвета и составить композицию, так и разобраться с организацией информации на сайте.

Как грамотно подбирать референсы, чтобы процесс не превратился в бесцельное восхищение чужими работами и потерю времени:

1. Определитесь с целью поиска — вам нужны красивые одностраничники, интернет-магазины, корпоративные сайты компаний, или может оформление конкретного блока преимуществ, организация корзины или что-то другое?
2. Поймите, ваш запрос больше про оформление или про функциональность? Если про оформление, то можно пойти на siteinspire.com, behance.net, dribbble.com, onepagelove.com или awwwards.com, там можно почерпнуть много красивых приёмов. А если про функциональность, то лучше выделить конкретную функцию, понять, на каких сайтах она может быть и посмотреть там.
3. Как показывает практика, плагиата у вас, скорее всего, не получится, потому что: во-первых, сложно найти сайт, который полностью соответствует вашей постановке задачи (цель сайта, ЦА, её потребности, вкус заказчика и прочее). Во-вторых, сама информация, количество пунктов, объём текста у вас тоже будет отличаться. И, в-третьих, после просмотра десятка сайтов-референсов у вас обязательно появятся собственные дизайн-идеи, которые вы захотите реализовать.

Если у вас есть любовь и способность к обучению, то, безусловно, всё можно изучить: и теорию цвета, и как работать с типографикой, композицией, анимацией. Даже рисовать можно научиться при большом желании, вопрос только в ресурсах.

Первым шагом я советую начать делать дизайн-зарядку — 15 минут насмотренности каждое утро: пойти на siteinspire.com или awwwards.com, смотреть сайты и анализировать, что понравилось, что нет, сохранять какие-то примеры в закладки. Так вы натренируете глаз на умение отличать хорошее от плохого (со временем у вас в голове сформируется своя интуитивная ранжировка сайтов даже среди тех, которые находятся на behance и dribbble). Второй шаг — чтение книг. А третий (когда книг будет мало) — записаться на курсы и начать читать профильные статьи.

Примеры хороших функциональных решений можно посмотреть на любом достаточно успешном и популярном сервисе — например продукты Google и Яндекс (ведь если они успешны и популярны, значит они удобны для пользователей и решают их задачи).

• Йоханнес Иттен «Искусство цвета» (упоминала выше, книга про цвета),
• Александра Королькова «Живая типографика» (про типографику),
• Стив Круг «Не заставляйте меня думать» (про юзабилити),
• Даниэль Канеман «Думай медленно, решай быстро» (про когнитивные искажения),
• Йозеф Мюллер-Брокман «Модульные системы в графическом дизайне» (про композицию),
• Adam Wathan, Steve Schoger «Refactoring UI» (методичка по UI-дизайну в целом).

Что касается плохих решений, то для этого есть целый интернет-сборник таких сайтов:

• https://www.lingscars.com/ — здесь плохо всё. Когда я захожу на сайт, я не понимаю, что происходит, где я и какой сейчас год. Всё светится, прыгает, глазу не понятно, за что зацепляться, где главное действие, какая информация самая важная, куда идти и что делать.
• https://www.theworldsworstwebsiteever.com/ — аналогично. Разница только в том, что создатели этого сайта специально сделали его таким, чтобы напомнить нам о том, как не надо делать сайты. ?
• http://www.greatdreams.com/ — помимо всего прочего, синий текст на фиолетовом фоне заставляет мои глаза напрячься, чтобы его прочитать.
• http://www.johnprocario.com/ — казалось бы, красивый дизайнерский сайт. Минимализм, светлые цвета, качественные фото. Но мне потребовалось немало времени (5–6 секунд раздумий в сфере цифрового пространства — это много), чтобы разобраться с навигацией между разными работами из портфолио и заметить практически сливающийся плюсик на фоне фотографии.

Если вы сомневаетесь, хорошее или плохое решение используете, существует чат в Telegram, где дизайнеры могут выложить свои макеты на обозрение, собрать критику и обсудить решения — https://t.me/ui_club.