Читать нас в Telegram

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

Рубрика: Статьи
,
8482

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

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

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

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

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

 

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

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

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

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

Типографика

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

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.

***

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

Хинт для программистов: если зарегистрируетесь на соревнования Huawei Honor Cup, бесплатно получите доступ к онлайн-школе для участников. Можно прокачаться по разным навыкам и выиграть призы в самом соревновании.

Перейти к регистрации