Создать такой ресурс тебе помогут знания о визуальной иерархии и психологии цвета. Эта тема соприкасается с UI/UX. Захватывать внимание - значит знать свою аудиторию: ее привычки, вкусы, поведение и дать информацию в правильной форме и правильном порядке. Мы расскажем, как это сделать и как объяснить ценность такого подхода заказчику.
Что такое иерархия в веб-дизайне и дизайне приложений?
Что юзер видит первым, попадая на твой сайт/приложение? Что - во вторую очередь и почему? Это и есть визуальная иерархия - последовательность, с которой пользователь получает информацию от ресурса. Каждый экран ведет юзера через контент в определенном порядке. Если ты осмысливаешь эту последовательность и упорядочиваешь - ты можешь управлять вниманием пользователя.
Что происходит без продуманной иерархии?
Представь, ты заходишь на новостной сайт в поисках заметки и через 3 секунды выскакивает гигантское pop-up-сообщение с предложением оформить платную подписку.
Скорее всего, тебя это разозлит и ты захочешь поискать информацию на другом ресурсе.
Непродуманная иерархия создает плохой User Experience, разрушает доверие пользователя, может вызвать фрустрацию и ощущение потерянности.
Значимость и заметность
Управляй значимостью и заметностью контента с помощью:
- Размера - первыми мы считываем большие элементы, они лучше “бросаются в глаза”
- Контраста - элементы, которые выразительно отличаются от других цветом, размером, визуальным стилем, форматом - считываются первыми
- Размещения - выше на сайте в приложении - выше в иерархии
- Пустого пространства - грамотно использованное пустое пространство цепляет внимание.
- Цвета
Здесь мы писали о том, как выбрать гармоничные цветовые сочетания и как цвет влияет на восприятие.
Приоритеты бизнеса - на первом месте
Есть концепция, что дизайн должен быть ориентирован на пользователя. Мы дополним ее: на бизнес и пользователя. Ответь на вопросы:
Какой следующий самый важный шаг должен сделать юзер и почему именно этот?
Достаточно ли понятно расставлены и оформлены элементы, чтобы этот шаг был простым, естественным и приятным?
Узнай приоритеты бизнеса. Изучи последовательность действий пользователя. Напиши сценарий действий. И переведи все это в архитектуру страницы. Если все грамотно, то получится действительно интуитивный дизайн, юзер будет следовать к ключевому действию почти не прилагая усилий, естественно и гармонично.
Выбираем цвета
Цвета для проекта мы выбираем после утвержденной архитектуры. Готовые палитры, руководство кругом Иттена и правила типа “темно-синий хорошо работает в бизнесе” - не годятся. Цветовая палитра сайта или приложения должна:
- Вызывать правильные ассоциации
- Пробуждать нужные чувства
- Гармонично сочетаться с контекстом продукта
Насыщенный цвет сильнее воздействует на восприятие. Холодные цвета и оттенки более просты для глаз, обрабатываются быстрее, чем теплые, потому что имеют меньшую частоту. Холодные цвета воспринимаются как успокаивающие, расслабляющие, ассоциирующиеся с положительной уверенностью. Теплые - активные, сильные, возбуждающие и волнующие.
Хочешь научиться делать гармоничные, интуитивные интерфейсы, которые ведут пользователя к ключевому действию? Регистрируйся на коучинг «Веб-дизайнер: счастливый билет в Таиланд». Ты сможешь зарабатывать $1000 из дома или любой точки мира. Даже совмещая с учебой. Ты освоишь композицию, теорию цвета и типографику. Научишься проектировать сайты и работать с пакетом Adobe. Сделаешь 5 сильных работ для портфолио.
Хочешь узнать как проходит обучение? Залетай на День открытых дверей