7 простых уловок в UI, которые помогут разработчикам обойтись без дизайнеров
Любую статью можно сохранить в закладки на сайте, чтобы прочесть ее позже.
Режим чтения увеличивает текст, убирает всё лишнее со страницы и даёт возможность сосредоточиться на материале. Здесь вы можете отключить его в любой момент.
Vector публикует текст Адама Вэтхена и Стива Шоугера, в котором они рассказывают, что делать, если вы — разработчик без дизайнера, и как можно делать качественные проекты, используя тактику, а не талант.
Каждый веб-разработчик хотя бы раз сталкивался с ситуацией, когда ему необходимо принимать решения по визуальному дизайну: возможно, в вашей компании нет штатного дизайнера, вам нужно самому создавать пользовательский интерфейс, или вы создаете проект на фрилансе, и ваша команда — вы сами.
Легко опустить руки и сказать: «Я никогда не смогу сделать так, чтобы мой проект выглядел идеально, я же не дизайнер!»
Сохраняйте спокойствие. Сейчас я расскажу вам, какие хитрости вы можете применить, чтобы ваша работа выглядела качественно. Даже если у вас нет опыта в графическом дизайне.
Вот семь простых идей, которые вы можете использовать для улучшения ваших дизайнов сегодня.
1. Чтобы построить иерархию, играйте с цветом и жирностью вместо размера
Распространенная ошибка при оформлении текста — слишком большая зависимость от размера шрифта. Вы задаете себе вопрос:
- «Этот абзац важен? Давайте сделаем его больше».
- «Этот абзац вторичен? Давайте уменьшим его».
Вместо того, чтобы работать с размерами шрифта, попробуйте использовать цвет или жирность шрифта. Правильнее будет спросить:
- «Этот абзац важен? Давайте сделаем это жирнее».
- «Этот абзац вторичен? Давайте использовать цвет светлее».
Попробуйте придерживаться двух или трех цветов:
- Темный (но не черный) цвет для основного текста (заголовок статьи)
- Серый цвет для вторичного контента (дата публикации статьи)
- Более светло-серый для вспомогательного контента (авторские права в нижнем колонтитуле)
Так же с жирностью: нормальная толщина для основной части текста — 400 или 500, в зависимости от шрифта.
Для текста, который вы хотите подчеркнуть, нужен более толстый шрифт — 600 или 700.
Старайтесь не использовать шрифты жирностью до 400. Они могут работать для больших заголовков, но их слишком трудно читать при меньших размерах.
2. Не используйте серый текст на цветном фоне
На цветном фоне серый текст выглядит не так хорошо из-за низкого контраста. Вместо этого попробуйте приблизить цвет текста к цвету фона — это поможет построить более логичную иерархию в тексте.
Есть два способа уменьшить контраст при работе с красочными фонами:
Уменьшите непрозрачность белого текста. Используйте белый текст и уменьшите непрозрачность. Это позволит фоновому цвету немного просвечивать, снимет акцентирование текста таким образом, чтобы не вступать в противоречие с фоном.
Вручную выберите для текста оттенок, который будет основываться на цвете фона.
Если фон текста — изображение или рисунок, или уменьшение непрозрачности делает текст слишком скучным и размытым — оттенок сработает лучше, чем уменьшение непрозрачности.
3. Сместите тени
Вместо того, чтобы слишком сильно увлекаться размытием, сместите тени вниз. Это выглядит намного естественнее: так вы имитируете естественный источник света, светящий сверху, как мы привыкли видеть в реальном мире. Это правило также относится к полям для ввода текста.
Если вы хотите узнать больше о тенях, больше можно прочитать в Material Design Guidelines.
4. Используйте меньше границ
Когда вам нужно создать разделение между двумя элементами, попробуйте обойтись без линий. Не спорю, границы — отличный способ отделить два элемента друг от друга, но это не единственный способ. Слишком много линий сделает ваш проект тяжелым и нагроможденным.
В следующий раз попробуйте одну из этих идей:
- Используйте тени на границах блоков. Тени на границах отлично выделяют элемент. Более того — они выполняют ту же роль, что и линии, но не отвлекают пользователя.
- Используйте два разных оттенка для фона. Для двух смежных элементов можно использовать разные оттенки — этого хватит для их разграничения. Если вы уже используете разные цвета фона вместе с рамкой — попробуйте удалить рамку. Возможно, она вам просто не нужна.
- Добавьте дополнительный интервал. Размещение объектов дальше друг от друга — отличный способ отделить элементы. При этом не нужно выдумывать велосипед: просто расстояние, никаких новшеств.
5. Не увеличивайте иконки, которые можно оставить маленькими
Если вам нужно использовать несколько крупных иконок (например, для раздела «Что мы предлагаем» на лендинге), вы, вероятно, будете использовать какой-нибудь бесплатный набор значков: например, Font Awesome или Zondicons. Вы возьмете иконку, и будете увеличивать ее размер до тех пор, пока они не будут нужного размера. Это же векторные изображения — значит качество не ухудшится, если вы увеличите размер, верно?
Хоть качество иконок и не ухудшается при увеличении, изображения с разрешением 16–24 пикселя не будут выглядеть профессионально, если вы увеличите их в 3 -4 раза. Для такого увеличения у них просто недостаточно деталей — поэтому будет заметно, что вы их растянули.
Если у вас есть только эти маленькие иконки, попробуйте добавить еще одну фигуру на фон и залейте ее в тоне самой иконки. Например, попробуйте использовать круг:
Так вы будете придерживаться оригинального размера, но заполните пустое место.
Если бюджет вашего проекта позволяет вам покупать инструменты для работы, используйте премиум-набор иконок, предназначенные для больших размеров: Heroicons или Iconic.
6. Используйте цветные акценты
Одна простая уловка — добавить цветные элементы к блокам. В данном случае — полосы, которые условно отделяют блоки друг от друга. Без них интерфейс выглядел бы слишком мягким.
Например, можно оживить оповещение, добавив полосу:
Или выделить активные элементы:
Не нужно никакого таланта в графическом дизайне, чтобы добавить несколько полос и сделать интерфейс более завершенным.
Если вам трудно подобрать цвета, и вы не хотите использовать слишком популярные оттенки, используйте сервис поиска цветов от Dribbble.
7. Не каждой кнопке нужен яркий цвет
Когда пользователь попадает на страницу, которую вы разработали, его может запутать большое количество разноцветных активных кнопок. Такие фреймворки, как Bootstrap, помогают с этим. Во время разработки они подсказывают:
«Это утверждение? Сделай кнопку зеленой»; «Это кнопка удаления? Сделай ее красной».
Это называется семантика. Но есть более важный аспект, о котором обычно забывают: иерархия.
Каждое действие на странице — часть пирамиды. У большинства страниц есть только одно самое важное действие, пара менее важных вторичных действий и несколько редко используемых действий на третьем месте.
При разработке важно расставлять каждое действие по иерархии. Поделите каждую функцию вашего проекта на три части:
- Основные действия. Они должны быть очевидными для пользователя. Выбирайте самые контрастные и насыщенные цвета фона, они отлично работают.
- Вторичные действия. Они должны быть четкими, но не слишком яркими. Цветные контуры или цвета фона с более низким контрастом — отличный вариант.
- Третичные действия. Их можно найти на странице, но они ненавязчивы. Стилизируйте эти действия как ссылки.
Кнопки «Нет», «Отказаться» или «Удалить» не всегда должны быть красными. Если деструктивное действие — не основное на странице, лучше подобрать ему дизайн как у вторичных или третичных кнопок.
Большой, красный и жирный стиль оставьте для случаев, когда это отрицательное действие — основное в интерфейсе. Как, например, в окне подтверждения:
