Теоретические основы веб-дизайна

1. Кредо веб-дизайнера – Лучше меньше, да лучше.

Когда пользовательской аудитории впервые был представлен браузер Google Chrome, все удивились – что это за пустая панель без ничего? Народ привык к мощной системе типа Mozilla Firefox с огромным количеством пунктов меню, панелей закладок, плагинов, всяких нужных и ненужных причиндалов.

Вскоре появился еще один разрушитель традиций – Windows 8 с METRO User Interface, где опять-таки преобладали максимально упрощенные схемы выравнивания и минималистские тенденции.

Большая часть возможностей Mozilla Firefox старого дизайна никогда не использовалась и только нагружала аппаратный ресурс компьютера. Поэтому не так давно и этот браузер начал копировать минимализм и эргономику Google Chrome.

1. Британские ученые выяснили, что человеческое восприятие может одновременно фиксировать вниманием не более, чем на 7 объектах в поле зрения.
2. И вся эта великолепная семерка относится к жизненно важным явлениям.

Пища. Питье. Секс. Опасность. Добыча. Безопасное и комфортное место для отдыха

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

Посетитель сайта имеет заранее определенный список интересов при посещении сайта. И эти интересы явным образом выражены в поисковом запросе, набранном в Google или Яндекс.

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

Выстраивайте приоритетную структуру дизайна сайта

1. Человек по своей природе наибольшее значение придает объектам слева направо и сверху вниз. Есть такая формула для проектирования дизайна сайтов – по букве латинского алфавита “F”.
2. Все, к чему желательно в первую очередь привлечь внимание посетителей, располагаются выше и левее.

Жадные до дизайна разработчики переполняют веб-страницу огромным количеством блоков и элементов. К чему это приводит? В поле внимания в любом случае попадает только семь элементов, которые очевидно относятся к интересам целевого посетителя. Остальные оказываются бесполезным расходом ресурсов.

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

Сайт как Воронка продаж

Как обычно начинающий веб-мастер приступает к работе над сайтом? Задается “важным” вопросом – начать создание сайта с чистого листа или с готового типового шаблона? Потом что-то выбирается и начинаются бессмысленные манипуляции с блоками и модулями на мастер-странице. В чем тут ошибка?

Не важно, с чего начинать, а важно – хорошо закончить

1. Веб-мастер не видит цели. Перестановки в дизайне производятся на пути к достижению какого-то еле ощутимого подсознательного “чувства прекрасного». Чтобы красиво было. Зачем красиво? Что значит красиво? В ресторане красиво на лабутенах, а в деревне резиновые сапоги намного лучше.
2. Молодая сексуальная девушка, модно одетая, выглядит привлекательно для молодого половозрелого мужчины из-за активной работы гормональной системы, а не в критериях “вечной красоты и идеалов”.
3. Для голодного мужика стейк с кровью смотрится намного привлекательнее сексуальной девушки.

Мужчина в поисках романтических приключений и мужчина в поисках бифштекса – это совершенно разные целевые аудитории и для них нужны особенные дизайнерские решения сайтов.

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

Чтобы создать Сайт Для Людей (СДЛ) – каждый элемент дизайна должен представлять собой возможность решения посетителем проблемы, достижения цели, облегчения боли или получения удовольствия.

Людей не интересуют абстрактные красоты, или отвлеченное качество товара. Не нужно рассказывать о том, какой ваш сайт замечательный и какие ваши сервисы качественные.

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

Есть маркетинговый прием – составить усредненный портрет трех типовых пользователей из числа целевой аудитории и далее вести все работы с сайтом с акцентом на этих трех наиболее перспективных клиентах.

Эпоха Визуализации

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

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

1. Люди предпочитают обмениваться мыслями посредством рисунков и видео.
2. Для владельца сайта ситуация очень даже благоприятная.
3. Визуальные образы воздействуют непосредственно на подсознание и запускают в работу глубинные инстинкты, минуя критический разум, оперирующий словами.

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

Список самого важного

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

И это уже будет не User Interface, а конкретно User Experience – дизайн, влияющий на пользовательский опыт, конверсию, тул-кит факторов влияния на поведенческую активность целевых визитеров.

