Генератор локального мерча от Лебедева

На днях студия Артемия Лебедева запустила генератор мерча «На районе» позволяющий создавать "уникальный" дизайн для любого места в мире. Просто вводите в поиск название родного города, посёлка или любимой страны и алгоритм выдает бесконечный креатив. Вот как авторы пишут о своем проекте:

"Люди во всех точках мира любят свой город, регион или край. Локальный патриотизм — чувство, понятное везде. Теперь свой мерч есть не только у Нью-Йорка и других крупных городов. Он есть у Лаокая, Таоса и деревни Каменка."

Ссылка: https://naray.one/ru
Как вам такая рандомизация локального патриотизма? 🔥 или все-таки 💩

​​Основы дизайна - Закон Хика

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

Как использовать закон Хика?

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

Вывод

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

Топ 6 частых ошибок в дизайне лэндингов

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

1. Плохая читаемость текста

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

2. Слишком много стилей

Наиболее частая ошибка новичков — использование разных стилей типографики и оформления на одной странице. Это не только губительно для целостности стиля страницы, но также затрудняет восприятие информации. Используйте 1-2 шрифта и один стиль для иконок. Подходящие шрифты можно подобрать тут.
Также применяйте ограниченную палитру цветов используя максимум два цвета для выделения важных элементов.
Пример →

3. Недостаточно отступов

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


4. Слишком много текста

Большинство посетителей не очень любят читать длинные тексты лэндингов. Чаще всего пользователи просто «сканируют» страницу цепляясь за ключевые фразы. Помогите вашим пользователям — сократите текст до минимума или разбейте его на несколько смысловых блоков. Оптимальной длиной текста для чтения считается 50-60 символов в строке. Также стоит избегать слишком много текста в узких колонках и заголовках.
Пример →


5. Информация не разделена на смысловые блоки

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

6. Не соблюдена иерархия в типографике

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

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

Воскресный дайджест. Посты, которые вышли на этой неделе:

— Почему дизайн-система не равно UI-kit

— Инструменты управления пользователем #1 - когнитивная нагрузка

— Визуализация данных в интерфейсе Ч.5 — проектирование дашборда

— Генератор локального мерча от Лебедева

​​— Основы дизайна - Закон Хика

— Топ 6 частых ошибок в дизайне лэндингов

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

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

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

https://vc.ru/design/496233-zapiski-yunomu-dzhunu-3-keysy

Основы дизайна — Закон Якоба

Очень банальный зато действенный закон названный в честь американского UX специалиста — Якоба Нильсена. Он гласит:

«Пользователи проводят бо́льшую часть своего времени на других веб-сайтах, а не на вашем»

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

Как применять на практике

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

Вывод

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

Если было полезно, реакции к вашим услугам!

Как создать качественную цветовую палитру #4 — как подобрать цвета

Мы уже разобрались, что цвета бывают первичные и вторичные и в какой пропорции их лучше использовать.
Если забыли, вот ссылки на предыдущие посты из цикла:

1 — создание палитры

2 — метод 60-30-10

3 — работа с контрастом

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


Почему важно подобрать правильные цвета?

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


Изучите вашу ЦА

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


Подбор палитры по фотографии

Очень эффективный метод для создания палитры — вдохновится фотографией с гармонично подобранной цветовой гаммой. Если в процессе изучения вашей ЦА вы создали мудборд (коллаж настроений), то определится с основными цветами будет намного проще. Лучше всего подходят фотографии, где используется только один основной цвет или оттенки одного цвета. Хороший сервис для создания палитры по фотографии https://coolors.co/image-picker


Ассоциативный выбор цвета

При выборе цвета стоит также учитывать и психологические факторы - ассоциации, которые вызывают отдельные цвета. Я не буду вдаваться во все подробности трактовки каждого цвета, если интересно советую статью Гид по цвету: физиологические эффекты, социокультурные ассоциации и связанные эмоции. Важно учитывать, что в зависимости от культуры, цвета могут интерпретироваться иначе и иметь даже противоречивые трактовки.


Как комбинировать цвета?

Вы провели конкурентный анализ, исследовали предпочтения вашей ЦА и поняли какие цветовые гаммы им могут подойти. Осталось понять как сочетать первичные и вторичные цвета... Крайне удобный инструмент для этой задачи — цветовой круг Иттена. Ознакомится с тем, как работать с комплементарными цветами, триадами, тетрадами и как их использовать в дизайне можно в этой статье. А подобрать цвета онлайн через цветовой круг на https://paletton.com


В заключение

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

На этом все... Если понравилось — вы знаете где реакции!

Пока дизайн-комьюнити отходит от шока о предстоящей покупки Фигмы монополистом Adobe взглянем на пару концептов ребрендинга популярных приложений для социальных сетей. Как вам креатив? Напишите в комментариях!

5 главных ошибок начинающего фрилансера

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

1. Неумение презентовать свои услуги

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

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


2. Отсутствие профессионального фокуса

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

— не пытайтесь сразу научится всему и вся, только измотаете себя не научившись ничему до конца
— если вы позиционируете себя экспертом в определенной области у вас больше шансов, что клиент выберет именно вас


3. Плохая самоорганизация

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

