Недельный дайджест

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

> Винтажная мебель, плагин для Figma, шрифты и два лагеря дизайна — крутая подборка от redmadrobot

> Хард и софт скиллы — что это и какими должен обладать UX-дизайнер

> Что такое ux-анимация

> Инструменты UX-дизайнера. Часть 1 — исследование ЦА

> Посмотрите, как прощается Ситимобил со своими пользователями

> Как найти первых заказчиков

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

До скорой!

Угадайте, импортозамещение какого бренда на картинке?

Ребята из lemon.media сделали такие адаптации 25 иностранным брендам, которые ушли из РФ.

Посмотрите, это как минимум весело: https://clck.ru/ejgnq

Макет — то, с чего начинается проект

Когда писатель пишет книгу, сначала готовит черновик. А UX-дизайнер, когда приступает к проекту, создает макет.

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

Это поможет клиентам заранее понять, каким примерно будет их продукт и, если будет нужно, на старте внести корректировки.

Макет бывает 3 видов: вайрфрейм (структура), мокап (эскиз визуальной части) и прототип (функционал). Их разрабатывают последовательно.

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

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

Инструменты UX-дизайнера. Часть 2 — анализ конкурентов

Кто пропустил первую часть, переходим по ссылке и читаем.

Анализ конкурентов — второй инструмент, который является общим для маркетолога и UX-дизайнера.

Для чего он нужен

/ Отличие вашего продукта от других

UX-анализ конкурента поможет понять, какие у вас есть преимущества перед конкурентами. И какие недостатки. Так вы поймёте, что стоит улучшить и чем привлекать аудиторию.

/ Кража крутых идей

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

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

/ Выявления слабых сторон

Узнав, чем недовольны клиенты вашего конкурента, можно реализовать это в своем интерфейсе. Заказчик за это вам будет только благодарен.

Как анализировать

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

До скорой!

Вайрфрейм — что это такое и для чего нужен

При создании продукта команда ориентируется на схематичную структуру, которую для них создает UX-дизайнер. Это и есть вайрфрейм.

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

Ещё плюсы:

> быстрое создание
> начальный вариант можно набросать от руки

Где создавать варфреймы

Собрал для вас несколько сервисов, сохраните этот пост себе где-нибудь, чтоб не потерять:


https://wireframe.cc — простенький онлайн сервис для рисования вайрфреймов

https://balsamiq.com — очень простой и легкий в освоении продукт, но не бесплатный

Figma.com — универсальный инструмент для UX/UI

Шаблоны


Figma Шаблон для быстрого создания простых вайрфеймов
https://www.figma.com/community/file/784448220678228461

Отличная библиотека для создания вайрфреймов в Figma
https://www.figma.com/community/file/887892609124245416

Шаблон для создания вайфреймов в Sketch
https://www.sketchappsources.com/free-source/1552-website-wireframe-template-sketch-freebie-resource.html

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

Ещё пару лайфхаков для создания варфрейма:

> Нарисуйте первый вайрфрейм вместе с клиентом. Это даст ему почувствовать причастность к проекту, дальнейшие этапы будет утверждать проще

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

Как составить крутое портфолио

Наткнулся на оч крутую статью. В ней автор собрал советы топовых спецов, которые работали с Apple, Samsung, ВВС и т.д., по тому, как собрать портфолио. Приведу в этом посте краткую выжимку:

> Сделай акцент на себе

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

> Будь честным

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

> Продумай структуру

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

Эти 3 пункта то, что отметил для себя из статьи. В ней ещё 5 крутых и полезных советов. Почитайте.

Ссылка: https://skvot.io/ru/blog/kak-sdelat-krutoe-portfolio

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

Все, что вы могли или захотели пропустить:

> "Импортозамещение" заблокированных брендов на территории РФ

> Макет — то, с чего начинается проект

> Инструменты UX-дизайнера. Часть 2 — анализ конкурентов

> Вайрфрейм — что это такое и для чего нужен

> Ещё пару лайфхаков для создания варфрейма

> Как составить крутое портфолио

Те, кто недавно здесь, загляните в закреп, узнаете что тут вообще творится.

На такой ноте закрываем эту неделю и приступаем к следующей. Жмакните по реакциям, если было полезно. До скорой!

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

Наткнулся на оч крутой текст на эту тему. Зацепило то, что автор сначала объясняет, как мозг воспринимает инфу и как использовать это в свою пользу.

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

/ Не обмануть ожидания

Если человека привлекли чем-то, то он должен получить это при переходе на сайт.

/ Создать иллюзию, что пользователь управляет процессом

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

/ Менять ритмику

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

Это короткая выжимка из оочень крутой статьи. В этом посте всего 30 % пользы. Почитайте, ссылка внизу:

https://vc.ru/design/335185-kak-upravlyat-vnimaniem-chitatelya-s-pomoshchyu-skrolla

Инструменты UX-дизайнера. Часть 3 — выстраивание алгоритма задачи