1. Посетители приходят на сайт с конкретной целью удовлетворить ту или иную степень голода в тех или иных продуктах.
2. Когда вы раскладываете на столе именно то и в том количестве, что хотел бы скушать гость – посетитель буквально начнет хвататься за все одновременно и пытаться съесть все, пока это сказочное изобилие не исчезнет.
3. Если клиент прямо сейчас хотел отведать узбекский плов – совершенно бесполезно ставить на стол тарелки с холодцом и сибирскими пельменями. В лучше случае избыточные блюда будут не замечены, в худшем вызовут раздражение. И никакое абстрактное качество продукта не имеет значения для удовлетворения сиюминутной потребности человека.
4. Очень хорошо смотрится разделение важных частей пустыми белыми пространствами. Это успокаивает и создает ощущение легкости и комфорта. Улучшается юзабилити, пользовательский опыт и поведенческие факторы.

Примечание. Через пару лет мода в индустрии веб-дизайна может поменяться и тогда хорошим тоном снова станут перегруженные элементами интерфейсы.

3.2. Веб-дизайн – от Теории к Практике

1. “Если ваш сайт электронной коммерции плохо разработан и не соответствует идее клиента о том, как он должен выглядеть и работать, то ваш бизнес обречен”. © Webdesign.org

В дизайне не существует никаких вечных принципов. Красиво то, что считается модным сегодня. И что же сегодня в тренде? Web-дизайн сегодня окончательно превратился в инструмент интернет-маркетинга. От дизайнерского решения сайта требуется обеспечить непрерывный потребительский опыт.

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

Технические требования

1. Высокая скорость загрузки сайта. Это означает минимализм – избавьтесь от всех элементов страницы, которые не являются абсолютно необходимыми (для конверсии посетителя в покупателя).
2. Дизайн должен соответствовать актуальным представлениям клиента о способе достижения конкретной цели, относящейся к вашему продукту.
3. Отзывчивость и адаптивность – удобство на всех устройствах.

А что такое потребительские представления целевой аудитории? Это и есть отражение актуальных тенденций по отрасли. Люди смотрят друг на друга и особенно внимательно смотрят на лидеров. В итоге складывается отраслевой Тренд.

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

3.3. Основные тенденции веб-дизайна 2016

1. Технологичность + SEO + маркетинг.

Шаблонный дизайн. Сайт разрабатывается на основе готового, обычно бесплатного, шаблона или “темы”. Шаблонный дизайн – это то, что в народе называется бесплатный сыр в мышеловке. В систему специально заложена масса ограничений, которые не позволят нормально развиваться проекту ни в направлении поискового продвижения, ни в плане бизнеса. Это означает, что за каждый следующий шаг вы будете платить и снова платить. По факту это получается купить в рассрочку и под большие проценты. Потому что такая постепенная доработка в итоге обойдется дороже, чем если единовременно заплатить всю сумму и получить полностью работоспособный продукт.

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

Плоский дизайн. Flat UI. Здесь объяснять особенно нечего. Преимущество – простота, легкость и скорость. Недостаток – посетители не очень понимают, на что нажать, чтобы получить удовлетворение. Плоский дизайн часто берется в качестве минималисткой основы или канвы, на которую слой за слоем накладываются элементы из арсенала более современных и прогрессивных дизайнерских стилей.

Material Design. Материальный дизайн в стиле Google Android. Модернизированный Плоский дизайн. Для улучшения пользовательского опыта и формирования интуитивно понятной среды добавляются тени, кнопки и анимация процессов.

Карточный дизайн. Идея пришла из социальных сетей Pinterest и Instagram. Как оказалось, карточное предоставление положительно влияет на покупательскую активность посетителей и отлично подходит для электронной коммерции. Карточный дизайн тоже можно считать современной вариацией в стиле Flat UI.

Огромное фото или видео во весь экран в качестве фона страницы. Full-Page Background. Удачное решение для сайтов туроператоров, агентств по недвижимости, ресторанов, гостиниц. Домов отдыха. Часто такое решение можно наблюдать на сайтах разработчиков программного обеспечения для работы с графикой и веб-дизайном.

Меню Гамбургер. Изобретение для маленьких экранов мобильных устройств, которое оказалось очень удобно и для широкоформатных десктопов. При желании три линии гамбургера мгновенно масштабируются до любой степени вложенности.

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

Вопрос: какой тип дизайна выбрать для своего сайта?

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