8 советов по созданию тёмной темы интерфейса

Тёмный режим, также называемый тёмной темой — стал довольно популярным трендом в дизайне интерфейсов. Преимущественно он используется в условиях низкой освещённости и поэтому включает приглушённые тона или оттенки серого. В этой подборке рассмотрим лучшие советы по созданию тёмной темы.


1. Затемняйте белый текст на черном фоне для удобства чтения

Белый текст на черном фоне слишком напрягает глаза. Всегда слегка затемняйте текст, чтобы снизить контраст.


2. Используйте цвета бренда в оттенках

Чтобы ваш дизайн смотрелся интересней, добавьте основные цвета вашего бренда в оттенки тёмной темы.


3. Используйте приглушённые цвета

Избегайте слишком насыщенные, яркие тона в тёмной теме. На тёмном фоне они создают эффект “дрожания”.  Всегда слегка приглушайте варианты основных цветов для снижения нагрузки на глаза ваших пользователей.


4. Передайте глубину

Используйте цветовую шкалу от более светлых цветов к более тёмным, чтобы придать интерфейсу глубину. Чем светлее объект, тем он выше в визуальной иерархии. 


5. Следите за контрастом

Тёмный режим, как и светлый, должен соответствовать требованиям WCAG, чтобы обеспечить читабельность текста при достаточном контрасте. 

Несколько плагинов, которые помогут проверить коэффициент контрастности:

- Stark 

- Contrast 

- A11y 


6. Конвертируйте все цвета из светлой темы в тёмную

Начинайте дизайн со светлой темы и переводите её в тёмную версию. Не удаляйте цвета ради тёмной темы, чтобы не запутать пользователей.

Плагины, которые помогут при конвертации темы: 

- Appearance 

- Dark mode magic

- Camilo  


7. Используйте полупрозрачность для создания оттенков

Используйте набор базовых цветов с одинаковыми значениями прозрачности. Вместо того чтобы постоянно подбирать различные оттенки серого, используйте полупрозрачные тона для создания оттенков. Так вам будет проще перевести ваш дизайн в темный режим.


8. Не злоупотребляйте тёмным  режимом

Не всегда стоит следовать тренду, и переводить интерфейс в темный режим. Темный режим может быть хорош, чтобы помочь сосредоточиться на задаче. Но иногда он может быть неуместен. Если нужно привлечь внимание пользователя – светлая тема всегда лучший выбор. Так, в сочетании с темным фоном светлые объекты мгновенно переключает внимание пользователя. Например, заголовок призыва к действию, кнопка или форма на веб-странице.

Оригинальный материал buninux

Вам интересны такие статьи?

👍 – Да, очень полезно.

👎 – Нет, мне такое неинтересно.

Психология в UX – Выборочное игнорирование

Обработка визуальной информации – процесс энергозатратный, требующий большой концентрации. При этом наш разум делает все возможное для сохранения энергии, отсекая всё ненужное. Поэтому в работе с интерфейсом, люди сосредотачиваются на том участке экрана, который, как они предполагают, содержит ответ на их проблему. 

Наиболее очевидным примером выборочного игнорирования является баннерная реклама. Посетители сайтов настолько к ней привыкли, что чаще всего просто не обращают на неё внимания. Более того, выборочному игнорированию подвергается и все, что посетителю в данный момент неинтересно или это не решает его задачи. 

Пример на картинке под постом: На варианте слева большинство пользователей скорей всего не заметят сообщение о распродаже т.к. будут слишком увлечены поиском товара. На варианте справа надпись ярко выделена, повышая вероятность, что посетители обратят на неё внимание.

Почему это важно знать

Пользователь будет игнорировать все, что не касается его текущей задачи. Важные элементы интерфейса должны быть релевантными и легко заметными. Используйте размер, цвет и контраст, чтобы привлечь внимание пользователя к таким элементам.

Фичеризм в дизайне – как загубить хороший продукт

