12 рекомендаций, которые помогут сделать твой дизайн более удобным и эффективным. Используй его при старте проекта и при завершении, для проверки. И все будет красиво.
Принятие дизайнерских решений может оказаться сложной задачей. Но есть очень простые решения, которые не требуют применения специальных знаний – нужно только следовать правилам и сразу все станет немного проще.
Система логических правил помогает принимать дизайнерские решения не интуитивно, а обоснованно. Это не только помогает сделать дизайн удачным, но и упрощает работу. Тут не требуется вдохновение, просто делай. Не переставляй элементы с места на место без цели, просто делай.
Это чек-лист, который тебе в этом поможет.
1. Делай группировку блоков
Изначально при построении структуры важно разбить информацию на логичные части и объединить ее в блоки. В первую очередь – правильная последовательность. Мысль должна раскрываться понятно и постепенно.
Ты разбиваешь информацию на мелкие группы, которые объединяешь в блоки с общим дизайном. Это поможет красиво и эффективно структурировать и организовать интерфейс. Следовательно, посетитель лучше воспринимает данные и проходит по воронке плавно и так, как задумано. Вот способы группировать связанные элементы:
- Сделать общий контейнер
- Расположить близко, с отступом от других блоков
- Объединить элементы общим дизайном
- Сделать выравнивание элементов по непрерывной линии
Контейнер – самое простое и популярное решение, но стоит отталкиваться от типа контента и применять разные варианты группировки, если это поможет упростить дизайн.
Используй иконки. Если можно сделать перечисление не текстом, а иконками – это отлично. Если можно однотипные элементы объединить в блок с иконками, то сделай это. У нас была большая статья об этом, а еще там есть ссылки на 10 бесплатных ресурсов с классными наборами иконок.
2. Выстраивай четкую визуальную иерархию
Кроме группировки информации важно определить, что более важно, а что менее. И нужно выделять ключевые элементы так, чтобы их нельзя было пропустить. Это поможет посетителю при беглом просмотре страницы/презентации/баннера выделить конкретику. И только при необходимости узнать подробности он может углубляться в изучение элементов, которые в иерархии стоят ниже.
Это также обеспечивает эстетичность дизайна – выделяя основные и второстепенные детали гораздо легче строить композицию и применять палитры. Для построения иерархии применяются разные инструменты, но в первую очередь это размер, цвет, контраст, отступы и расположение.
Как понять, что все сделано правильно? Прищурь глаза или размой изображение. В таком виде важные элементы выделяются, а второстепенные размыты или их почти не видно. Если за “первенство” в таком случае ведут борьбу несколько деталей – упрощай, переделывай.
3. Придерживайся группировки стилей
Схожие и однотипные элементы должны выглядеть и работать одинаково. При этом важно соблюдать это правило не только в рамках своего проекта, но и относительно общепринятых стандартов UX/UI. То есть обеспечь предсказуемость. Особенно в вопросах проектирования навигации и функциональных элементов. Человек не должен постоянно изучать работу элемента – если это кнопка, то уже ясно, что с ней делать. Если это нестандартная фишка, то в первый раз посетитель с ней разбирается, а во второй – уже понимает принцип, а не заново пытается вникнуть в суть.
Важна последовательность стилизации. Например, пустые иконки некликабельны, а залитые – ведут на другую страницу или показывают подсказку при наведении. И только так в рамках проекта, без творческих отступлений.
И наоборот, следи, чтобы элементы с разной функциональностью выглядели по-разному.
4. Цвет – это инструмент, а не украшение
Используй цвет целенаправленно. Определи основную палитру из нескольких основных/дополнительных/контрастных цветов в зависимости от направления проекта и позиционирования бренда. Если есть брендбук, то это облегчает задачу.
Но наличие палитры не означает, что цвет нужен везде. Начни с монохромного дизайна и добавляй цвет сначала в основных элементах в иерархии, потом лишь там, где он необходим. Фирменный основной цвет чаще всего применяется на ключевых деталях – кнопках, интерактивных элементах. И только в самом конце добавляй цвета для украшения или акцента.
Цвет должен нести смысловую нагрузку, не грузи его там, где можно обойтись без лишней раскраски.
5. Проверь дизайн в ч/б
Нельзя полагаться только на цвет как на индикатор. Важно выделять важные и функциональные элементы так, чтобы даже без цвета была соблюдена вышеупомянутая иерархия. У человека, который смотрит твой проект могут быть разные сложности – от поломки дисплея до разных степеней дальтонизма. И твои старания должны помочь каждому совершить конверсионное действие, хоть процент таких случаев и не очень высокий.
Например, если ты выделяешь ссылки синим, то там не зря в стандартном варианте придумали еще подчеркивание. Оно выделяет ссылку даже без цвета. Хорошо, если во всех кликабельных элементах предусмотрен какой-то минимальный ховер-эффект, это не только стильно, но и практично. Про варианты исполнения и применения ховер-эффектов читай в отдельном материале.
6. Проверь контрастность
Контрастность может иметь показатель от 1 к 1 до 21 к 1. Черный шрифт на черном фоне – 1 к 1. А белый шрифт на черном – 21 к 1. Сейчас принятым стандартом считается использование контраста на сайтах с показателем 3 к 1. Это позволяет легко воспринимать текст, даже если есть нарушения зрения или восприятия. Подробно про обеспечение доступности веб-контента (WCAG) почитай в статье про инклюзивный дизайн.
Контрастность основной кнопки стоит делать не менее 3 к 1, а может, и выше. Это поможет слабовидящим пользователям легко ее распознать. Также это один из способов установить визуальную иерархию.
Контрастность стандартного мелкого текста по тем же нормам WCAG 2.1 должна составлять не менее 4,5 к 1. А крупные и жирные заголовки можно оставлять, как и кнопки, с показателем от 3 к 1.
Проверку цветового контраста и восприятия цвета можно сделать любым бесплатным онлайн-инструментом, их масса, просто загугли и выбери удобный для себя. Как корректировать контрастность? Не обязательно менять оттенок элемента, достаточно добавить/снять тени или градиентные наложения.
7. Избегай чисто черного текста
Слишком высокая контрастность вызывает усталость глаз и смотрится грубо, хотя это не всегда очевидно. В дизайне пользовательского интерфейса, как правило, лучше избегать чисто черного цвета, поскольку он очень контрастен по отношению к белому. Такой высокий контраст может вызвать напряжение и усталость глаз при чтении текста.
Темно-серый читается гораздо легче, используй его оттенки для разных вариантов контента.
8. Избавь людей от капса
Если тебе нужно что-то выделить – используй крупный полужирный шрифт, делай отступы, применяй основной цвет и прочие доступные способы проявить иерархию. Дизайн плох, если нельзя что-то показать без капса. И старайся не использовать его без крайней необходимости, потому что он УРОДСКИЙ И ТРУДНОЧИТАЕМЫЙ. Выглядит, будто на читателя кричат. И если именно этого эффекта ты добиваешься, тогда ладно.
9. Проверь выравнивание текста
Если твоя целевая аудитория Европа/Америка – выравнивай текст по левому краю. Если Азия/Арабский мир – выравнивай по правому. Учитывай паттерны чтения. Это касается текстовых блоков.
Заголовки, подписи и короткий текст можно выравнивать по центру. Но избегай этого, если есть больше, чем несколько строк. Получится, что начальная точка каждой строки постоянно меняется, это неудобно и нагружает глаза.
10. Проверь отступы и интервалы
Нужно говорить, что во всех однотипных элементах они должны быть одинаковыми? К тому же, для стандартного текста рекомендуется использовать полуторный интервал, чтобы он был удобным для чтения.
11. Что там по шрифтам?
Если ты еще не гуру типографики, то используй в проекте шрифты без засечек, поверь, это будет смотреться нормально в любой ситуации. Шрифты без засечек обычно наиболее разборчивы, нейтральны и просты.
Выбирай шрифты с более высокими строчными буквами и большим расстоянием между символами. Они лучше читаются при малых размерах.
Зачастую в рамках одного шрифта есть множество вариантов начертания. И если ты выбираешь для проекта один или пару шрифтов, то это не означает, что можно использовать все вариации шрифта. Разный вес символов привносит визуальный шум. А еще тебе будет сложнее отслеживать однотипность стилей равноправных элементов. Сохраняй простоту и лаконичность дизайна. Для этого используй только обычные и жирные шрифты.
Бери полужирный шрифт для заголовков, чтобы подчеркнуть их. А для остального текста используй обычное начертание.
12. Убери лишнее
Ненужные дополнительные стили, мишура и избыток анимации только мешают. Они увеличивают когнитивную нагрузку и отвлекают от важного. Да и смотрится это обычно плохо и безвкусно. Тебе важно сделать простой и сфокусированный интерфейс без визуальной сложности.
И еще: проверяй целостность
Сверяйся с этим списком в начале проекта и при его завершении. Но всегда помни про особенности проекта, его цели и требования.
В значительной степени дизайн интерфейсов состоит из логических правил, но если ты сделал все четко, но результат не очень – вноси правки смело. Все же доля творчества тоже должна присутствовать, иначе нас давно уже заменил бы искусственный интеллект и однотипные конструкторы.
Если хочешь чувствовать дизайн, а не просто понимать его правила – нужно тренироваться. Именно поэтому в нашем обучении делается упор на практику. И наши выпускники показывают крутые результаты еще в процессе прохождения курса. Хочешь быть профессионалом? Тогда ждем тебя на онлайн-курсе «UX/UI легенда».