Линейку в тёмной теме не победили)) Сильно выделяется, конечно. Но, привыкнем. Либо покрасят)

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

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

Внутри статьи:

- Общие моменты
- Фотографии в карточках
- Цена товара
- Рейтинги и отзывы
- Характеристики
- Инфо о доставке

И ещё очень много информации.

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

@jun_hi

В тёмном режиме самый топ background для холста в Figma: 1Е1Е1Е.

Не благодарите.

———

Какой у вас?

@jun_hi

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

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

Новое обновление их сервиса уже в пресс-релизе: https://ru.airbnb.com/2022-summer

———

Пользуетесь ими? Как вам? Какие минусы отметите?

@jun_hi

Я в своей жизни сделал одно тестовое в Тинькофф, больше я их не делал.

И вот хочу понять, как сейчас на рынке ситуация с тестовыми? Какие вам давали? Насколько глупыми они были или очень качественные? Насколько объёмные? От каких вы офигели, что ещё и бесплатно, и делать месяц?)

Пишите в комменты, очень хочу почитать, какие сейчас тестовые. Думаю, многим будет полезно)

Если есть примеры тестовых, которые вы считаете очень качественными, которые раскрывают ваши навыки, как дизайнера – прикрепляйте их тоже)

Небольшая статья о висячих предлогах (если они кого-то бесят).

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

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

@jun_hi

🔥 Нашел на просторах статью от Маргариты Романовой, продуктового дизайнера в ДомКлик о том, как она искала работу в Европе, ходила на собеседования, как готовилась и ещё много интересного.

На выходные самое то :) Статья немного большая, минут на 15.

Что внутри:
- Как оформить портфолио
- Как презентовать проекты
- Что писать в CV
- Как составлять Cover Letter
- Как готовиться к собесу
- Советы по прохождению интервью зарубежом
- Ссылки на полезные материалы, которые помогут в трудоустройстве
- Как общаться на собеседовании и что спрашивать
- Как проходить whiteboard и отвечать на вопросы интервьюеров

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

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

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

@jun_hi

Полезное #22

———

Плагины для Figma:

🔸 Ruri Splines. Плагин для Figma, который позволяет создавать различные градиентные сплайны с последующим экспортом в PNG.

🔸 Iconduck — большая библиотека бесплатных векторных иконок

🔸 Outline to Single Stroke — конвертер векторных объектов из outline в stroke

🔸 Font Preview — панель предпросмотра шрифтов, с поиском и возможностью добавлять в избранное

———

Интересные сервисы и сайты:

🔹 Neo. Приятный минималистичный дизайн мобильного приложения для банка.

🔹 Стильный в меру брутальный сайт студии Proto Еditions с гибкой модульной вёрсткой и мелкой типографикой.

🔹 Лёгкий современный сайт петербургского арт-пространства «Бутылка» с аскетичной вёрсткой и динамичной структурой в виде слайдов и блоков.

🔹 Элегантный сайт поставщика драгоценных металлов Argor Heraeus с трёхмерными анимациями, плавным горизонтальным скроллом, премиальной палитрой и незаурядной вёрсткой.

———

Бесплатные файлы:

▪️ Open Stickers. Бесплатная коллекция из 80 дружелюбных иллюстраций с яркой и нарочито примитивной стилистикой. Доступно в PNG, SVG и формате для Figma. Сделано ребятами из Craftwork.

▪️ Коллекция из 96 бесплатных текстур металла в высоком разрешении.

▪️ Mighty Cursor. Компонент Figma со всеми состояниями курсора macOS.

———

Статьи:

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

📚 10 cognitive biases that shape our world. Сиддартха Кандиконда рассказал о 10 типах когнитивных искажений, которые влияют на представление человека об окружающем мире, и о том, как эти искажения проявляются в дизайне.

📚 Дизайн дайджест за апрель от Юры Ветрова.

@jun_hi
#полезное

Ты: тратишь уйму времени на проектирование сложных интерфейсов в 500+ экранов.

Дизайнер в Инстаграм: 6 лет осветляет градиент в старом лого и выдаёт за новый.

Да, Инстаграм обновил логотип сегодня.

@jun_hi

Статья с разбором UX/UI фотографий на странице товара в интернет магазине:

– внешний вид
– типы контента
– расположение
– функциональность
– нестандартные кейсы

Много референсов и негативных примеров.

130+ пунктов чек-листа.

Читайте, уносите к себе решения, если делаете интернет-магазины.

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

@jun_hi

Назрел вопрос.

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

Но мне стало интересно, а что вы спрашиваете у компаний, когда ищете работу? Что для вас важно на новом месте? Возможно, у вас есть готовый список вопросов, который кому-нибудь пригодился?)

А то знаю людей, которым говорят, «‎если у вас есть вопросы – задавайте»‎, они говорят «‎да не, вопросов нет»‎, а потом вскрывается много камней, которых можно было бы избежать.

Давайте пообщаемся в комментах)

@jun_hi

Вспомним главные законы в проектировании интерфейсов. Статья про них.

– Эффект эстетитки
– Порог Доэрти
– Закон Фиттса
– Закон Хика
– Закон Якоба
– Закон общего пространства
– Закон прегнатности
– Закон близости

и ещё парочку.

Это кажется основа основ, чтобы делать хорошие интерфейсы)

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

@jun_hi

Полезное #23

———

Плагины для Figma:

🔸 Icon Sizes — автоматически создает компонент с тремя вариантами для выбранной иконки в размерах 12, 16 и 24 px

🔸 Memojis — коллекция из 100+ мемоджи

🔸 Supa Gradient — создаёт градиенты различной сложности

🔸 MeisterIcons — бесплатная библиотека из 100+ векторных иконок

———

Интересные сервисы и сайты:

🔹 Спецпроект магазина косметики Pola ко Дню матери в Японии. Сайт украшен лаконичными псевдотрёхмерными анимациями цветов, которые символизируют множество проявлений любви и материнства.

🔹 Motion One. Библиотека готовых CSS-анимаций.

🔹 Clipdrop. Обновлённое AR-приложение, которое захватывает объекты с помощью камеры и удаляет фон, а затем переносит их в Photoshop, Figma, Sketch или другой графический редактор. Приложение также поддерживает очистку изображений от лишних деталей, увеличение разрешения, пакетную обработку и экспорт в 4K. Доступно на Android, iOS, macOS и Windows. Есть бесплатная ограниченная версия.

🔹 Различные полезные дизайн-инструменты Алекса Видуа, дизайнера из Швеции. Внутри есть плагины для Figma, ИИ-инструменты и даже браузер.

———

Бесплатные файлы:

▪️ Коллекция базовых звуков для интерфейса с наглядной интерактивной демонстрацией.

▪️ Tabler Icons. Обновлённая коллекция линейных иконок с настройкой толщины. На сайте доступен поиск и сортировка по категориям, а сами иконки можно экспортировать в виде SVG, PNG, файла Figma или кода. За два года коллекция выросла с 300 до 1950 иконок.

———

Статьи:

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

📚 A Guide to Task-Based UX Metrics Джефф Сауро и Джим Льюис подготовили справочник метрик для проведения юзабилити-тестов конкретных сценариев интерфейса.

📚 2022 Craft Beer Branding and Package Design Trends
Большой ежегодный обзор трендов в дизайне и позиционировании брендов крафтового пива.

@jun_hi
#полезное

Статья о 20-ти методах UX-исследований от NNGroup. Какой метод выбрать и когда

Внутри:
– Виды UX-исследований и в чём их специфика
– На каком этапе разработки продукта какой метод выбрать
– 20 самых популярных методов и как они проводятся
– Выводы и рекомендации

и ещё много полезной информации)

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

@jun_hi

14 советов, которые сделают ваш дизайн чуть лучше.

– заголовок и текст
– иконки
– форма ввода
– переключатели
– чипы и настройки

и ещё парочка) Новичкам пригодится)

👉 Смотреть советы

@jun_hi

Гайд по визуальному дизайну в интерфейсах от Воробушек))

Внутри:
– правила внутреннего и внешнего
– работа с контентом
– сигнал и шум
– визуальное выравнивание
– расстояние между строк
– контраст цвета
– внутренние отступы в карточках

и дополнительно ещё некоторая полезная информация, которая представлена в виде понятных карточек без тонны текста)

Освежите, кто подзабыл) Читается быстро.

👉 Читать гайд

@jun_hi

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

Курсы.

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

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

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

Я проходил вот uprock давно, когда они делали упор на UI. Сейчас там уже курсов сильно больше и интереснее (это не реклама, Женя привет).

Пишите 👇👇

Навыки для дизайнера продукта

– Уметь создавать эстетически привлекательный интерфейс (помним, что более красивый интерфейс кажется более удобным)

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

– Внимание ко всем деталям при проектировании интерфейса. Умение предусматривать промежуточные корнер-кейсы, которые могут возникать в процессе того или иного флоу

– Умение идти на компромиссы с заказчиком принимать обдуманные решения

– Понимать, как создаются CJM, JBTD и прочие, когда это может потребоваться. Изучать с нуля будет не быстро)

– Знание гайдлайнов: IOS, Android, Windows и прочих. Мало ли, с этим предстоит работать

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

– Умение работать с брендом продукта, если он есть. Понимать, как это можно внедрять в продукт и пользовательский опыт

– Знать правила типографики, колористики, визуальной иерархии и прочие, которые обязательны для правильного проектирования интерфейса

– Уметь создавать кликабельные прототипы, иногда чуть более сложные, чем просто клик по кнопкам

– Уметь писать интерфейсный текст (возможно не на идеальном уровне, но понимать, как смыслами можно доносить суть того, что представлено на странице, зачастую текстом). Чтобы любому клиенту было понятно, о чём речь. Не работайте с рыбой, желательно никогда.

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

– Знать и уметь применять исследования. Какие виды существуют, когда их применять и какой будет наиболее быстрый и дешёвый для проверки ваших экранов

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

– Умение работать с Фигмой. Компоненты, автолэйауты, создание UI кит, варианты, работа с библиотеками, с плагинами итд

– Уметь давать и получать критику

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

– Уметь передавать макеты в разработку, писать документацию, которая облегчит им жизнь при вёрстке

———

Если я что-то пропустил, добавляйте в комменты)

@jun_hi

Ребята из Hardclient выпустили очередной большой разбор. На этот раз про характеристики и описание на странице товара.

– Базовые моменты по характеристикам
– Описание товара
– Сравнение и помощь в выборе
– Скрытие и отображение характеристик

Статья большая с большим количеством примеров. Читать лучше с ПК)

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

@jun_hi