Главное преимущество успешных продуктов – они решают задачу пользователя существенно эффективнее известных альтернатив. Но со временем можно увидеть следующую картину: продуктовые команды начинают внедрять все больше функций, даже если они не несут дополнительной ценности для клиентов. С увеличением функционала новым пользователям становится сложнее обучаться, а текущим — выполнять ключевые задачи. Кроме того раздутый функционал вынуждает привлекать дополнительные ресурсы для поддержки и разработки новых функций. В результате – страдает пользовательский опыт, падает производительность продукта не принося ощутимых выгод для бизнеса.

Чтобы не попасть в эту ловушку, важно учитывать следующие правила:

1. Следовать KISS принципу при разработке продукта
Простота должна быть ключевой целью в дизайне.

2. Углублять функционал вместо его расширения
Фокусироваться на постоянном улучшении ключевых задач, а не предлагать пользователям новые фичи.

3. Приоритизировать функции в зависимости от ценности
Внедряя новые функции всегда задавайтесь вопросом: какую ценность они имеют для бизнеса? Как они повлияют на решение проблемы пользователей? Постоянные исследования и обратная связь от клиентов всегда надежнее чем следование трендам.

4. Проводить А/Б-тесты, для оценки эффективности новых функций
В качестве эксперимента можете отключать функционал для части пользователей и смотреть на их реакцию.

5. Пересматривать имеющийся функционал и вырезать лишние фичи
Если исследования показывают, что новые функции ухудшают опыт подавляющего большинства пользователей, то стоит безжалостно избавиться от них, даже если на их разработку были потрачены немалые ресурсы.


В заключение

Не всегда упрощение продукта ведет к лучшему результату. Следуя закону Теслера для любой системы существует определённый набор базовых функций, который нельзя сократить. Например, упрощение интерфейса пассажирского самолета может существенно сказаться на способности им управлять.

Важно, чтобы сервис был построен вокруг одной ключевой идеи, а не набора разрозненных свойств и был целостным в понимании пользователей.

Как продать исследования, метрики клиентского опыта, фичеризм в дизайне...

Дайджест статей за неделю:

Как продать исследования заказчику

Метрики клиентского опыта – Customer Effort Score

8 советов по созданию тёмной темы интерфейса

Психология в UX – Выборочное игнорирование

Фичеризм в дизайне – как загубить хороший продукт

Если были полезные статьи, дайте знать в реакциях!

Как написать резюме, чтобы попасть на собеседование?


Для начала, разберем зачем оно вообще надо, если у вас уже есть портфолио. 
Портфолио крайне важно, без вопросов! Но перед тем как дойти до ваших работ, работодатель должен сперва понять, что вы именно тот, кого он ищет. Резюме ответит на такие вопросы как: 

- Кто вы? Какой ваш бэкграунд?

- Соответствие квалификации

- Какой опыт и какие задачи можно вам доверить

- Формальное подтверждение, что вы на первый взгляд адекватны и можете связать пару слов в письменном виде


В большинстве случаев никто не будет особо вчитываться в ваше резюме. Но имейте ввиду, что если вы пройдете первые интервью и к вам присмотрятся, то перед подписанием договора ваше резюме могут изучить более пристально. В западных компаниях это частая практика.


Что писать в резюме?

Резюме должно соответствовать запросам рынка. Пройдитесь по объявлениям с вакансиями и посмотрите, какие обязанности в вашей нише чаще всего требуются. Выберите из них те, которыми вы действительно занимались, и вставьте их в своё резюме.


Сколько писать?

В зависимости от опыта работы ваше резюме должно разместиться на 1-2 страницах. Не увлекайтесь написанием мемуаров или автобиографии. Пишите коротко, ясно и по делу.


Как писать?

После коротенького вступления, переходите сразу к кейсам. Ведь именно кейсы ключевое, что хочет увидеть работодатель. Структура кейса:

1) Даты

2) Проект или компания

3) Ваша роль

4) Результат и показатели, которые были достигнуты

Если кейсы можно подкрепить числами, то это только добавит весомости.
Навыки, софт-скилы и увлечения можно разместить в самом конце резюме.


Как оформлять?

Не стоит оригинальничать с украшательствами, создавать чумовые лейауты или ставить звездочки к навыкам владения программами. Ваше резюме в первую очередь для HR, там вряд ли оценят весь ваш креатив. Достаточно, чтобы ваше резюме было аккуратным и легко читаемым. Лучше упаковать его в PDF, так его проще распечатать.


