Чек-лист работы над визуальным дизайном в Фигме
В этой статье я решила закрепить базовые, но судя из практики, часто игнорируемые правила создания визуального дизайна. Ниже представлен текст в форме “чек-листа”, чтобы вы могли пробежаться по нему и убедиться, что все правила учтены в финальном варианте вашего дизайна. Заботьтесь о ваших пользователях :) Также, вы найдете тут пару фишек для работы со стилями.
✅ Измерения должны быть математически связаны и систематизированы
Расстояние используемое между элементами, а также сам размер элементов должны определяться определенным масштабом (еще лучше — используя четные цифры). Это поможет дизайну выглядеть цельным и аккуратным. На примере снизу, каждый элемент использует число кратное 8 px. Такая система упрощает работу с размерами отступов, картинок, иконок и других элементов.
✅ Сохраняйте размер основного текста 16 px или больше
Базовое правило — использование 16 px для размера основного текста, поскольку он является стандартным в большинстве браузеров. Однако, следует учитывать вашу целевую аудиторию и приоритетность текста. К примеру, если у вас на странице большой объем текста (статья, описание и т.д.), следует использовать шрифт не менее 18 px. Чем больше размер текста, тем легче и удобнее его читать. А если ваша целевая аудитория предусматривает пользователей старше 40 лет или категорию с нарушениями зрения (клиники, финансовые порталы, образовательные платформы или мероприятия для старшей аудитории, государственные и социальные услуги т.д) — минимум 20 px. Повторюсь, позаботьтесь о ваших пользователях!
✅ Используйте высокий контраст для важных элементов и снижайте насыщенность для текста
Важными элементами являются кнопки, заголовки, навигация или любой другой контент, на который пользователь должен обратить внимание в первую очередь. Высокий контраст сверхполезен: он обеспечивает гарантию того, что необходимый элемент точно привлечет внимание. Элементы, которые пользователю не следует замечать (например, структурные элементы, тени), соответственно, должны быть менее контрастны.
По возможности избегайте использования чисто чёрного или чисто белого цвета, так как высокая яркость будет травмировать зрение. Выберете меньшую насыщенность или слегка разбавьте другим цветом (если ваш сайт в холодных оттенках, то более холодным синим и наоборот).
Помните, лучше не использовать белый цвет для фона кнопки, если она не выбрана. Это будет сбивать с толку пользователя и негативно сказываться на конверсии.
✅ Элементы должны идти в порядке визуального веса
Если у вас есть серия элементов в строке или столбце и некоторые из них визуально тяжелее других (например, две кнопки и ссылка), вы должны расположить их по убыванию. Cамый тяжелый элемент идет первым, а наименее — последним. Но заметьте, визуально тяжелый элемент всегда ближе к внешнему краю. А элементы эквивалентные друг другу, смотрятся более гармонично рядом.
Не забывайте и о целях кнопки, самая важная по смыслу будет являться самой тяжелой.
✅ Простое на сложном или сложное на простом
Сложный фон (например, красочная градиентная заливка) будет лучше работать, если передний план (например, текст) прост. А сложный элемент переднего плана лучше всего расположить на простом фоне. Иначе ваш дизайн будет выглядеть перегруженным и неаккуратным, а следовательно — пользователю сложнее считать смыслы. Если возникают сложности, можно сделать выбор в пользу простое на простом и не прогадать.
✅ Изображения, как стили
Знаете ли вы, что можно создать стиль из своего изображения, а затем опубликовать его в своей командной библиотеке? Это работает также, как и со стилями текста и цвета.
Как добавить изображение в стили:
- Добавьте на макет любое изображение и выделите его.
- Перейдите в пункт Fill («Заливка») и нажмите на иконку Style
- В появившемся меню нажмите на плюсик.
- Назовите стиль и сохраните.
- Чтобы использовать стиль, в пункте Fill нажмите на иконку из кружков и выберите нужный шаблон. Стиль можно выбрать и для обводки в пункте Stroke (он находится под Fill).
✅ Слои заливки и режимы наложения
Я не буду вдаваться в подробности всех режимов наложения, но объясню, как полезно добавить несколько слоев заливки.
Допустим, вы хотите, чтобы ваше изображение было черно-белым. Один из способов сделать это — настроить ползунок насыщенности под настройками заливки. Однако, если вам когда-нибудь понадобится заменить это изображение на другое, вам придется повторно применить этот параметр насыщенности. Здесь пригодятся слои заливки и режимы наложения.
Добавив сплошную заливку, установив цвет на черный или белый, а затем изменив режим наложения на color, вы получите черно-белые изображения с более точным контролем.
✅ Копирование слоев заливки
Одна хитрость, которую я обнаружила в Figma и которая сэкономила мне массу времени, заключается в том, что вы можете копировать и вставлять слои заливки (это также относится и к слоям Stroke и Effect). Продолжая приведенный выше пример, это позволяет быстро взять этот черно-белый заливочный слой и применить его к дополнительным изображениям с помощью сочетания клавиш command+c и command+v.
✅ Используйте размытие тени вдвое больше значения расстояния
Например, если вы создаете тень на 4 px по оси Y, используйте значение размытия 8 px. Когда элемент становится “ближе” к зрителю, целесообразно уменьшить непрозрачность тени. Это выглядит хорошо, поскольку естественно: когда мы приближаемся к источнику света, его тени становятся более размытыми.
✅ Оптическое выравнивание часто лучше, чем математическое
Ваше программное обеспечение для проектирования может выравнивать сущности математически. Но некоторые фигуры не подходят для такового типа выравнивания. Например, фигуры с рваным краем имеют визуальный центр отличающийся от их математического центра. Чтобы выравнивать сущности на глаз, нужна определенная практика, но если вы будете делать это регулярно, быстро поймете, как это работает.
✅ Меньший интервал между буквами и высота строк для большего текста. Больший интервал и высота для меньшего
Это касается всего текста. Чем больше текст, тем меньше места необходимо между каждой буквой и каждой строкой. Справедливо и обратно. Если вы этого не сделаете, большой текст может выглядеть распластанным, а мелкий текст будет выглядеть слипшимся.
✅ Не располагайте два жестких разделителя рядом
Фоновые переходы, оформления краев контейнеров и разделительных линий с насыщенными цветами способствует созданию жестких разделений. Два или более таких разделителя не должны находиться рядом, потому что создают визуальный беспорядок и привлекают лишнее внимание. Даже чередование блоков одним за другим на странице лучше избегать, это перегружает и создает впечатление слабого дизайна.
То же касается и таблиц. Большая масса данных тяжела для восприятия сама по себе, но в устаревших вариациях дизайна, по аналогии с печатной продукцией ее еще больше усугубляли разделителями черного цвета. Сейчас же есть возможность избегать перегруженности. Откажитесь от вертикальных границ и сетки, если строк не больше 6-ти, то и от горизонтальных, так как они создают слишком много визуального шума. Их использование целесообразно при проектировании больших технических таблиц, которые в большинстве случаев не используется на коммерческих сайтах.
Вы можете и вовсе отказаться от идеи создания сравнительной таблицы, если вам нужно представить не данные, а информацию (услуги/продукты и т.д.). В этом случае лучше отдать предпочтение карточной системе.
✅ Ближайшие элементы должны быть светлее
Когда элементы на экране приближаются к пользователю, они становятся светлее. Это касается как светлого, так и темного режима пользовательского интерфейса, поскольку это соответствует тому, как работает реальный мир.
✅ Сделайте внешние отступы такими же или больше, чем внутренние
Внутренние отступы контейнерах — это пространство между элементами внутри такого контейнера. Внешние отступы — это пространство между элементами и краями контейнера. Внешние отступы должны быть такими же или больше, чем внутренние отступы. А более связанные элементы должны быть ближе друг к другу и образовывать группу, так как элементы внутри контейнера больше связаны между собой, чем с самим контейнером и легко считываются как взаимосвязанные.
✅ Аккуратные углы
Если вы хотите, чтобы углы в вашем дизайне выглядели правильно и естественно, используйте формулу: радиус внутреннего угла на радиус наружного угла минус расстояние между ними. На примере снизу, внешний радиус равен 30 px, а промежуток составляет 20 px, поэтому радиус внутреннего угла равен 10 px.
✅ Используйте строку длинной около 70 символов (или 600–700 px)
Не важно, сколько будет составлять длина вашей строки, 60 или 80 символов, но слишком перешагнув границу с обеих сторон, это может привести к проблемам читабельности. Если строка слишком короткая, взгляд пользователя будет часто перескакивать и уставать. Если строка слишком длинная, пользователю будет трудно найти начало следующей строки и в конце концов он вовсе ничего не прочтет.
✅ Сделайте горизонтальные отступы вдвое больше вертикальных
Если вы хотите, чтобы пользователи распознали элемент как кнопку, целесообразно следовать шаблону. В следующем примере отступ над и под меткой составляет 30 px, а отступ слева и справа — 60 px.
✅ Если вы используете горизонтальную сетку, используйте 12 столбцов
Дискуссии о том, какую сетку использовать или использовать ее вообще, стары как мир и до сих пор вызывают бурную реакцию сторонников одного из методов. Будем говорить так, если у вас за плечами нет нескольких лет практики или вы просто хотите чтобы ваш дизайн выглядел организованно и аккуратно, проще выбрать 12 колоночную и не ошибиться. С ней проще работать, 12 столбцов можно разбить на 1 столбец, 2 столбца, 3 столбца и 4 столбца, что очень удобно и гибко. Меньше ошибок, больше вариативности.
