Обновление Фигмы, продвижение в Бихэнс, контекстное меню и UI-кит

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

Понедельник

> Как создавать интуитивно понятные контекстные меню

Вторник

> UI-кит — инструмент, который экономит полдня времени дизайнеру

Среда

> Новое обновление Figma

Четверг

> Как продвигать свои работы на Behance

Пятница

> 3 полезных сайта для UX-дизайнеров

Суббота

> Дизайн-методологии — что это и почему они так важны для дизайнеров

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

Разбор дизайна обновленного приложения Airbnb

Наткнулся на статью с разбором обновления Airbnb "Summer 2022".

Без нудного и долгого тексте. Все объяснено с помощью видосов и картинок — это сэкономит время и лучше передаст всю картину.

Основные тезисы:

• весь дизайн интерфейса построен на принципах liquid interface

• дизайн вовлекает себя уже начиная с анонса

• новая функция Split Stays, которая позволит выбрать жилье одновременно на всю поездку

Почитайте, как делают дизайн лучшие профи. Ссылка на статью внизу:

https://clck.ru/h8Shc

Из каких элементов может состоять UI-кит

Про этот инструмент я писал здесь. Почитайте, если забыли.

Элементы UI-кита зависят от его предназначения. Разберу тут самые популярные.

/ Для блога

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

/ Для навигации

Меню: горизонтальное и вертикальное. Дополнительный блок для описания всплывающих окон и шаблоны главного экрана с разделами.

/ Для получения фидбэка

Формы и анкеты пользователей. Раздел обратной связи и оформления заказа.

/ Виджеты

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

/ Для e-commerce

Каталоги и карточки товаров. Фильтры, корзина, варианты кнопки "похожие товары" и т.д.

Под конец

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

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

Если обратили внимание, у успешных брендов дизайн индивидуальный. Вы без проблем можете отличить стиль Ozon, Эльдорадо и Я.Лавки. Это лишь констатирует тот факт, что копировать конкурентов — плохая идея.

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

1. Продвигаете не себя, а конкурента

Если даже поменять логотип и адрес, то посетители все равно вас будут ассоциировать с другим брендом. И от этого ярлыка будет трудно избавиться.

2. Не получаете такой же эффективности

Красивый сайт не равно хорошие продажи. Вы не знаете, работает ли он вообще. Возможно, все дело в крутых маркетологах и классном продукте конкурента. У вас также может быть совершенно разная ЦА. Поэтому, не стоит ожидать такой же эффективности.

3. Могут быть проблемы

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

4. Копировать может быть сложно

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

5. Получаете меньше охвата и конверсии

Этот пункт очень схож со вторым. Глупо ожидать такой же активности аудитории, просто скопировав дизайн.

Тогда что делать

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

В самом материале автор рассказывает все это более детально и понятными примерами. Почитайте: https://clck.ru/VSeEf

Библиотека компонентов Figma — что это и для чего нужно

Одним из главных преимуществ Figma — возможность создавать библиотеку компонентов. Это файл из уже готовых шаблонов элементов интерфейса, созданных на Фигме.

Экономит время

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

Удобно работать в команде

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

Под конец

На этом фсё. Если было полезно, вдарьте по реакциям — это значительно повышает качество контента, проверено.

Топ-3 UI-китов для дизайнеров на Фигме

Про этот инструмент писал вот тут

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

> Strapi

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

> FigWire

Подойдет как для вайфреймов, так и как базовый набор компонентов для лендингов, блогов или онлайн-изданий. Огромный выбор готовых блоков

> WPDS

Отличный кит для блогов, куча компонентов, и хорошая подборка текстовых блоков. Компоненты нацелены на удобство читателей — идеально подходит для онлайн-журналов. Неудивительно, ведь система изначально создана для Washingtonpost.com.

Итог

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

Методология CRAFT — как генерировать новые идеи

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

Рассмотрим на примере. Вот есть сцена, допустим, театра. Здесь 2 явные роли: актеры и зрители. А что если их изменить? Дать роль выступающих зрителям и наоборот? В итоге останется только сцена, где любой из зала может выступить. Да-да, именно так и появились клубы открытых микрофонов, где как раз-таки нету отдельных ролей выступающих и зрителей.

В чем отличие от "латерального мышления"

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

А CRAFT — переосмысление привычных вещей и использование их в новом ключе.

Где можно применить Крафт

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

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

Генерация идеи по Крафту состоит из нескольких этапов. Их разберу в следующий раз. Если интересно, вдарьте по реакциям.

Элементы UI-кита, плагиат дизайна, библиотека Фигма и Крафт

Время недельного дайджеста. Все, что было на этой седмице:

Понедельник

• Разбор дизайна обновленного приложения Airbnb

Вторник

• Из каких элементов может состоять UI-кит

Среда

• Почему нельзя копировать дизайн сайта конкурента

Четверг

• Библиотека компонентов Figma — что это и для чего нужно

Пятница

• Топ-3 UI-китов для дизайнеров на Фигме

Суббота

• Методология CRAFT — как генерировать новые идеи

Если у вас остались вопросы или предложения по контенту, пишите сюда @uxtrendsbot. Кликните по реакциям, если неделя в канале была полезной.

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

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

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

Вокруг этой идеи построили весь дизайн интерфейса. И вот что с этого получилось:

https://clck.ru/i5vqX

Как можно зарабатывать на UI-китах

Это один из самых востребованных инструментов у дизайнеров. Поэтому за них готовы платить. Вот что говорит Роман Банкс, сооснователь Slice Design:

Дизайн-системы покупают студии, чтобы наладить процессы разработки продуктов, повысить качество и сократить временные расходы. UI-киты пользуются спросом у фрилансеров junior- и mid-уровней. У них основная задача — сделать проект вовремя и красиво.

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

Сколько можно зарабатывать

Для примера возьмём набор GoTrip, предназначенный для сайтов тур-агентств. Размещен на продажу 14 мая. Стоит $19. За это время было 7 продаж. То есть, за 10 дней выручка составила $133. Но площадка берет комиссию $2 + 55%. В итоге создателю остается только $60,95. Посмотреть примеры других наборов и посчитать их прибыль можете по ссылке.

Что нужно для того, чтобы неплохо на этом зарабатывать

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

Думаю, сами понимаете, почему для заработка на ui-китах работа в команде не вариант. Выручка не позволит.

Появились вопросы или пожелания? Пишите в @uxtrendsbot. И жмакните по реакциям, если было полезно.

Инстаграм создал собственный шрифт

Называется Instagram Sans. Его будут использовать в рекламе, а внутри приложения — в сториз и reels.

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

Рефлексия — очень действенный метод исправить свои ошибки

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

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

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

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

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

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

Почему у вас нет заказов #1

"По скиллам не уступаете большинству коллег, только вот заказы почему-то не льются рекой" — знакомая ситуация?

Это проблема многих дизайнеров. Даже если вы круто разбираетесь в UX или UI дизайне, это ещё не гарант высокого дохода. В этом посте постарался разобрать, почему у хорошего спеца не всегда есть поток клиентов. Поехали:

• Заказчики вас не видят

Чтобы заказы поступали, клиентам вас нужно где-то находить. Если вы не мелькаете в их ареалах обитания, то заказов не будет. Поэтому важно активно вести соцсети и позиционировать себя как эксперта.

В канале есть целая серия постов о площадках, где водятся заказчики:

Behance — что это такое и для чего нужен дизайнеру

Площадки, где дизайнеру можно разместить свои работы и собрать портфолио

Площадки, где можно найти заказы фрилансерам

Западные биржи фриланса

Дело за малым: перечитать их и пойти оформлять свои профили.

• Вы работаете в узкой нише

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

Если вы делаете дизайн только для сайтов на Тильде, то вряд ли у вас закажут что-то другое и более серьезное.

Под конец

Это были 2 причины, почему у вас может быть мало заказов. Но есть и другие, как минимум, я смогу выделить ещё столько же пунктов. Давайте соберем под этим постом 60 🔥, и я опубликую вторую часть цикла.

Сегодня воскресенье, а значит...

Время недельного дайджеста:

Понедельник

* Как сделали редизайн криптоплатформы для фрилансеров

Вторник

* Как можно зарабатывать на UI-китах

Среда

* Инстаграм создал собственный шрифт

Четверг

* Рефлексия — очень действенный метод исправить свои ошибки

Пятница

* Почему у вас нет заказов #1 (тут почти за сутки собрали нужное количество реакций, восхищён)

Суббота

* Опрос: Ваш опыт в дизайне

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

Как крупные бренды игнорируют советы дизайнеров

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

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

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

Пример

Совет: не надо использовать для фона цвета, которые сильно выделяются. Лучше светлые ненавязчивые тона.

HBO Max и Hulu: используют темные, ярко выделяющиеся цвета для фона.

Ещё больше таких примеров: https://clck.ru/oBf2B

Этапы методологии CRAFT

Про этот способ генерации новых идей писал вот тут.

Василий Лебедев, автор CRAFT, разделил процесс на 7 этапов. Он предложил их представить как реальную местность, которую нужно пройти. Вот они:

1. Джунгли исследований

Здесь мы собираем необходимые данные. Изучаем ЦА, их желания, спрос и задачу в целом. Выбираемся из джунглей на...

2. Поляну задач

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

3. Гора идей

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

4. Гора действий и предметов

Здесь мы накладываем отобранные идеи в реальные предметы. То есть воплощаем их в виде сервисов, сайтов, приложений, программ или ещё другого продукта. Передаем результаты в производство. После спуска с горы заходим в...

5. Пещеру сокровищ

Здесь мы оцениваем свои ресурсы и ищем пути монетизации. После выходим из пещеры и идем в...

6. Поля внедрения

Тут мы тестируем идею, улучшаем и внедряем в практику. Это конечный пункт. А над всем путем, который мы прошли, висит...

7. Облако рефлексии

Оно покрывает всю местность, т.к. по окончанию каждого этапа мы рефлексируем.

Под конец поста

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

Лучше все показать на конкретном примере. Поэтому давайте соберем под постом 120 👏, и я в отдельном посте покажу применение CRAFT на примере какой-нибудь задачи.

Виды рефлексии

Об этом методе анализировать свои действия писал вот тут

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

Для нас с вами, т.е. фрилансеров, имеет значение в первую очередь категория "время". Она включает 3 вида:

1. Ретроперспективная

Анализ прошлого. Своих действий и поступков уже после работы.

2. Перспективная

Анализ будущего. Планируете задачи наперёд, ставите проекту цели и дедлайн.

3. Ситуативная

Анализ настоящего. Изучаете свои действия и мысли прямо сейчас, в процессе.

Какой из них важнее для работы

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

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

Почему у вас нет заказов #2

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

В этот раз разобрал ещё 2 проблемы, из-за которых у вас нет клиентов. Они не менее важны, чем предыдущие. Кроме того, эта двойка на прямую влияет, вернется к вам обратно клиент или нет. 2 причины почему у вас нет заказов, поехали:

• Вы плохо себя презентуете

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

• Делаете работу ради "галочки"

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

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

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

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

На это фсё

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