В заключение

Не менее важно и написание сопроводительного письма. Это именно то, что увидят в первую очередь. Если в сообщении писать: “Привет, я Иван из Питера, в приложении мое резюме, вот ссылка на портфолио” То до резюме скорей всего дело даже не дойдет.

Про то, как писать сопроводительное письмо, напишу в другой раз если вам интересно.

Основы проектирования – Атомарный дизайн (Atomic design)

Атомарный дизайн – на сегодняшний день наиболее популярная методология проектирования пользовательских интерфейсов.

Впервые методологию предложил Бред Фрост, описав её в книге Atomic Design.
Ключевая идея – разделение интерфейса на минимальные компоненты, которые можно легко комбинировать друг с другом. Это позволяет дизайнеру эффективнее работать, последовательно разрабатывая каждый элемент от меньшего к большему. Если UI-Kit представляет собой набор готовых стилизованых элементов интерфейса, то атомарный дизайн подразумевает методологию их логической компоновки.


В Atomic Design элементы интерфейса разделены на 5 уровней:

1. Атомы – это минимальные элементы, такие как кнопки, иконки или надписи

2. Молекулы – это комбинация атомов, формирующие простейшие компоненты UI, такие как поле поиска или меню.

3. Организмы – комбинация молекул, которые создают более сложные структуры, такие как хедер, футер, список или таблица.

4. Шаблоны – схема страницы состоящая из готовых компонентов. Тут можно провести аналогию с вайрфреймом, где у нас есть абстракная структура (шапка, навигация, блоки для текста), но еще нет конечного контента.

5. Страницы – конкретные экземпляры шаблонов, наполненные контентом и демонстрирующие эффективность дизайн-системы.


Почему атомарный дизайн

Главное преимущество атомарного дизайна – последовательный и системный подход к проектированию интерфейсов. Не зависимо от того – хотите вы разработать дизайн-систему или просто макет для лендинга, он позволяет эффективно создавать компоненты, которые можно быстро адаптировать под любые нужды проекта.

Как вам инструмент? Дайте знать в реакциях:
❤️ – буду применять
🤓 – уже использую
😐 – мне это не интересно

Чеклист для создания идеальной CTA-кнопки

Кнопка призыва к действию (Call-To-Action Button) – важнейший элемент любого продающего сайта. Её задача, привлечь внимание и подвести пользователя к конверсии. Рассмотрим основные принципы создания конвертирующей кнопки.


1. Внешний вид
Ваша кнопка должна четко передавать свое предназначение. Не ссылка, не круглая штуковина со стрелкой, а именно прямоугольная кнопка с четким аффордансом.
Также стоит уделить особое внимание ховер-эффекту, достаточному внутреннему и внешнему пространству, все это – оказывает влияние на конверсию.


2. Цвет
Ряд исследований показывает, что важен не столько цвет, сколько контраст яркости кнопки по отношению к заднему фону страницы. Ваша CTA-кнопка должна четко выделятьтся среди других элементов страницы.

Как проверить контраст?
Если обесцветить страницу, и кнопка всё равно будет хорошо видна, значит, яркостный контраст подобран правильно


3. Контекст
Важно чтобы CTA-кнопка логично встраивалась в воронку продаж. Как это выглядит на типичном лендинге? Кнопка размещена в блоке ценностного предложения, описывающего выгоду продукта. Его основные элементы:

- Заголовок (привлекает внимание ЦА / описывает ценность предложения)
- Подзаголовок (может включать целевой посыл или социальное доказательство)
- CTA-кнопка (желание / призыв к действию)

Пример:
Начни онлайн изучение делового английского
Наш курс прошли уже более 2.000 участников
Записаться на пробный урок

При этом призыв может использоваться как на первом так и на последнем экране в конце страницы.

4. Призыв
Призыв к действию оказывает существенное влияние на конверсию. Он должен четко описывать, что именно пользователь получит.
Существуют разные способы подачи в зависимости от особенностей продукта. Вот некоторые из них:

