Дизайн сайта (мобильного приложения) должен быть красивым и удобным. Привлекать пользователя и помогать ему ориентироваться в информации.
Над тем, как будет выглядеть каждая страница сайта, работает UI-дизайнер – создатель пользовательского интерфейса (UI – User Interface). Его задача – сделать такой интерфейс, который бы:
- зацепил внимание пользователя,
- формировал положительный и запоминающийся образ бренда,
- был удобным для восприятия и совершения действий на сайте.
Для этого дизайнер работает с композицией, сеткой, цветами, шрифтами, картинками, баннерами, иконками, кнопками, логотипом, фирменным стилем…
Есть много инструментов и много нюансов, которые нужно учесть. Обо всем не расскажешь в рамках одной дзен-статьи. Но несколькими азбучными истинами UI-дизайнера, которыми он руководствуется при создании интерфейса, поделимся.
1. Отступы
Расстояние между элементами должно выстраиваться сообразно их иерархии. Возьмем, к примеру, конструкцию «заголовок+подзаголовок+кнопка». Здесь делаем отступ между заголовком и подзаголовком меньше (примерно в 2,5-3 раза), чем отступ между подзаголовком и кнопкой. Почему? Потому что заголовок и подзаголовок находятся в более тесной смысловой связи друг с другом.
2. Сетка
Сетка – это то, с помощью чего мы выстраиваем всю композицию. Опираемся на 12-колоночники и вертикальные направляющие для выравнивания элементов.
Когда делаем адаптивную верстку под разные размеры экранов, нам также нужна сетка. К примеру, какой-то элемент занимает три колонки. Если уменьшить разрешения, он по-прежнему будет располагаться на трех колонках, но их ширина станет меньше.
3. Цвета
С помощью цвета можно привлечь внимание к главным элементам страницы: заголовку, кнопке призыва к действию, УТП.
Стандартное решение – использовать три цвета: цвет текста, цвет фона и цвет акцента. Важно, чтобы цвета контрастировали друг с другом.
В рамках каждого выбранного цвета можно регулировать оттенки, чтобы использовать для одних элементов более яркие цвета, для других менее яркие.
Для подбора цветовой палитры, проверки контрастности цветов существуют специальные сервисы.
4. Композиция страницы
В каждом конкретном случае композиция страницы может быть разной, но стандартный набор элементов – это заголовок, подзаголовок, текст, кнопка, иллюстрация (баннер). Дальше можно экспериментировать. Например, дополнить блок инфографикой или попробовать сделать броский заголовок и вообще не делать подзаголовка. Для каждого блока подбираем такие элементы, которые лучше донесут основную мысль до пользователей.
5. Фирменный стиль и логотип
Чтобы сайт работал на бренд, он должен быть выполнен в фирменном стиле компании. Если логотип и ФС уже есть, то дизайнер разработает интерфейс сайта с опорой на них. Если нет, то их нужно делать.
Хотите привлекательный и удобный интерфейс для своего сайта или мобильного приложения? Мы сделаем! Стоимость дизайна можно рассчитать на нашем онлайн-калькуляторе.
Больше подробностей о том, как создается дизайн для сайтов, читайте здесь.