Не изобретайте велосипед: десять проверенных хитростей для дизайнеров интерфейсов
Перевод статьи UX-дизайнера Мериэл Москерьолы о том, почему не стоит сильно увеличивать шрифт для создания контраста, применять несколько оттенков чёрного и как расчёты помогают подобрать цвета.
Перевод подготовлен командой онлайн-школы английского Skyeng.
Мне кажется, большинство из нас начинали заниматься дизайном пользовательских интерфейсов, не зная о нём практически ничего. Но несмотря на все трудности, с помощью различных книг и статей по дизайну мы смогли разобраться в том, как работают цвета, шрифты, вёрстка и многое другое.
В этой статье я хочу поделиться знаниями, которые приобрела, занимаясь дизайном интерфейсов, рассказать, чему научилась у других дизайнеров и какие открытия совершила сама.
Дисклеймер: мои примеры того, как не нужно делать — не обязательно абсолютно неправильные дизайн-решения. На их примере я хочу показать, как можно сделать ещё лучше. 1. Это очень важный текст, сделай шрифт ещё больше
При работе с контентом, требующим иерархии шрифтов, очень крупный заголовок, как правило, не решает проблему:
Иерархия шрифтов — это не просто сочетание крупного шрифта с мелким. Это правильная комбинация размера, визуального веса и цвета, которая создаёт контраст. А чем сильнее контраст, тем лучше. Как создать контраст
Не используйте один и тот же визуальный вес с разными размерами шрифтов, так вы не добьётесь нужной иерархии.
Вместо этого сделайте основной контент более жирным и тёмным, а второстепенный, менее важный текст — мельче и легче.
Выберите три оттенка цвета текста (от более тёмного к более светлому). Обычно я использую базовый цвет для основного текста.
Не бойтесь сильной разницы в размере шрифтов (24 px для заголовка, 16 px для основного текста, 10 px для метаданных и так далее). Чем больше эта разница — тем сильнее контраст.
Воспользуйтесь онлайн-калькулятором Modularscale, чтобы рассчитать оптимальную иерархию шрифтов.
Помните: контраст = размер + визуальный вес + цвет.
И не забудьте проверить контрастность. Например, с помощью этого калькулятора.
Взяв за основу базовый цвет, я перехожу от более тёмного оттенка заголовка к более светлым оттенкам для сопутствующего контента 2. Вам не нужно много оттенков чёрного
Не усложняйте себе жизнь большим количеством оттенков чёрного текста на белом фоне.
Черный цвет текста (#000) вызывает переутомление глаз, поэтому хорошим решением будет выбрать темную альтернативу простому черному. Но вместо того чтобы использовать несколько (три или больше) шестнадцатеричных значений цвета (HEX), можно использовать всё тот же чёрный с разной степенью прозрачности (Opacity).
В примере выше я использовала чёрный цвет как базовый и меняла прозрачность в зависимости от типа текста, в котором он используется. 3. Правильные расчёты помогут разобраться в цветах
Мало у кого из нас получается выбирать правильные цветовые комбинации. Когда мы видим дизайн, где цвета идеально сочетаются, мы задаемся вопросом «Как они вообще это сделали?»
Например, посмотрите на эту работу дизайн-студии Momo & Sprits:
Однако можно научиться понимать цвета, даже если у вас нет врождённого дара. С помощью манипуляций с HSB (Hue — тон, Saturation — насыщенность, Brightness — яркость) можно делать удивительные вещи (мы будем использовать модель HSB вместо RGB). На примере ниже показано, как можно с лёгкостью избавиться от скучного сочетания белого и цветного фона и стать настоящим Пикассо: Как можно менять параметры HSB Два подхода к пониманию цветов
Есть два способа сочетать цвета. В моём примере я использовала один и тот же базовый цвет #B9F4BC (цвет заливки круга). Вся разница — в цветах папки и полоски. Давайте проанализируем эти два способа. Первый способ
В этом варианте параметр тона остается неизменным для всех элементов. Мы меняем только насыщенность и яркость. Их значения изменились, когда мы сделали зелёный цвет папки темнее. Значение насыщенности поменялось с 24 на 40 (+16), а яркости — с 96 на 82 (-14). Это означает, что для создания правильного контраста изменение насыщенности требует обратного пропорционального изменения яркости и наоборот .
По такому же принципу мы меняем параметры цвета полоски. Взяв за основу насыщенность и яркость папки, мы меняем меняем их с 40 на 44 (+4) и с 82 на 75 (-7) соответственно. Получается формула:
Более тёмное значение — увеличение насыщенности и уменьшение яркости.
Более светлое значение — уменьшение насыщенности и увеличение яркости. Второй способ
Во втором способе мы используем тот же принцип, который был приведён выше, но меняем тон. И теперь нам понадобятся модели RGB и CMY, которым мы обычно уделяли не слишком много внимания.
RGB — аббревиатура слов Red, Green, Blue — красный, зелёный, синий. CMY (Cyan, Magenta, Yellow) — сине-зелёный, маджента и жёлтый. В начале я не придавала этим терминам особого значения, но потом поняла, как их можно использовать при создании цветовых комбинаций.
Чтобы получить более тёмный вариант базового цвета, мы должны просто передвинуть Color Picker (выбор цвета) к ближайшему RGB или в сторону CMY — для более светлого варианта. Например, так:
Для более тёмного оттенка базового цвета #B9F4BC (цвет фона в круге), который мы будем использоваться в качестве цвета для иконки папки, мы передвинем Color Picker в сторону ближайшего RGB (в этом случае — синий). Но если мы хотим сделать оттенок папки светлее, мы переместимся влево к ближайшему CMY (жёлтый).
После того как мы переместили Color Picker в сторону нужного оттенка, воспользуемся формулой из первого способа и получим такую комбинацию:
Красный, зелёный, синий (RGB) + формула из первого способа = более тёмный вариант.
Сине-зелёный, маджента, жёлтый (CMY) + формула из первого способа = более светлый вариант. 4. Используйте интервалы, чтобы визуально разделить группы
Можно разделить группы с помощью линий, но лучше и проще будет увеличить пространство между ними.
Согласно закону близости, близко расположенные друг к другу объекты воспринимаются сгруппированными вместе.
В примере выше я визуально отделила заголовок от имени автора, увеличив интервал между ними (24 px). 5. Используйте цвет, чтобы разделить строки
Создавать набор строк довольно скучно, потому что нужно просто копировать и вставлять один и тот же компонент несколько раз. А пользователю бывает сложно их читать, особенно если строки никак не разделены.
Для решения этой проблемы можно использовать обычные линии, а можно добавить цвет фона — это может оказаться гораздо удобнее для пользователя и стать более интересной задачей для дизайнера. 6. Multiply вместо Drop shadow Дизайн заголовка
Сделать хороший заголовок на разноцветном фоне довольно сложно, особенно если изображение анимировано или время от времени меняется.
Самым распространённым решением такой задачи обычно становится Drop shadow (тень), но на самом деле текст от этого не становится более читаемым. Тени добавляют шум, потому что заполняют пространство между буквами. Кто-то в таких случаях накладывает белый текст на черный фон, но мне больше нравится использовать Multiply (умножение).
Это гораздо проще, чем создавать чёрный фон поверх картинки и затем регулировать его непрозрачность. К тому же, с градацией серого цвет других частей изображения остаётся неизменным, и только та область, где расположены буквы, становится чуть темнее — такой текст легче читать. 7. Длина строк
Обычно дизайнеры растягивают строки по длине контента. Но такой текст читать неудобно, оптимальное количество символов в строке — от 45 до 65.
Если вы сделали строки короче, но у вас осталось слишком много пустого пространства справа, просто выровняйте текст по центру, это будет выглядеть лучше: 8. Не изобретайте велосипед
Правильный дизайн основывается на использовании компонентов. Не стоит делать пять новых видов карточек, десять кнопок, пять разных стилей заголовка и так далее. Прежде чем начать создавать интерфейс для определённого контента, изучите свои предыдущие работы. Возможно, вы найдёте паттерны, которые можно адаптировать и использовать снова.
Не нужно изобретать велосипед и создавать новую карточку для Art Group (пример выше), вместо этого можно взять карточку the Article и поместить туда содержимое Art Group. Это сэкономит ваше время и сделает интерфейс понятнее. 9. Используйте цвета бренда как акцентные
Обычно мы думаем, что цвета бренда должны преобладать на странице, и ломаем голову над тем, как интегрировать неоново-жёлтый, оранжевый и розовый цвета клиента в наш аккуратный и минималистичный интерфейс. Вот решение — используйте эти цвета как акцентные. 10. Правильно расположите буллеты
И последнее. Если вы создаёте дизайн списка (пример ниже), визуально отделите буллеты, глифы и цифры. Это поможет избежать помех при чтении такого списка.
Эту статью я написала, вдохновившись другим материалом на Medium.
#дизайн
Перевод подготовлен командой онлайн-школы английского Skyeng.
Мне кажется, большинство из нас начинали заниматься дизайном пользовательских интерфейсов, не зная о нём практически ничего. Но несмотря на все трудности, с помощью различных книг и статей по дизайну мы смогли разобраться в том, как работают цвета, шрифты, вёрстка и многое другое.
В этой статье я хочу поделиться знаниями, которые приобрела, занимаясь дизайном интерфейсов, рассказать, чему научилась у других дизайнеров и какие открытия совершила сама.
Дисклеймер: мои примеры того, как не нужно делать — не обязательно абсолютно неправильные дизайн-решения. На их примере я хочу показать, как можно сделать ещё лучше. 1. Это очень важный текст, сделай шрифт ещё больше
При работе с контентом, требующим иерархии шрифтов, очень крупный заголовок, как правило, не решает проблему:
Иерархия шрифтов — это не просто сочетание крупного шрифта с мелким. Это правильная комбинация размера, визуального веса и цвета, которая создаёт контраст. А чем сильнее контраст, тем лучше. Как создать контраст
Не используйте один и тот же визуальный вес с разными размерами шрифтов, так вы не добьётесь нужной иерархии.
Вместо этого сделайте основной контент более жирным и тёмным, а второстепенный, менее важный текст — мельче и легче.
Выберите три оттенка цвета текста (от более тёмного к более светлому). Обычно я использую базовый цвет для основного текста.
Не бойтесь сильной разницы в размере шрифтов (24 px для заголовка, 16 px для основного текста, 10 px для метаданных и так далее). Чем больше эта разница — тем сильнее контраст.
Воспользуйтесь онлайн-калькулятором Modularscale, чтобы рассчитать оптимальную иерархию шрифтов.
Помните: контраст = размер + визуальный вес + цвет.
И не забудьте проверить контрастность. Например, с помощью этого калькулятора.
Взяв за основу базовый цвет, я перехожу от более тёмного оттенка заголовка к более светлым оттенкам для сопутствующего контента 2. Вам не нужно много оттенков чёрного
Не усложняйте себе жизнь большим количеством оттенков чёрного текста на белом фоне.
Черный цвет текста (#000) вызывает переутомление глаз, поэтому хорошим решением будет выбрать темную альтернативу простому черному. Но вместо того чтобы использовать несколько (три или больше) шестнадцатеричных значений цвета (HEX), можно использовать всё тот же чёрный с разной степенью прозрачности (Opacity).
В примере выше я использовала чёрный цвет как базовый и меняла прозрачность в зависимости от типа текста, в котором он используется. 3. Правильные расчёты помогут разобраться в цветах
Мало у кого из нас получается выбирать правильные цветовые комбинации. Когда мы видим дизайн, где цвета идеально сочетаются, мы задаемся вопросом «Как они вообще это сделали?»
Например, посмотрите на эту работу дизайн-студии Momo & Sprits:
Однако можно научиться понимать цвета, даже если у вас нет врождённого дара. С помощью манипуляций с HSB (Hue — тон, Saturation — насыщенность, Brightness — яркость) можно делать удивительные вещи (мы будем использовать модель HSB вместо RGB). На примере ниже показано, как можно с лёгкостью избавиться от скучного сочетания белого и цветного фона и стать настоящим Пикассо: Как можно менять параметры HSB Два подхода к пониманию цветов
Есть два способа сочетать цвета. В моём примере я использовала один и тот же базовый цвет #B9F4BC (цвет заливки круга). Вся разница — в цветах папки и полоски. Давайте проанализируем эти два способа. Первый способ
В этом варианте параметр тона остается неизменным для всех элементов. Мы меняем только насыщенность и яркость. Их значения изменились, когда мы сделали зелёный цвет папки темнее. Значение насыщенности поменялось с 24 на 40 (+16), а яркости — с 96 на 82 (-14). Это означает, что для создания правильного контраста изменение насыщенности требует обратного пропорционального изменения яркости и наоборот .
По такому же принципу мы меняем параметры цвета полоски. Взяв за основу насыщенность и яркость папки, мы меняем меняем их с 40 на 44 (+4) и с 82 на 75 (-7) соответственно. Получается формула:
Более тёмное значение — увеличение насыщенности и уменьшение яркости.
Более светлое значение — уменьшение насыщенности и увеличение яркости. Второй способ
Во втором способе мы используем тот же принцип, который был приведён выше, но меняем тон. И теперь нам понадобятся модели RGB и CMY, которым мы обычно уделяли не слишком много внимания.
RGB — аббревиатура слов Red, Green, Blue — красный, зелёный, синий. CMY (Cyan, Magenta, Yellow) — сине-зелёный, маджента и жёлтый. В начале я не придавала этим терминам особого значения, но потом поняла, как их можно использовать при создании цветовых комбинаций.
Чтобы получить более тёмный вариант базового цвета, мы должны просто передвинуть Color Picker (выбор цвета) к ближайшему RGB или в сторону CMY — для более светлого варианта. Например, так:
Для более тёмного оттенка базового цвета #B9F4BC (цвет фона в круге), который мы будем использоваться в качестве цвета для иконки папки, мы передвинем Color Picker в сторону ближайшего RGB (в этом случае — синий). Но если мы хотим сделать оттенок папки светлее, мы переместимся влево к ближайшему CMY (жёлтый).
После того как мы переместили Color Picker в сторону нужного оттенка, воспользуемся формулой из первого способа и получим такую комбинацию:
Красный, зелёный, синий (RGB) + формула из первого способа = более тёмный вариант.
Сине-зелёный, маджента, жёлтый (CMY) + формула из первого способа = более светлый вариант. 4. Используйте интервалы, чтобы визуально разделить группы
Можно разделить группы с помощью линий, но лучше и проще будет увеличить пространство между ними.
Согласно закону близости, близко расположенные друг к другу объекты воспринимаются сгруппированными вместе.
В примере выше я визуально отделила заголовок от имени автора, увеличив интервал между ними (24 px). 5. Используйте цвет, чтобы разделить строки
Создавать набор строк довольно скучно, потому что нужно просто копировать и вставлять один и тот же компонент несколько раз. А пользователю бывает сложно их читать, особенно если строки никак не разделены.
Для решения этой проблемы можно использовать обычные линии, а можно добавить цвет фона — это может оказаться гораздо удобнее для пользователя и стать более интересной задачей для дизайнера. 6. Multiply вместо Drop shadow Дизайн заголовка
Сделать хороший заголовок на разноцветном фоне довольно сложно, особенно если изображение анимировано или время от времени меняется.
Самым распространённым решением такой задачи обычно становится Drop shadow (тень), но на самом деле текст от этого не становится более читаемым. Тени добавляют шум, потому что заполняют пространство между буквами. Кто-то в таких случаях накладывает белый текст на черный фон, но мне больше нравится использовать Multiply (умножение).
Это гораздо проще, чем создавать чёрный фон поверх картинки и затем регулировать его непрозрачность. К тому же, с градацией серого цвет других частей изображения остаётся неизменным, и только та область, где расположены буквы, становится чуть темнее — такой текст легче читать. 7. Длина строк
Обычно дизайнеры растягивают строки по длине контента. Но такой текст читать неудобно, оптимальное количество символов в строке — от 45 до 65.
Если вы сделали строки короче, но у вас осталось слишком много пустого пространства справа, просто выровняйте текст по центру, это будет выглядеть лучше: 8. Не изобретайте велосипед
Правильный дизайн основывается на использовании компонентов. Не стоит делать пять новых видов карточек, десять кнопок, пять разных стилей заголовка и так далее. Прежде чем начать создавать интерфейс для определённого контента, изучите свои предыдущие работы. Возможно, вы найдёте паттерны, которые можно адаптировать и использовать снова.
Не нужно изобретать велосипед и создавать новую карточку для Art Group (пример выше), вместо этого можно взять карточку the Article и поместить туда содержимое Art Group. Это сэкономит ваше время и сделает интерфейс понятнее. 9. Используйте цвета бренда как акцентные
Обычно мы думаем, что цвета бренда должны преобладать на странице, и ломаем голову над тем, как интегрировать неоново-жёлтый, оранжевый и розовый цвета клиента в наш аккуратный и минималистичный интерфейс. Вот решение — используйте эти цвета как акцентные. 10. Правильно расположите буллеты
И последнее. Если вы создаёте дизайн списка (пример ниже), визуально отделите буллеты, глифы и цифры. Это поможет избежать помех при чтении такого списка.
Эту статью я написала, вдохновившись другим материалом на Medium.
#дизайн
Ещё новости по теме:
18:20