Вызывать доверие
Устраняет сомнения, подчеркивая отсутствие риска или обязательств для пользовоталя.
Примеры: “Зарегистрироваться бесплатно”, “Попробовать”, “Узнать стоимость”.

Персонализация
По статистике персонализированный CTA конвертирует на 42% больше пользователей, чем нейтральный призыв. Примеры: “Хочу купить”, “Хочу получить бонусы”, "Хочу записаться на прием"

Эксклюзивность
Подчеркивает уникальность предложения для пользователя
Пример: “Стать экспертом”, "Забронировать мое место"

Срочность
Довольно избитый, но в некоторых случаях действенный прием созданиющий срочность предложения.
“Купить сейчас”, "Подать заявку сегодня"

5. Тестируйте
Даже небольшие изменения в CTA могут оказать огромное влияние на конверсию. Поэтому важно тестировать разные варианты на целевой аудитории. Запустите А/Б тест и проверяйте только одну гипотезу: например, цвет или расположение. Таким образои проще понять какое изменение повлияло на результат.

Пример теста, где изменение цвета увеличело конверсию на 20%

На этом все! Если было полезно, дайте знать в реакциях.

Эмоциональный дизайн – как взрастить любовь к продукту

В процессе проектирования интерфейсов мы часто концентрируется на функциональности и юзабилити. При этом забывая, что пользовательский опыт – это и эмоции. Одно дело сделать интерфейс удобным, другое – создать продукт, который пользователи полюбят и с восторгом будут рассказывать о нем другим людям. Для этого важно понимать, как эмоции влияют на связь с продуктом.

В своей книге «Эмоциональный дизайн» Дон Норман, рассматривает формирование пользовательской привязанности к продукту в виде 4 ступенчатой модели:

1.Желание обладать

Прежде всего пользователь должен захотеть обладать продуктом. Основным инструментом для достижения этой цели выступает маркетинг – воронка продаж, например по модели АИДА, показывающая выгоду от продукта.


2. Польза

Далее пользователь должен оценить ценность продукта начав им пользоваться. Главная ошибка многих компаний – они не идут дальше этой ступени. Продукт “продан” – можно подсчитывать прибыль. При этом для пользователя это только начало пути. Если ценность достаточно высока, он продолжит использовать продукт дальше.


3. Убедительность

Если в процессе пользования продуктом развеиваются последние сомнения – то у пользователя укрепится доверие. Это основа для создания более тесной связи с продуктом. Всё прямо как в отношениях!


4. Эмоции

Если на протяжении всех этапов пользователь переживал устойчивый позитивный опыт, то есть все шансы, что он перерастет в восторг и в конечном итоге в любовь к продукту.


Норман также выделяет три основных составляющих эмоционального дизайна без которых невозможно сформировать крепкую связь с продуктом: висцеральный дизайн, поведенческий дизайн и рефлексивный дизайн. О них напишу в другой раз если вам интересно.

Резюме, атомарный дизайн, CTA-кнопки...

Дайджест постов за эту неделю:

Как написать резюме, чтобы попасть на собеседование?

Основы проектирования – Атомарный дизайн (Atomic design)

Чеклист для создания идеальной CTA-кнопки

Эмоциональный дизайн – как взрастить любовь к продукту

Если было полезно, жмакайте по реакциям!

Как написать сопроводительное письмо к резюме

Продолжая пост про написание резюме разберем, что такое сопроводительное письмо и как его правильно составить. Погнали...

Весь процесс найма можно рассматривать как воронку продаж, где вы “продаете” себя как специалиста. При этом сопроводительное письмо – это первая ступень. Суть в том, чтобы привлечь внимание рекрутера к себе. Хорошее письмо поможет выделиться, особенно если в вашей сфере высокая конкуренция.

Сопроводительное письмо необходимо приложить в отклике на вакансию и пояснить чем вы подходите на должность и какую пользу можете принести компании.

Итак, какие формальные требования к сопроводительному письму?

Размер
У рекрутера нет времени читать всю вашу предысторию, оно ему и не надо! Оптимальный размер сопроводительного письма — это 2-3 небольших абзаца. Вы должны уложится в половину страницы. 