— приоритизируйте задачи, ведите ToDo-списки и чеклисты
— выполняйте задачи не рывками, а постепенно и осознанно
— четко разграничивайте рабочее время и отдых


4. Отсутствие навыков общения с заказчиками

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

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

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


5. Заниженная цена за услуги

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

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


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

Инструменты управления пользователем #2 - управление памятью

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

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

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

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

Альтернативный метод

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

На этом все! В следующий раз поговорим об управлении временем пользователей. Если серия вам интересна, вдарьте по реакциям!

Кейсы, закон Якоба, ошибки начинающего фрилансера...

Недельный дайджест. Посты, которые вышли на этой неделе:

- Как правильно создавать кейсы

- Основы дизайна — Закон Якоба

- Как создать качественную цветовую палитру #4 — как подобрать цвета

- Концепты ребрендинга приложений для социальных сетей

- 5 главных ошибок начинающего фрилансера

- Инструменты управления пользователем #2 - управление памятью

Если неделя для вас была полезна, вдарьте по реакциям. Если есть интересующие вас темы, на которые хотели бы увидеть посты на канале, пишите в @uxtrends_bot

Вы джун или мидл? — Разбираемся в грейдах дизайнеров

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

https://vc.ru/design/492693-razbiraemsya-v-greydah-dizaynerov-dzhun-midl-sinor

​​Как правильно использовать сегментированные переключатели в UI

Этот компонент можно часто встретить на веб-страницах или в приложениях. Разберем, что не так с его применением...

Что это такое?

Если следовать определению Apple Developer Guidelines сегментированный переключатель (Segmented controls) - это набор из двух или более сегментов, каждый из которых функционирует как кнопка. Вместо надписей могут также использоваться и символы.

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

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

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


Как вам формат? Если стоит больше писать про конкретные ошибки в проектировании интерфейсов дайте знать в реакциях.

​​Основы дизайна - закон прегнантности

Закон прегнантности был описан Максом Вертгеймером, одним из основателей гештальтпсихологии, на основе исследования восприятия человека. Он установил, что в зрительном восприятии человека наблюдается стремление интерпретировать неоднозначные образы как простые и завершенные, а не сложные и незаконченные. От этого и название явления - прегнантность (нем. «хорошая, полная форма»). При этом было выделено 5 свойств облегчающих восприятия целостной формы из группы разрозненных элементов: близость, сходство, непрерывность, завершенность и взаимосвязь.

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

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

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

Подборка продвинутых приемов Figma

В последнем обновлением о котором я писал раньше Фигма приобрела несколько очень крутых функций. Но некоторые полезные фичи остались все-таки незамеченными в большинстве обзоров. Вы знали например что SVG элементы со страниц в браузере можно копировать прямо в фигму? Или добавив "_" в название стиля он станет невидимым? Эти и многие другие советы, которые значительно облегчат работу в Figma по ссылке внизу:

https://www.uprock.ru/articles/samye-prodvinutye-priemy-figma-2022-goda

Как сфокусироваться и усилить концентрацию внимания

Наверно вам знакомо это чувство, когда важных дел много, а с чего начать не понятно. Как разобраться на чём стоит сосредоточиться в первую очередь, а что менее важно?
Чего не стоит делать это пытаться сделать все сразу. Ученые доказали, что наш мозг не сильно приспособлен к мультизадачности. По существу мы можем всего лишь переключаться от одного дела на другое. Каждое такое переключение стоит нам ментальной энергии. В результате - снижается концентрация и как результат падает продуктивность.

Простой метод сфокусировать внимание на том, что важно, и устранить то, что не важно, придумал известный инвестор Уоррен Баффетт. Он предлагает расставить приоритеты с помощью 3-х шагов:

1) запишите 25 самых главных задач

2) обведите в списке 5 наиболее важных пунктов

3) в результате получим два списка с 5 самыми срочными задачами и 20 менее срочными

По мнению Баффетта именно с 5 самых срочных задач и нужно начать. А вот к остальным 20 даже не стоит приступать пока не будут завершены топ-5. Все предельно просто, зато очень эффективно! Устранив кучу второстепенных дел мы высвобождаем время для решения наиболее важных задач. Этот метод можно использовать как и глобально (жизненные/карьерные задачи) так и для более короткого периода (задачи на неделю).

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

UX-исследования — Как протестировать ваш сайт за 5 секунд

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

Как проводить тест

Участнику исследования показывают фрагмент сайта или макета ровно на 5 секунд, после чего испытуемому задаются ряд вопросов. Например:

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


В чем преимущество

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

Было интересно? Если хотите увидеть больше таких обзоров по методам UX-исследований наберите 50 👍 под постом.

Грейды в дизайне, фокусировка внимания, 5-ти секундный тест…
По традиции недельный дайджест:

— Разбираемся в грейдах дизайнеров

— Как правильно использовать сегментированные переключатели

— Основы дизайна - закон прегнантности

— Подборка продвинутых приемов в Figma

— Как сфокусироваться и усилить концентрацию внимания

— UX-исследования: как протестировать ваш сайт за 5 секунд

И не забываем поднажать на реакции постом выше если тема про UX-исследования вам интересна.