Блог

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

Стив Джобс как-то сказал: «Дизайн — это не то, как продукт выглядит и воспринимается. Дизайн — это то, как он работает». И мы в 3owls на все 100% согласны с этим утверждением.
2020.06.04
Технологии
Дизайн
Стив Джобс как-то сказал:
Дизайн — это не то, как продукт выглядит и воспринимается. Дизайн — это то, как он работает
И мы в 3owls на все 100% согласны с этим утверждением.
Качественный веб-дизайн, влияющий на конверсию — это не только цветовое оформление сайта, насыщенность оттенков, красивые шрифты и картинки. При создании дизайна сайта необходимо еще учитывать и то, как пользователь будет взаимодействовать с ним. Т.е. нужен комплексный подход, проработка UI (User Interface) и UX (User Experience).
Об этом и давайте поговорим.

С чего начать разработку дизайна и какие ставить перед ним задачи?

Задача дизайна — достижение целей, которые вы хотите реализовать при помощи сайта. Давайте сразу разберемся, что есть что. UI (User Interface) отвечает за то, как выглядит интерфейс. Т.е. это про цвета, удобочитаемость шрифтов и всякие другие «украшательства». UX (User Experience) это опыт пользователя. Он отвечает за впечатления и ощущения, которые получает посетитель при взаимодействии с вашим сайтом. Что важнее? Примерно 50:50. Важна и красота, и удобство. Хотя, если честно, удобство все-таки немного важнее. Это доказывают примеры многочисленных сайтов, про craigslist.com дизайн которых можно сказать: «как из 90-х», пользующихся успехом у посетителей, потому что это просто удобно. Один из них — доска объявлений craigslist.com. По состоянию на май 2020 года он занимает 191 место в глобальном рейтинге. Можно смело предполагать, что это благодаря выгодному сочетанию UI и UX.

В главной роли — пользователь

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

Далее — путь пользователя

После составления портрета и определения роли пользователя, нужно понять, как он будет вести себя при посещении разработанного сайта. Здесь можно пойти 2 путями.

1. Анализ UI Patterns

Есть специализированный проект Good UI. Его создатели собирают шаблоны построения веб-сайтов, которые проверены A/B-тестами и показали неплохие результаты конверсии. Как говорится: «Бери и делай». Примеры популярных паттернов: Z-паттерн. Его суть сводится к тому, что пользователь изучает первый экран, двигаясь по траектории, напоминающей букву Z: левый верхний угол, правый верхний, часть экрана в средней части, смещенная влево, и правый нижний угол. Схематично это выглядит так. Причем особое внимание пользователь уделяет первым трем точкам.

F-паттерн. Рекомендуется применять к текстовому контенту, размещая его на странице вдоль абстрактной сетки, напоминающей символ F. Если посмотреть на рисунок, можно понять, что логика паттерна относительно мест особого внимания схожа с предыдущим. ВАЖНО! Он работает только для десктопной версии сайта. Диаграмма Гутенберга. Описывает поведение пользователя в углах экрана. В левый верхний посетитель сайта смотрит всегда. Правый верхний угол рассматривается как зона дополнительной информации. Сюда рекомендуют размещать формы или контакты. Правый нижний угол — т.н. зона принятия решения. Это хорошее место для кнопки «Заказать» и других важных элементов. А вот нижний левый угол в большинстве случаев остается без внимания. Сюда что-то важное размещать не стоит. И таких паттернов немало (на указанном выше ресурсе их более 100). Главное — правильно выбрать подходящий под свою целевую аудиторию.

2. Провести собственные тесты

Шаблоны — хорошо. Но ведь это шаблоны. И в ряде случаев с их применимостью к конкретному проекту могут возникать вопросы. Если есть сомнения, лучше провести собственные A/B-тесты. Да, это дольше. Да, это может быть дороже. Но опыт многих клиентов 3owls показывает, что оно того стоит. Инструментов для проведения тестирования немало. Популярные примеры: Visual Website Optimizer, Optimizely и Unbounce. А вообще, рекомендуем вам по возможности комбинировать эти 2 пути (подхода). Паттерны и A/B-тестирование дадут вам готовый фундамент для UX/UI. Вы поймёте, где какие элементы размещать, как вести пользователя по странице и даже уже будете иметь представление о цветовом оформлении. Останется еще немного поработать и дизайн будет готов.