Это последняя часть серии "Общие инструменты маркетолога и UX-дизайнера".

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

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

Маркетолог целится на продажу продукта и выявления ЦА. UX-дизайнер на доводку и оптимизацию продукта под ЦА.

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

Мокап — что это и для чего нужен

Я уже рассказывал, что вайрфрейм — структура проекта.

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

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

В чем делаются мокапы? Все в тех же графических приложениях в которых будет создаваться конечный дизайн: Figma, Sketch, Adobe XD, Illustrator...

Полезные ссылки:

Шаблоны девайсов для презентации мокапов:
https://www.free-mockup.com/downloads/category/ux-ui-mockups/

Девайсы для презентации мокапов в Figma:
https://www.figma.com/community/file/786708730400780813

На этом всё

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

@uxtrends

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

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

Собрал в этом посте подборку советов, которая будет полезна всем фрилансерам, а не только UX-дизайнеру. Погнали:

• Изучите компанию

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

• Расскажите о себе кратко

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

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

• Расскажите о прошлом опыте

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

• Не перебарщивайте с примером работ

Не надо кидать список из 10 ссылок. Клиент не обязан кликать на каждую и проверять содержимое.

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

• И наконец, внимательно читайте условия вакансии

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

Делайте то, что просят в вакансии. Иначе клиент вас просто пошлет, ибо нефиг уважать того, кто не учитывает твои требования.

На этом все. Как вам пост?

@uxtrends

UX vs UI — выбрать один или стать универсалом

Универсал — тот, кто поверхностно обладает навыками в нескольких сферах, но уступает специалистам, которые лучше в определенной нише.

Как компании отбирают на работу

Скажу по своему опыту. Мелкие компании не оч разбираются в отличиях UX и UI или просто хотят сэкономить, поэтому обычно ищут универсала — UX/UI-дизайнера.

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

Но заказы от крупных компаний сразу не поступают. А зарабатывать нужно. Поэтому есть третий вариант, который устроит всех.

Стоит стать узконаправленным универсалом

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

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

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

Вдарьте по реакциям, если согласны.

Алгоритм задачи, мокап, отклики и путь универсала

Все, что было за последние 7 дней. Недельный дайджест на канале:

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

/ Инструменты UX-дизайнера. Часть 3 — выстраивание алгоритма задачи

/ Мокап — что это и для чего нужен

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

/ UX vs UI — выбрать один или стать универсалом

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

7 привычек, которые нужно выработать UX-дизайнеру

Пришел к вам с очередным материалом. В статье нет долгих вступлений и ненужной воды, все по делу. Кайф.

Вот короткие тезисы, какие привычки нужны:

1. Искать обратную связь пользователей

2. Думать в рамках дизайн-системы

3. Начинать внедрять функцию с малого

4. Показывать свои идеи разработчиками

5. Откладывать макеты до финального этапа

6. Держать в голове метрики продукта

7. Изучать другие сервисы

Зачем вам эти привычки и как их развить, рассказывают в статье. Почитайте, точно не пожалеете: тык

@uxtrends

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

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

Behance — одна из самых популярных площадок для этой цели.

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

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

@uxtrends

Примеры ux-анимаций: от кринжовых до шедевров

Что это за фича и насколько она крутая, я рассказывал здесь.

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

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

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

Жмите вот сюда: тык

если хотите больше таких постов, вдарьте по реакциям

​​Прототип — что это и для чего нужен

Вот и заключительная часть подготовки проекта перед сдачей.

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

Есть 3 типа прототипа:

1. Простой click-dummy

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

2. Прототип с анимациями и интерактивными элементами

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

3. На основе макетов первый функциональный продукт с минимальными функциями

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

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

Как составить портфолио

Отличное дополнение к посту о том, как откликаться на вакансии.

3 совета о том, как составить портфолио, которое цепляет клиентов. Погнали:

/ Коротко расскажите о своих скиллах

Что умеете и какие задачи можете решить. Не надо полотна. Хватит и 2-3 предложений.

/ Не надо голых ссылок

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

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

/ Отберите хорошие работы

Не нужно пихать все проекты в портфолио. Хватит и 5-6. Главное, чтобы они были из разных категорий и показывали клиенту, что вы, допустим, умеете работать над UX не только сайтов, но и мобильных приложений.

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

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

@uxtrends

Полезные инструменты для UX-дизайнера

Собрал 3 инструментов, которые на порядок облегчат работу в UX.

Со вступлением окончено, погнали:

• Hotjar

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

• UX Check

Расширение Chrome для быстрого определения проблем с юзабилити на сайтах.

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

• UX Archive

Необходимый инструмент для разрабов яблочных приложений.

Это архив интерфейсов iOS-приложений. Можете посмотреть, как решали задачи другие UX-дизайнеры.

Под конец

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

Поэтому, давайте соберем под этим текстом 40 👏 и я выпущу вторую часть "полезных инструментов". Погнали!

@uxtrends