Оформление
Сделайте ваше письмо легко читаемым! Отделяйте абзацы друг от друга пустой строкой, также вы можете пользоваться заголовками.

Стиль 
Не используйте шаблонные выражения и канцеляризмы. Например, распространенное вводное предложение звучит, примерно так: «Прошу вас рассмотреть мое резюме на позицию…». Эти шаблоны уже всех достали! Пишите понятным, человеческим языком, например: «Меня заинтересовала вакансия UX/UI-дизайнера в вашей компании».

Заголовок
Отправляя по имейл используйте чёткий и понятный заголовок. Укажите, что за вакансия и в какую компанию. Пример: Отклик на вакансию UI/UX-дизайнера в компанию «Кванта»

Структура
Разделяйте сопроводительное письмо на небольшие абзацы, чтобы работодателю было проще по нему пробежаться. Пишите понятно и последовательно.

1. Приветствие

Обращайтесь по имени, если оно указано в вакансии. Например: “Ирина, добрый день!” или просто “Добрый день!”

2. Вступление

Представьтесь и укажите, на какую должность вы откликаетесь и в какой организации. Это покажет то, что вы пишете адресно, а не массово рассылаете письма всем работодателям. Если вы отправляете свое резюме и письмо по электронной почте, укажите, как вы узнали о вакансии.

Пример:
Я Иван. Меня заинтересовала вакансия UX/UI-дизайнера, размещенная на сайте вашей компании.

3. Основная часть

Объясните, почему выбрали именно эту компанию и что именно вас привлекает в вакансии. Далее необходимо сверится с требованиями вакансии и вашим реальным опытом, коротко рассказать про мотивацию, навыки, знания, достижения. 

– Будьте честны, пишите о том опыте который у вас реально есть. При недостатке опыта расскажите как ваши знания и навыки помогут справляться с задачами на новом месте.

– Не умалчивайте длительные перерывы. Расскажите, чем занимались в это время. Например, повышали квалификацию или получали новую профессию, обустраивались на новом месте итд.

– Вместо оценки собственных результатов, лучше приводите конкретные доказательства, подкрепляя их цифрами. Например, вместо “хороший специалист” – “Увеличил продажи на 120% за полгода” Вместо “Быстро обучаюсь”, – “С нуля за месяц изучил Figma и получил сертификат уровня «Профессионал»

– Постарайтесь добавить индивидуальную ноту, вызвать эмоции! Это может быть интересный факт о вас или оригинальное хобби. Тут хватит буквально одного предложения. Дайте понять, что вы адекватный человек.

4. Заключение

В заключении должна быть ссылка на портфолио или фраза о том, что резюме прикреплено. Также не забудьте указать контактную информацию. Не помешают и ссылки на социальные сети.

Пример:
Все мои работы собраны в портфолио [ссылка]. Буду рад, если посмотрите его и дадите фидбек — подхожу вам или нет.
Буду рад пообщаться лично. Мой номер: +7 999 123-45-67

Уфф… получилась длинная портянка, но надеюсь максимум полезная! Хотел еще написать о частых ошибках, но в формат статьи не поместится. Опубликую отдельным постом. На этом все!

3 главных профессиональных навыков дизайнера

Очень интересный получился опрос на прошлой неделе. Получается, у большинства основная боль – отсутствие навыков, ну или по крайней мере ощущение, что чего-то вы не умеете.

Еще в прошлом году я написал пост про хард и софт-скиллы. Думаю пришло время разобрать наиболее важные из них. И начнем мы с софт-скиллов.

1. Эмпатия

На мой взгляд, наиболее важный навык для дизайнера. Без понимания людей, вы не сможете разрабатывать успешные решения, которые будут решать их задачи. И речь тут не о сочувствии, а об умении именно "влезть в шкуру" пользователя.

Как развивать
Думал посоветовать всяких книжек по поведенческой психологии… но это все пустая теория. Эмпатию нужно оттачивать только на практике: проводить интервью, не боятся задавать вопросы, уметь слушать и анализировать.


2. Умение общаться

