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

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

Анна Гореванова

Анна Гореванова, дизайнер группы разработки карты рассрочки «Совесть» (QIWI)

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

Визуальная концепция

Первым делом я рекомендую придумать ключевой образ сайта, от этого будет гораздо проще отталкиваться при выборе оформления: представьте его как человека — с характером, внешностью, своими особенностями, стилем общения и поведением. Этот «человек» и будет предлагать клиентам и пользователям продукты или услуги бизнеса. И тут важно не забывать про ЦА и конкурентов: какой характер и способ общения лучше «зайдёт» клиентам? Или каким должен быть образ, чтобы отличаться на фоне конкурентов?

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

 

Подбираем цвета

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

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

Итак, как подобрать цвета для сайта

  • Не забывайте про целевую аудиторию: на основе её предпочтений, а также желаемого эмоционального воздействия определитесь с характером подачи сайта — что-то спокойное, luxury, активно-лидерское, весёлое и беззаботное и т. д. После этого можно подобрать основной цвет.
  • Сочетания цветов: для приятного сочетания цветов нужно, чтобы они располагались на цветовом круге в определённом порядке — последовательно, комплементарно, по треугольнику и т. д. Самый простой способ — подобрать комплементарное сочетание с помощью Adobe Kuler, там есть и другие варианты сочетаний.
  • Количество цветов: на сайте не должна быть радуга, иначе пользователь запутается, потеряется и забудет, зачем пришёл. Я обычно использую такую схему — один основной цвет (для самых важных и активных элементов), один дополнительный (для большей свободы дизайна элементов), один базовый неконтрастный (для отделения блоков контента), а также белый для фона и чёрный или какой-либо тёмный для текста, чтобы хорошо читался (конечно, можно пойти в тёмную тему и сделать наоборот).
  • Объём цветов: чем более активный и контрастный цвет по отношению к другим, тем меньше его должно быть на сайте. Так, основной цвет лучше использовать точечно, в тех местах, где нужно особо что-то выделить (например самую важную и целевую кнопку или самый важный заголовок) — примерно 10% сайта. Дополнительный цвет, не такой активный, как основной, можно использовать на 20–40% сайта; базовый неконтрастный цвет — 40–50%; ну, а фон — это фон. 🙂

Типографика

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

3 совета по работе с типографикой

  • Подберите шрифтовую пару. Не тройку, не пятёрку, а пару. На сайте лучше использовать не более двух шрифтов, а в идеале — два шрифта из одной гарнитуры. Например, некоторые гарнитуры включают в себя и шрифт с засечками и без, а также брусковый. Если их скомбинировать, то они будут сочетаться друг с другом, поскольку имеют одну анатомию (особенности начертания букв, характер изгибов линий и прочее).
  • Создайте гайдлайны оформления текста. На основе контента сайта определите, сколько у вас будет заголовков, подзаголовков, будет ли только текст или ещё подписи, врезки, подсказки и т. д. Помните о назначении каждого стиля текста: заголовки должны контрастировать друг с другом по размеру и начертанию (bold, medium, italics и пр.), чтобы читатель мог сразу сориентироваться среди контента, а основной текст должен быть удобным для чтения, не слишком крупным или мелким. Обычно хватает 2–3 стилей для заголовков, одного — для текста и ещё одного для подписей, мелкого текста и пр.
  • Придерживайтесь разработанного гайдлайна. Добавляйте новый стиль текста осознанно, только если вы видите в этом сильную необходимость или если этот контент нельзя оформить существующими стилями.

FAQ

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

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

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

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

***

Другие части серии

Вакансии в тему: