/designer

23 мая 2023 08:33

#Снек №1. Про спейсеры

Пробуем Снеки — легковесную рубрику для быстрых углеводов.

Если в макетах встречаются повторяемые элементы, такие как списки, наборы карточек или типовые блоки, в Figma их следует верстать с использованием Auto Layout. В этом случае есть два способа контролировать отступы: через настройки самого AL и через спейсеры.

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

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

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

@slashdesigner #первые_шаги #Figma #вёрстка

/designer

19 мая 2023 12:16

Как выбрать хороший онлайн-курс по дизайну

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

Авторы: Саша Окунев, Инга Гвоздева, канал @ingamethod

Читать: slashdesigner.ru/lib/choose-course

В этой статье:

1. Внимательно изучи программу курса.

2. Учебный процесс и что может его испортить.

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

4. Стажировка: самое крутое, что может дать онлайн-школа.

5. Гарантия трудоустройства, для избранных.

6. Преподаватели, в том числе, звёздные. Какие могут быть подводные камни.

7. Отзывы: что они могут показать, примеры хороших и плохих.

8. Что делать, если что-то пошло не так: что может помочь спасти деньги. О важности оферты.

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

@slashdesigner #карьера #первые_шаги

/designer

14 мая 2023 17:51

#тизер

Вместе с @ingamethod пишем большой гайд о том, как выбрать хороший онлайн-курс по дизайну, не нарваться на инфоцыган и не потерять деньги. Выйдет на следующей неделе. Stay tuned!

@slashdesigner #первые_шаги

/designer

14 мая 2023 10:47

Сеть чатов /designer

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

@figmachat — самый крупный чат про Фигму в Телеграме, без воды решаем вопросы по инструменту, строгие правила.

@figmaforum — база ответов из Фигма-чата, где мы собираем лучшие ответы в виде топиков.

@designchat2 — чат про дизайн для экранов, болтаем о дизайне и карьере, изредка фултайм-вакансии.

@slashcomments — чат комментариев этого канала, правила как в Дизайн-чате.

@systemschat — лютые зарубы про дизайн-системы. Собрались дизайнеры из крупных компаний.

@whatthefontt — можно узнать или угадать шрифт по картинке, обсудить типографику. Собрались сильные графики, которые знают все шрифты.

@framerchat — спящий чат про Framer. На него есть планы, поскольку Framer полностью перезагрузился как продукт и теперь это не конкурент Фигмы, а конструктор сайтов.

@slashimagineai — новый чат про генерацию картинок через AI, где можно найти картинки с исходными промтами. О концепции.

Все они доступны в папке Чаты вместе другими полезными чатами, которые не входят в сеть /designer.

Благодарю команду модераторов, без которой чаты /designer не развивались бы так мощно.

Денис Рай, Нелля Назмиева, Игорь Плющ, Глеб Сабирзянов, Витя Теплов и Рома Хмелёв, за последний год вы бескорыстно внесли огромный вклад в то, чтобы наши чаты были комфортным местом. Каждого из вас обожаю!

@slashdesigner #чаты

/designer

12 мая 2023 19:08

Подкаст

/designer

09 мая 2023 16:16

Как дизайнеру найти работу за рубежом
Гайд в 4 частях от Анны Лесной

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


Часть 1. CV

У тебя есть всего 6 секунд, чтобы произвести первое впечатление. Именно столько рекрутеры тратят на просмотр CV (резюме). На что нужно обращать внимание при составлении CV, чтобы не получить отказ уже на этом этапе?

Читать: slashd.ru/lib/hanna-guide/cv

В этой части
- Что такое ATS и как адаптировать для них CV
- Почему следует делать резюме в PDF или Ворде
- Структура эффективного резюме дизайнера
- Как подавать свой опыт: доказывать цифрами, формула XYZ, сильные глаголы
- Эволюция CV Анны: проследим, как развивалось CV.

@slashdesigner #для_профи #карьера #эмиграция

/designer

04 мая 2023 16:19

🗂 Папка-шортлист крупных дизайн-каналов

В продолжение темы папок в Телеграме.

Ранее я публиковал папки с самым полным списком дизайн-каналов, а также папку с рекомендациями каналов от /designer. Они содержат довольно много каналов и если подписаться на эти папки, это может создавать шум от уведомлений в твоём Телеграме, что может кому-то не подойти.

Для тех, кто хочет сфокусироваться и настроиться только на самые крупные каналы про продуктовый дизайн и UX-проектирование, Михаил Греков из канала «Про удобство» организовал папку «UX/UI каналы», куда на сегодня вошли 18 каналов.

Добавить UX/UI каналы к себе →

Помимо «Про удобство» там можно встретить /designer, Оди, Игоря Штанга, Алексея Бородкина, Поясни за UX, UX Notes, «Дизайнер, привет», Мамкин Дизайнер, Ozon Design и ещё несколько каналов с хорошей репутацией и крутым качественным контентом.

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

@slashdesigner #полезная_реклама #каналы #для_профи

/designer

04 мая 2023 13:28

Как сделать анимацию градиентов

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

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

Файл в Community →

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


Что использовал

- Шейпы разной формы: Rectangle, Ellipse, Polygon. Для рисования треугольников произвольной формы — Pen.
- Все шейпы обёрнуты компонентами для облегчения контроля над ними
- Смещение координат по X и Y для движения компонентов
- Масштабирование компонентов — Scale
- Изменение ширины и высоты, параметры Width и Height
- Вращение объектов — Rotation, чтобы создать дополнительное разнообразие в движении
- Набор стилей Blurs, которые позволяют накладывать типовые эффекты размытия с радиусом от 100 до 400
- Логотип с градиентом, слой которого в режиме наложения Color Dodge. Движение градиента под этим слоем создаёт блики, будто логотип состоит из стекла.


Что понял

1. Хорошо, когда анимация настолько медленная, что движение конкретных шейпов смазывается и возникает эффект сплошной единой разноцветной формы.

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

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

Чтобы контролировать его более эффективно, нужно начать с анимации геометрических фигур, а потом усложнять более мелкими элементами.

Если тема c градиентами зайдёт, сделаем видео-обзор. Приглашаю обсудить в комментариях!

@slashdesigner #первые_шаги #Figma #UI

/designer

29 апреля 2023 16:27

Папки с дизайн-каналами

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

Первым среагировал автор канала Это Лёша, поделившись своей папкой каналов.

Она быстро обросла всеми-всеми-всеми каналами, которые Лёше накидали в комментарии. В ней уже можно найти более 150 каналов и их количество продолжает увеличиваться.

Люди стали добавлять папку, подписываясь на все каналы, которые в ней были, а сама ссылка неплохо разошлась. Это привело к тому, что вошедшие в неё каналы получили мощный бесплатный буст аудитории, иногда на несколько сотен читателей, и я думаю, это только начало. В папку попал и @slashdesigner, за что спасибо Лёше. Эта папка — довольно подробный слепок того, что я называю русскоязычной дизайн-сценой Телеграма.

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

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

Папка дизайн-каналов от Лёши, 150+ каналов
Самый полный набор каналов по графике, продуктовому и веб-дизайну, включая маленькие.

Выпускаю аналогичную подборку каналов от нашего проекта:

Папка: Дизайн-каналы от /designer, 84 канала
В неё вошли каналы, которые читаю сам и готов рекомендовать. Продуктовый дизайн, немного графики, менеджмента, моушн-дизайна и 3D. Минимум каналов с агрессивной рекламой.

Папка: Дизайн-чаты, 10 чатов
Здесь тематические чаты по дизайн-инструментам, включая чаты /designer.

По поводу публичных папок есть соображения, которые изложу в комментариях к этому посту бонус-треком:

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

2. Мощный механизм увеличения аудитории для авторов

3. Мощный инструмент продвижения каналов

4. Общие папки — фактор, который обесценивает количество подписчиков

@slashdesigner #для_профи #каналы

/designer

20 марта 2023 16:46

Продолжение лекции «Шрифт и иллюстрация»

Новый выпуск: 3. Способ 2. Когда шрифт и изображение — субъекты одной композиции

@slashdesigner #первые_шаги #типографика

/designer

13 марта 2023 11:16

Превью лекции «Шрифт и иллюстрация»
Подробнее

/designer

03 марта 2023 13:02

#дайджест за февраль 2023

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


Что вышло в феврале:

Дизайнер завышает сроки — как лиду договориться со своими дизайнерами о времени на задачи

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

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

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

Заметка Oculus Go Fuck Yourself про разочарование в VR

24 февраля — пост на годовщину начала войны, где предлагаю поддержать фонд Дом с Маяком

Не публиковал, а стоило: лекция Виктора Теплова про рефакторинг дизайн-системы Ozon

@slashdesigner

/designer

21 февраля 2023 11:56

Oculus Go Fuck Yourself

Отремонтировать VR-очки Oculus Go в Алматы оказалось просто невозможно. Обратился в два сервиса, оказался один и тот же, только с разными сайтами и номерами, и мастера уже нет. Там дали наводку, что этим могут заниматься мастера в ЦУМе, но у них только телефоны-планшеты. Целый этаж сервисов огромного ТЦ, но все мотают головой и шарахаются от меня как от огня.

Здесь особенно очевидно, как провалилась попытка устроить VR-революцию, о которой проповедовал Цукерберг в 2018. Говорил, что это новый iPhone и все скоро будут дружно погружены в метавселенную. На деле VR — до сих пор такая же экзотика для геймеров, как ходули или катамараны. Конечно, можно взять в парке в аренду для прикола, но не более. Это грустно.

По пути домой по запросу «VR-service» я нахожу ещё один сервис. Но оказывается, что это автосервис, где делают ремонт ходовой. Бедный автослесарь долго не может вкурить, о каких очках я ему говорю.

Легко делать выводы по факту, однако, выскажу мнение. Одна из причин провала VR-очков как массового типа устройств в том, что в большинстве своём они блокируют пользователям зрение, не говоря уже о слабой поддержке ПО. Я искал в них возможность убрать со стола громоздкий монитор и телефон, но до этого ещё очень далеко.

#Алматы #VR

/designer

06 февраля 2023 16:48

Справочник /f внезапно сломался и выдаёт 404, разбираемся.

Пока можно пользоваться notion-версией.

@slashdesigner #техническое

/designer

03 февраля 2023 13:00

Люди везде ищут смысл

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

Почему так происходит?
Каждая фотография специалиста на лендинге встаёт в один смысловой ряд с другими.

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

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

@slashdesigner #первые_шаги

/designer

22 мая 2023 08:17

Mock Interview Fest: онлайн, 22 мая - 2 июня

Продолжим тему карьеры на @slashdesigner.

Компания AgileFluent помогает русскоязычным специалистам искать работу за границей и строить международную карьеру.

Начиная с сегоднешнего дня, с 22 мая по 2 июня AgileFluent запускаtет Mock Interview Fest — двухнедельный онлайн-фест для специалистов из IT и диджитал.

Неделя 1. Эфиры
Пройдут эфиры про поиск работы за рубежом, а также тестовые собеседования с международными рекрутерами AgileFluent.

Неделя 2. Серия мок-интервью с менторами Solvery , партнёра AgileFluent. Дисциплины: iOS, JavaScript, QA, Business Analytics, UX/UI Design.

Стрим с собеседованием на UX/UI Designer пройдет 2 июня в 19:00 по Москве.

Ментор Solvery Michael Browk, с которым мы уже знакомы по его 4 советам для подготовки к интервью, проведет собеседование в прямом эфире. Продлится 1 час собеседование, и 30 минут — обратная связь + ответы на вопросы зрителей. Интервью пройдёт на русском языке.

Можно зарегистрироваться
- В качестве зрителя / собеседуемого на первую неделю интервью для проверки софт скиллов
- В качестве собеседуемого на интервью с Майклом для проверки хардов
- Зрителем на интервью UX/UI Designer

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

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

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

Регистрируйся в качестве зрителя или участника

@slashdesigner #полезная_реклама #карьера #для_профи

/designer

18 мая 2023 19:08

4 важных совета о том, как готовиться к собеседованию

Michael Browk — мой бывший коллега и супер-позитивный чувак, который работал лидом в Ozon и Tinkoff, а с недавнего времени дизайн-директор холдинга Trevolution с командой более 30 человек и офисом в Дубае. Мы созвонились и прописали несколько ценных советов, которые он мог бы дать тем, кто проходит собеседования.


Совет 1. Как справляться с волнением

1. Достаточно репетиций. Ты должен знать контент, который рассказываешь, как свои пять пальцев.

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

3. Для тренировки понимания можно посмотреть пару серий сериала на английском. Это также позволит переключиться с волнения.

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


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

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

2. Найди менеджера, который ищет себе дизайнеров и напиши ему в LinkedIn. Рекрутеры легко могут упустить тебя из виду. Они смотрят только первые отклики, а дальше вакансия закрывается, и так ты остаёшься ни с чем.

3. Создай CV в специальных сервисах, чтобы ATS могли его легко распознать. Подробнее — в части гайда про CV.

4. Поставь статус на LinkedIn #OpenToWork, чтобы рекрутеры могли находить тебя в поиске.

5. Строй свой личный бренд и показывай свой статус эксперта, делись своим авторским полезным контентом про дизайн, в первую очередь на LinkedIn.

6. Удели время своему профилю на LinkedIn, попроси коллег с прошлой работы подтвердили твои навыки.


Совет 3. Как рассказать про свой проект вкусно

1. Подготовь сценарий выступления.

2. Подготовь презентацию = кейс.

Хорошая структура кейса: Интро, чтобы погрузить в контекст продукта → Определение проблемы → Генерация гипотез → Проверка гипотез → как повлияли на продукт.

3. Адаптируй своё выступление под слушателя: обращай внимание на реакции и на то, что вызывает интерес. Меняй темп и детализацию выступления в зависимости от реакции.


Совет 4. Не сдавайся

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

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

@slashdesigner #карьера #для_профи

/designer

14 мая 2023 17:51

Тизер

/designer

14 мая 2023 10:39

Запускаем новый чат про генерацию картинок

@slashimagineai посвящён генерации картинок в Midjourney, Stable Diffusion и других аналогичных сервисах.

Смотреть сначала: t.me/slashimagineai/5

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

Генерить картинки через чат командой /imagine всё-таки нельзя и это сделано осознанно, чтобы не превратить его в бесконечный неконтролируемый поток. Пусть в нём будет только лучшее.

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

В /imagine можно задавать вопросы по теме с хэштегом #вопрос, как и в остальных наших чатах.

@slashdesigner #чаты #AI_дизайн #Midjourney

/designer

12 мая 2023 19:08

Интервью с Настей Мироновой, продуктовым дизайнером из Whatsapp

Под конец недели делюсь выпусками «Форточку Открой» для прослушивания на выходных.

Это годный подкаст про IT и макретинг, который ведут Даша Никулина и Никита Остапчук. Ребята взяли большое аудио-интервью у Насти, в котором обсудили её взгляд на дизайн, карьеру и переезд в Лондон.

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


Часть 1: Apple Podcasts, Яндекс Музыка, Spotify, 29 минут

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

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

Спустя полгода после первого собеседования она попала в команду мессенджера Whatsapp и вот уже год работает над этим продуктом.


Часть 2: Apple Podcasts, Яндекс Музыка, Spotify, 27 минут

Во второй части о взгляде Насти на дизайн, чем отличаются плохой и хороший дизайнер и в чём можно черпать вдохновение, когда привычная красота в стиле «сlean UI» уже надоела.

Канал подкаста в Телеграме: @fortochkuotkroi →

@slashdesigner #полезная_реклама #интервью #для_профи

/designer

08 мая 2023 12:31

#UX_задача №3. Добавление контакта в Zoom

Клиент: Zoom
Приложение: Zoom Desktop Client for macOS

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

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

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


Итак, джоб-стори:

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

Открыть в Figma →

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

Предыдущие разборы: Получение ИИН, Подключение наушников к двум устройствам.

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

@slashdesigner #для_профи #UX

/designer

04 мая 2023 13:29

Файл в Community →

/designer

04 мая 2023 13:28

Анимация градиентов №1, подробнее

/designer

27 марта 2023 15:01

Продолжение лекции «Шрифт и иллюстрация»

Новый выпуск: 4. Способ 3. Иллюстрация + текстовый блок

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

@slashdesigner #первые_шаги #типографика

/designer

13 марта 2023 11:16

Лекция «Шрифт и иллюстрация»

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

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

Для удобства чтения материал разделён на 4 части, которые будут публиковаться с интервалом в неделю. Уже доступны первые две:

1. О неочевидном

2. Способ 1. Буква как объект изображения

3. Способ 2. Когда шрифт и изображение — субъекты одной композиции
20 марта 2023

4. Способ 3. Иллюстрация + текстовый блок
27 марта 2023

PS — к сожалению, slashd.ru теперь заблокирован в Украине, видимо со всей зоной .RU. Для доступа к материалу можно использовать Тор.

@slashdesigner #первые_шаги #типографика

/designer

10 марта 2023 12:55

Ещё один забавный дизайн-ляп про внимание к деталям

В продолжение темы про дизайн-ляпы.

Мне маркетинговое пришло письмо от платформы faderpro.com, на которой обучают музыкальному продакшну.

Заголовок: «Давай, расскажи нам, как мы можем тебе помочь»

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

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

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

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

Для этого нужны UX-тесты, на которых такие детали обязательно вылезут.

@slashdesigner #первые_шаги

/designer

24 февраля 2023 08:37

24 февраля. #НетВойне

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

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

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

Санкции закрывают россиянам возможности учиться и найти хорошую работу. Мешают оплачивать Фигму и другие IT-продукты с российских карт. Вынуждают использовать VPN для доступа к сайтам. О санкциях писал здесь: как дизайнеры в России могут решить проблемы с инструментами.

В крупных российских компаниях закрыт найм и стажёрские программы, бюджеты сокращаются. Приложения крупнейших российских банков удаляются из App Store и Google Play, что понижает безопасность пользователей. Лучшие специалисты целыми командами уезжают из страны без планов вернуться. Кстати, границы до сих пор открыты.

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

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

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

Поддержать Дом с Маяком →

@slashdesigner #помоги_беженцам

/designer

10 февраля 2023 06:04

Про типографику в дизайн-системах

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

1. Какие платформы собираемся поддерживать: iOS, Android, Web, macOS, Windows. Всё это совершенно разные миры, которые трудно синхронизируются.

2. Является ли какая-либо из них доминирующей для нашего продукта? На всех стульях не усидеть. То, что изначально опирается на iOS, может деградировать для веба или Android, и наоборот, не использовать потенциал iOS, например, поддержку Dynamic Type.

3. Собираемся ли делать дизайн на базе единого шрифта или единой шрифтовой пары для всех систем? Готовы ли отказаться от гайдов и классных возможностей определённых систем (вариативные шрифты на Android и в вебе против Dynamic Type на iOS).

4. Собираемся ли мы использовать семантическую систему или абстрактную, основанную только на размерах? Смешивать их нежелательно. Одна только абстрактная шкала недостаточно себя объясняет и может быть сложно понять, какой стиль правильно использовать в каком месте. Слишком жёсткая семантика раздувает список стилей и приводит к дублям.

5. Что будет, если потребуется добавлять новые стили между существующими? Например, между H1 и H2. Не будут ли они ломать шкалу стилей? А что будет, если в шкале появляются разные модификации стилей, вроде normal, medium, bold?

Здесь ответом может быть внедрение нескольких слоёв токенизации, которые между собой не смешиваются, а существуют параллельно, например: body.500-heavy, где body — семантика, 500 — условный средний размер по шкале размеров, а heavy — font-weight по абстрактной шкале.

@slashdesigner #дизайн_системы #для_профи

/designer

05 февраля 2023 14:36

#UX_задача №2. Подключение двух устройств к одним наушникам. Решение

В часовом видео разобрал текущий дизайн из приложения Sony Headphones Connect. Составил схематичные флоу и предложил 4 варианта, как улучшить существующий опыт.

Видео: https://youtu.be/ObtcYOFuHgU →

Исходная задача

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

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

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

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

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

@slashdesigner #для_профи #UX

/designer

03 февраля 2023 05:52

#дайджест за январь 2023

Январь получился плодотворным на контент. Чтобы ты ничего не пропустил, я собрал посты прошлого месяца:

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

Ковыряем ChatGPT и про отличие гайдов Apple и Google и удивляемся, что он сечёт

Актуализируем темы канала на год — можно посмотреть, что наиболее интересно читателям и о чём будем писать

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

Видео: UX-задача №1 про выдачу ИИН, решение — первое видео после долгого перерыва в эфире, за полчаса набросал решения по улучшению опыта

UI: фэнси переключатель тёмной темы на SwiftUI с разбором реализации от автора

Копилка UX-задач для новой рубрики, здесь собираем новые задачи для будущих видео.

@slashdesigner