​​Дизайнерское исследование или четкие принципы? Когда можно нарушать правила в дизайне

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

Как бы вы к этому не относились, но сотворчество с клиентом – утопический идеал совместного видения, который имеет свои недостатки. Наверняка вы очень много раз слышали слова «стратегия бренда», прежде чем столкнулись с этим на деле. Никогда еще не было так заманчиво отдать предпочтение исследованиям и консультациям как в эпоху WordPress, Drupal и, осмелюсь сказать, Wix. Вместо создания структуры принципов с нуля, почему бы не состряпать что-то из уже существующих шаблонов за долю секунды?

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

#DesignLessons

Плагин Batch Create Component превращает выбранные слои в отдельные компоненты, а не в один большой компонент.

#Figmaplugins

Почему кнопки отмены должны быть бесцветными

Что именно делает кнопка «Отмена»? Она возвращает пользователя к предыдущему экрану. Для юзеров Cancel – средство защиты от нежелательных изменений в системе. Чтобы пользователи чувствовали себя в безопасности, кнопка «Отмена» должна означать отступление к надежности, а не призыв к действию.

Вот почему кнопки «Отмена» должны быть бесцветными.

Нейтральный цвет для нейтральной кнопки
Цвет на кнопках сигнализирует о призыве к действию. Cancel – не призыв к действию, поскольку после ее нажатия в системе не происходит никаких изменений. Именно поэтому вы не должны выделять её цветом. В обратном случае вы создаете у пользователей ложное впечатление.

Юзеры на подсознании должны чувствовать, что «Отмена» – это их тихая бухта в море системных изменений.

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

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

У «Отмены» много имен
Не все кнопки отмены называются именно «Отмена» (Cancel), но принцип их действия идентичен. Возврат к предыдущему экрану может называться «Не сейчас», «Нет, спасибо», «Возможно, позже» или «Пропустить» в зависимости от контекста.

Если ваша кнопка – как бы она ни называлась – подразумевает отмену от любого действия, вы должны рассматривать ее как кнопку «Отмена». Она выполняет ту же функцию.

Чем больше кнопок на экране, тем важнее сделать понятный уход от выбора. Посмотрите на пример выше. На скрине слева вам приходится прочитать все опции, чтобы понять. Справа вам даже читать не нужно.

Достаточно тёмный серый
При использовании серого на кнопке важно сделать этот цвет достаточно тёмным. В противном случае кнопка может выглядеть как отключенная. Контраст можно легко проверить с помощью инструментов наподобие Contrast Checker.

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

Цветная кнопка «Отмена» посылает неверный сигнал. Она запутывает юзеров, вынуждая считать её ещё одним призывом к действию. Сделайте свою кнопку нейтральной, чтобы у пользователя было больше контроля и свободы при использовании вашего приложения.

#UXLesson

Один из способов сообщить пользователю о состоянии системы в UI, показать его местоположение

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

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

#UIlesson
#UXlesson

​​10 советов, которые помогут вам справиться с разработкой айдентики

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

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

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

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

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

6. Изучите конкурентов
Посмотрите, что уже было сделано до вас и постарайтесь сделать что–то другое. Учитывайте все: цвета, размеры, формы. Вспомните компанию Shell, логотип ракушки и подумайте, как вообще все это может быть связано с заправками? Тем не менее, это культовый логотип, который сложно забыть. Пример конкурентов может дать вам понять меру. Когда важно не переборщить и какое поведение не оценят пользователи? История и предыдущий опыт – лучший помощник.

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

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

9. Выделите особенности бренда
В каждом бренде есть какая–то изюминка. Иногда ее сложно заметить, но она точно есть. Постарайтесь отыскать ее и выразить в айдентике. Натуральные ингредиенты, бабушкин рецепт или секретные приправы, которые скрывают ото всех. Если вы работаете с Всемирным фондом дикой природы, то у вас есть готовая история. Защита животных, вымирающие виды и «зеленая» атмосфера – да, не у каждой компании такой мощный посыл, но он точно есть. Иначе зачем ей айдентика, если она ничем не выделяется?

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

#Identity
#Brend

Рыбалка для регистрации

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

Автор: Mari Kostrova

#DesignInspiration

​​6 способов ускорить процесс работы с медленными клиентами

Вы получили великолепный и дорогой заказ от клиента. Вы хотите поскорее приступить к работе и создать потрясающий проект… Но проходят дни, недели, а все стоит на месте. Клиент отвечает на вопросы нерегулярно и не в полной мере. Кажется, будто он увиливает от вас. Это случается. Иногда что-то заставляет клиента заняться другими делами. Но ведь у вас тоже есть потребности, а «занятый» клиент ломает расписание и убивает мотивацию.

Что делать в такой ситуации?

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

Хороший клиент не хочет, и не должен контролировать каждый ваш шаг.

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

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

Не думайте, «пока что все понятно», или «я смогу спросить позже». Используйте возможность и задайте все интересующие вопросы.

3. Сформируйте ожидания
Объясните клиенту еще в начале проекта, что вам важна обратная связь. Что это мотивирует и помогает выполнять работу быстрее. Конечно, вы не можете постоянно общаться с клиентом. Поэтому согласуйте удобное время и день, когда вы будете обсуждать детали работы. Важно, чтобы вы объяснили еще перед началом работы над проектом, чем вы занимаетесь. Например, у клиента интернет-магазин. Он хочет получить еще и продвижение в довесок к дизайну сайта. Но вы только создаете дизайны. Уточните ожидания клиента сразу. И обсудите, чем конкретно будете заниматься вы.

4. Заинтересуйте клиента в проекте
Чем больше клиент заинтересован в проекте, тем больше он захочет говорить о нем, и тем быстрее он ответит на ваши вопросы.

Самый простой способ привлечь внимание клиента к проекту – продемонстрировать отличную работу.

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

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

Вместо того чтобы клиент вдохновлял вас, вы можете вдохновить клиента!

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

«Привет! Я набросал план проекта и хотел показать вам несколько инструментов, которые я буду использовать. Например, отличная POS-система, которая поможет вашим клиентам оплачивать покупки как онлайн, так и офлайн».

Демонстрируя заинтересованность, вы можете ускорить клиентов. Они подумают: «Эй, этот человек действительно беспокоится о моем проекте. Возможно, я должен начать уделять этому больше внимания.»

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

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

#продуктивность
#советы

Психология UX: детальный разбор вездесущего Google поиска

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

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

#UX
#Google

Визуальный фидбек, подтверждающий действия пользователя

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

Важно показать, что система действительно улавливает тап/ клик.

#UX #UI
#MotionDesign

Но в некоторых случаях также важно изменить состояние самой кнопки. В таких случаях визуальный фидбек также будет сообщать результаты взаимодействия, делая его как видимым, так и понятным. Вот несколько таких случаев: Нажатие на кнопку «Нравится».

Включение / выключение чего-либо. Изменение цвета кнопки дает пользователям сигнал о текущем состоянии объекта.

Почему мы несправедливо судим других дизайнеров

Мы, люди, привыкли очень быстро реагировать и приспосабливаться к тому, что происходит перед нами. Скорее всего, это как-то относится к всем этим древним принципам вроде “бей или беги”. Ну, вы поняли – принцип “беги от волков, но сражайся за последний пончик”.

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

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

#Design
#критика

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

#UXLessons
#MotionDesign

Сбербанк показали новый логотип, градиент и часы с зелёной галочкой

Компания уже зарегистрировала заявку с изображением в Роспатенте, пишет агентство. В апреле 2019 года «Сбербанк» зарегистрировал товарный знак «Сбер».

Слово «банк» также уберут из названий большинства сервисов, пишет «РИА Новости». Например, лизинговая компания станет «Сберлизинг».

Вторая часть названия в каждом логотипе будет другого цвета: в «СберЗдоровье» вторая часть будет тёмно-розовой, в «Сберлизинге» и «Сберстраховании» — зелёного цвета, а в «Сберрешениях» — светло-синего.

В начале сентября «Сбербанк» анонсировал конференцию «о самой большой трансформации “Сбербанка” за всю историю», где также покажет новые сервисы и продукты для клиентов. Она пройдёт 24 сентября. Перед конференцией «Сбербанк» снял логотип с названием со здания главного офиса на улице Вавилова в Москве.

#news
#LogoDesign

Как создавать лучшие макеты с помощью сетки 8pt
Сетки – это важнейший элемент UI дизайна.

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

Последовательные и масштабируемые интервалы помогают избавиться от догадок при проектировании и разработке. Требуется принимать меньше дизайн-решений. И это позволяет значительно ускорить работу над проектами.

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

Время чтения: 2 минуты

Читать статью

#8pt #сетки

Небольшие и приятные формы

В десктопных версиях основным действием является набор текста. В мобайл всё работает по-другому – здесь важен свайп и нажатие.

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

#MobileUX

Неоморфизм и его проблемы

Неоморфизм — это свежий (относительно skeuo/flat/material) тренд в дизайне, который по сути представляет из себя реинкарнацию похороненного скевоморфизма. Так как у этого стиля нет чётко задокументированных гайдлайнов, как например у material, его различные применения вызывают немало споров среди дизайнеров. В этой статье мы разберём его суть и обсудим резко набравшие актуальность из-за Big Sur проблемы.

Читать статью

#UI #неоморфизм

7 шагов конкурентного анализа сайтов

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

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

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

#анализ #маркетинг