Современный и качественный веб-дизайн: каков он
Качественный веб-дизайн, влияющий на конверсию — это не только цветовое оформление сайта, насыщенность оттенков, красивые шрифты и картинки. При создании дизайна сайта необходимо еще учитывать и то, как пользователь будет взаимодействовать с ним. Т.е. нужен комплексный подход, проработка UI (User Interface) и UX (User Experience).Об этом и давайте поговорим.
С чего начать разработку дизайна и какие ставить перед ним задачи?
Задача дизайна — достижение целей, которые вы хотите реализовать при помощи сайта.
Давайте сразу разберемся, что есть что.
Давайте сразу разберемся, что есть что.
UI (User Interface)
Отвечает за то, как выглядит интерфейс. Т.е. это про цвета, удобочитаемость шрифтов и всякие другие «украшательства».
UX (User Experience)
это опыт пользователя. Он отвечает за впечатления и ощущения, которые получает посетитель при взаимодействии с вашим сайтом.
Что важнее?
Примерно 50:50. Важна и красота, и удобство. Хотя, если честно, удобство все-таки немного важнее. Это доказывают примеры многочисленных сайтов, про дизайн которых можно сказать: «как из 90-х», пользующихся успехом у посетителей, потому что это просто удобно.
Один из них — доска объявлений craigslist.com. По состоянию на май 2020 года он занимает 191 место в глобальном рейтинге. Можно смело предполагать, что это благодаря выгодному сочетанию UI и UX.
В главной роли — пользователь
Сразу садиться за рисование макета и разработку дизайна не стоит. Сначала анализируется ЦА вашего сайта. Составляется некий портрет пользователя. На его основе вы сможете спроектировать поведение посетителя в разных ситуациях, прогнозировать его реакцию и пр. На этом этапе мы привлекаем специалистов из разных сфер: маркетологов, SEO, психологов и других экспертов.
Далее — путь пользователя
После составления портрета и определения роли пользователя, нужно понять, как он будет вести себя при посещении разработанного сайта. Здесь можно пойти 2 путями.
1. Анализ UI Patterns
Есть специализированный проект Good UI. Его создатели собирают шаблоны построения веб-сайтов, которые проверены A/B-тестами и показали неплохие результаты конверсии. Как говорится: «Бери и делай». Примеры популярных паттернов:
2. Провести собственные тесты
Шаблоны — хорошо. Но ведь это шаблоны. И в ряде случаев с их применимостью к конкретному проекту могут возникать вопросы.
Если есть сомнения, лучше провести собственные A/B-тесты. Да, это дольше. Да, это может быть дороже.
Но опыт многих клиентов 3owls показывает, что оно того стоит. Инструментов для проведения тестирования немало. Популярные примеры: Visual Website Optimizer, Optimizely и Unbounce.
А вообще, рекомендуем вам по возможности комбинировать эти 2 пути (подхода). Паттерны и A/B-тестирование дадут вам готовый фундамент для UX/UI. Вы поймёте, где какие элементы размещать, как вести пользователя по странице и даже уже будете иметь представление о цветовом оформлении. Останется еще немного поработать и дизайн будет готов.
Mobile-first или Desktop-First?
Цвета
В теории человеческий глаз способен различать порядка 10 000 000 цветов и оттенков. На практике же «рядовой» пользователь различает около 100, а профессионал (чья работа связана с дизайном, рисованием и пр.) — порядка 150. Но даже этих 100 цветов более чем достаточно, чтобы создавать эффективнее сочетания и крутой дизайн.
Теория цвета — необъятная область, разбираться с которой можно очень долго. Давайте рассмотрим пару основных моментов, которые стоит учесть при разработке веб-дизайна.
Цвета имеют свою семантику и вызывают определенные настроения.
Например, красный, желтый и оранжевый побуждают человека к действию. Их рекомендуется использовать для оформления кнопок и других важных элементов. Зеленый и синий расслабляют. Часто они преобладают в оформлении, чтобы дизайн не «давил на мозги». Серый ассоциируются с серьезностью и строгостью. С его помощью можно подчеркнуть статус владельца сайта и серьезность бизнеса. Также важно учитывать символизм цветов в разных культурах мира. Этот совет приемлем для тех, кто создает сайт под иностранную аудиторию. В общем, здесь есть, где разгуляться. И лучше в этом вопросе разбираться совместно со специалистами.По состоянию на первую половину 2020 года около 67% пользователей интернета в мире выходят в сеть с мобильных устройств.
На этом фоне все больше специалистов «топят» за Mobile-first подход при проектировании веб-приложений и сайтов. Он предполагает разработку от мобильной версии к десктопной. Т.е. основа — mobile макет, в который добавляются блоки и элементы по мере увеличения экрана. Цель такого подхода — обеспечить пользователю «единообразный» опыт на всех устройствах.
Если подавляющее большинство потенциальных посетителей вашего сайта — мобильные пользователи и специфика проекта, что он изначально, заточен под мобильные платформы, конечно же, используйте Mobile-first подход.
Но и у Desktop-first есть свои плюсы.
Например, при этом подходе не приходится возвращаться к верстке: все элементы и блоки уже сверстаны и их приходится только стилизовать при уменьшении экрана. Такой подход в ряде случаев ускоряет разработку. А с точки зрения дизайна, Desktop-first или Mobile-first, какой-то принципиальной разницы нет. Если дизайн разработан качественно, со знанием дела, то, какой вы выберете подход, какой-то сверх особой роли не играет. Это дело вкуса, удобства для разработчика и немного SEO.
Редизайн.
Или дизайн сайта не создается раз и навсегда
2-7 лет… Такой примерный срок «годности» дизайна современного сайта.
Согласитесь, разбежка между «от» и «до» существенная. Нo, как есть, так есть. Периодичность обновления дизайна зависит от сферы, в которой вы работаете, специфики веб-сайта и ряда других факторов.
К примеру, если проанализировать ТОП-100 маркетинговых сайтов из все того же рейтинга Alexa, судя по данным из архивов, средний промежуток времени между масштабными редизайнами здесь составляет около 2 лет и 7 месяцев. Кто-кто, а крупные игроки маркетингового рынка в этом толк знают.
Как понять, когда нужен дизайн?
Аналитика вам в помощь. Следите за поведенческими факторами, учитывайте тренды в веб-разработке, оценивайте изменения предпочтений целевой аудитории и будет вам счастье.
Актуальный дизайн = качественный и привлекательный для пользователей.
Видно, чтобы создать современный и качественный дизайн сайта, требуется проделать немалый объем работ. И принимать участие в них должны не только дизайнеры, но и маркетологи, SEO-шники и специалисты из других сфер. Мы в 3owls придерживаемся такого подхода. И знаете — никто из клиентов не жаловался.