Несколько конкретных советов для создания современного и правильного веб-дизайна

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

Цвета

В теории человеческий глаз способен различать порядка 10 000 000 цветов и оттенков. На практике же «рядовой» пользователь различает около 100, а профессионал (чья работа связана с дизайном, рисованием и пр.) — порядка 150. Но даже этих 100 цветов более чем достаточно, чтобы создавать эффективнее сочетания и крутой дизайн. Теория цвета — необъятная область, разбираться с которой можно очень долго. Давайте рассмотрим пару основных моментов, которые стоит учесть при разработке веб-дизайна. Цвета имеют свою семантику и вызывают определенные настроения. Например, красный, желтый и оранжевый побуждают человека к действию. Их рекомендуется использовать для оформления кнопок и других важных элементов. Зеленый и синий расслабляют. Часто они преобладают в оформлении, чтобы дизайн не «давил на мозги». Серый ассоциируются с серьезностью и строгостью. С его помощью можно подчеркнуть статус владельца сайта и серьезность бизнеса. Также важно учитывать символизм цветов в разных культурах мира. Этот совет приемлем для тех, кто создает сайт под иностранную аудиторию. В общем, здесь есть, где разгуляться. И лучше в этом вопросе разбираться совместно со специалистами.

Mobile-first или Desktop-First?

По состоянию на первую половину 2020 года около 67% пользователей интернета в мире выходят в сеть с мобильных устройств. На этом фоне все больше специалистов «топят» за Mobile-first подход при проектировании веб-приложений и сайтов. Он предполагает разработку от мобильной версии к десктопной. Т.е. основа — mobile макет, в который добавляются блоки и элементы по мере увеличения экрана. Цель такого подхода — обеспечить пользователю «единообразный» опыт на всех устройствах. Если подавляющее большинство потенциальных посетителей вашего сайта — мобильные пользователи и специфика проекта, что он изначально, заточен под мобильные платформы, конечно же, используйте Mobile-first подход. Но и у Desktop-first есть свои плюсы. Например, при этом подходе не приходится возвращаться к верстке: все элементы и блоки уже сверстаны и их приходится только стилизовать при уменьшении экрана. Такой подход в ряде случаев ускоряет разработку. А с точки зрения дизайна, Desktop-first или Mobile-first, какой-то принципиальной разницы нет. Если дизайн разработан качественно, со знанием дела, то, какой вы выберете подход, какой-то сверх особой роли не играет. Это дело вкуса, удобства для разработчика и немного SEO.

Редизайн. Или дизайн сайта не создается раз и навсегда

2-7 лет… Такой примерный срок «годности» дизайна современного сайта. Согласитесь, разбежка между «от» и «до» существенная. Н, как есть, так есть. Периодичность обновления дизайна зависит от сферы, в которой вы работаете, специфики веб-сайта и ряда других факторов. К примеру, если проанализировать ТОП-100 маркетинговых сайтов из все того же рейтинга Alexa, судя по данным из архивов, средний промежуток времени между масштабными редизайнами здесь составляет около 2 лет и 7 месяцев. Кто-кто, а крупные игроки маркетингового рынка в этом толк знают. Как понять, когда нужен дизайн? Аналитика вам в помощь. Следите за поведенческими факторами, учитывайте тренды в веб-разработке, оценивайте изменения предпочтений целевой аудитории и будет вам счастье. Актуальный дизайн = качественный и привлекательный для пользователей.

Видно, чтобы создать современный и качественный дизайн сайта, требуется проделать немалый объем работ. И принимать участие в них должны не только дизайнеры, но и маркетологи, SEO-шники и специалисты из других сфер. Мы в 3owls придерживаемся такого подхода. И знаете — никто из клиентов не жаловался.