Ваш успех напрямую зависит от способности взаимодействия с окружающими, умение преподнести себя и свои услуги. Как говорил мой преподаватель по рекламному делу: “успешный дизайн – это на 20% дизайн и на 80% презентация”. От вашего умения продать идею клиенту, аргументировать свою точку зрения, напрямую зависит сколько вы будете зарабатывать.


Как развивать
Существует огромное количество лайфхаков по развитию самоуверенности, социальных навыков или техники убеждения, но ничто не заменит живого общения. Просто будьте открыты к окружающим, тренируйтесь проходить через некомфортные ситуации.

– Практиковать презентацию своих работ на незнакомых людях можно, например через сервис presentum.io

– Полезная книга по теме: «Сначала скажите «нет». Секреты профессиональных переговорщиков» Джима Кэмпа.


3. Самодисциплина

Умение планировать и отвечать за себя и свои поступки один из базовых навыков любого дизайнера – особенно если вы хотите развиваться карьерно, брать на себя ответственность и принимать решения. Этот навык особенно важен если вы решитесь строить свой бизнес или заниматься фрилансом. Чем выше ваша эффективность, тем вероятнее, что вы достигните успеха в любом деле.

Как развивать
Самодисциплина – это в первую очередь умение управлять своим временем. Есть ряд техник по повышению продуктивности, как например фокусировка внимания, метод помидора, метод “съешь лягушку”, метод 90/30 и другие о которых я писал ранее… суть в том, чтобы выработать в себе привычку эффективного поведения.

На этом все! Стоит написать про хард-скилы?

Психология в дизайне – Теория двойного кодирования

Одна из основных задач дизайнера – уметь правильно донести смыслы. Это касается как визуальной, так и вербальной части. В дизайне они всегда взаимосвязаны. 

Теория двойного кодирования, предложенная канадским психологом Алланом Паивио подразумевает, что невербальные (образные) и вербальные (текстовые) сигналы имеют равный вес, несмотря на то, что обрабатывается по-разному в нашем сознании. 

Если взять любое слово, например “помидор”, то оно сформируют у вас в голове четкие ассоциации-картинки. Из этого следует, что одновременное использование визуальных и словесных данных позволяет быстрее обрабатывать и усваивать информацию.


Как применить двойное кодирование в работе

– Используйте реальный контент в ваших макетах, вместо текста-заклушки

– Помните, что сочетание картинки и текста проще усваивается и запоминается, это важно для продающих или обучающих сайтов

– Иконки в меню воспринимаются лучше, если они подписаны

– Обсуждая проект, делайте эскизы ваших идей с помошью (виртуального) вайтборда. Так всем участникам будет проще понять и запечатлеть их в памяти.


Было полезно? Дайте знать в реакциях!

Метод архетипов в дизайне

Архетипы — это превосходный инструмент для создания понятного визуального образа для брендов предавая им индивидуальность и яркие выразительные черты. 

В начале 20 века швейцарский психоаналитик Карл Густав Юнг выделил образы и мотивы, имеющие универсальное, коллективное прочтение. Эти образы сформировались на протяжении многих столетий на основе мифов и сказаний и являются частью коллективного подсознательного. Именно в этом их преимущество – они интуитивно понятны и прекрасно встраиваются в любой нарратив.


Как применять в дизайне

Встраивая архетипы в дизайн, можно создать понятные черты бренда, выстроить целостную стратегию коммуникации с целевой аудиторией. Таким образом, определенный архетип выступает в роли компаса при проектировании визуального решения.

Ключ к успеху — глубокое понимание каждого архетипа. Подробнее о каждом образе можно почитать в статье от команды агентства LINII. Тут собраны 12 базовых архетипов активно применяемых в маркетинге и рекламе. Для каждого выделены характерный визуальный стиль, графика, цвета и типографика. В общем идеальное руководство для применения в собственных проектах.

Для более глубокого ознакомления рекомендую книги: 

 “Герой и Бунтарь. Создание бренда с помощью архетипа” Маргарет Марк, Кэрол Пирсон

“Архетипы в брендинге. Руководство для креативщиков и стратегов” Margaret Hartwell, Joshua C. Chen