Дизайн-печь 🔥 Ваня Емелюшкин – Telegram
Дизайн-печь 🔥 Ваня Емелюшкин
1.79K subscribers
585 photos
66 videos
556 links
Ваня Емелюшкин — Sr. Product Designer в ecom.tech. Дизайнил Самокат, Мегамаркет, InDrive, Ингосстрах, Альфастрахование, S7, Welltory

Про красивое https://news.1rj.ru/str/uigallery
Статьи https://dsgners.ru/user/ivan-emeliushkin

Связь @Nordicus
Download Telegram
Воу, я забыл аудиоверсию для сообщения про блюр. Исправляю ошибку
Ситуация с баннером. Что случилось

Дизайнер нарисовал первый баннер, а директор поставил второй. Дизайнеру обидно.
🤔1
Да как так то?!

Явно дизайнер и директор не договорились. Дизайнер слабо разобрался в задаче и сделал как себе представляет. Директор решил, что проще заказать новый баннер.

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

Что делать

Пойти к директору и разобраться. Узнать, почему он решил, что легче заплатить деньги второй раз, чем договариваться с дизайнером. Может быть всё, что угодно: директор самодур, дизайнер хам или же просто не подумали. А может директор решил сделать приятное сыну, который мечтает стать дизайнером и это его первый баннер?

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

Как не допустить такой ситуации?

Задавать вопросы, узнать задачу со всех сторон: Что за управляющая компания? Зачем ей баннер? Почему баннер решит эту задачу лучше всего? Почему баннер, а не лендинг? Почему в этом месте? А где он ещё будет показываться? Какой посыл передавать? Почему именно такой? Что в вашем понимании свежее и современное?
Отличные примеры вопросов задают в Бюро Горбунова https://bureau.ru/about/welcome/
А вот как верно их задавать https://maximilyahov.ru/blog/all/umnik-bl/
🔥2
Как не знать

Вот просишь дизайнера сделать нативное окно, спрашиваешь знает ли он что это? Знает, а рисует совсем не то. И так во всём. Такой дизайнер говорит, что всё знает, но результат доказывает обратное. Проще соврать и потом погуглить, чем признаться, что что-то не можешь. Расписаться в незнании — страшно. Он не созрел как профессионал.

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

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

Не знать — это нормально. Это честная оценка себя. Не нормально не искать ответов.
8
Дизайн-печь 🔥 Ваня Емелюшкин pinned «Скриншоты хороших решений Я завёл новый телеграм канал со скриншотами сайтов и приложений. Туда я буду постить решения, которые мне показались интересными. Это не просто свалка скриншотов, там я пишу на что именно обратить внимание, как работает решение и…»
Доверяй глазу
В разных книгах по типографике авторы дают противоположные советы на счёт длинного тире внутри диапазона. Одни советуют его склеивать с цифрами, другие отбивать небольшими пробелами. Я же советую всегда доверять глазу и смотреть что будет.

Слева мы видим Штайнбек. Ему точно нужен волосяной пробел между тире и цифрой. А вот Робото не нужен. А вот в СФ компакт пробел такой длины, что ему явно нужен воздух.

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

Почитать про тире https://type.today/ru/journal/dash
Про пробелы https://kirillbelyaev.com/s/ru/

P.S. Я поставил длинное тире в примере для наглядности. Какое тире ставить в диапазонах тоже зависит от вас. Старая школа советует длинное, новая - короткое. На деле же всё зависит от шрифта. Эти правила не отлиты в железе, доверяйте глазу.
9
Как сделать в iOS такое же расстояние между букв, как и в Фигме
Передавать в px

Если вы указываете расстояние в px, то оно будет соответствовать расстоянию в коде.

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

Получается такая формула
tracking = fontSize*trackingFigma

Например
tracking = 27*0,185 = 4,995 , что как раз визуально равно значению трекинга в 5px

Если вы об этом не задумывались, вполне вероятно, что в вашем приложении разработчики либо забили на треккинг, либо строят его на глаз.
🔥8
Дизайн-печь 🔥 Ваня Емелюшкин
Как сделать в iOS такое же расстояние между букв, как и в Фигме Передавать в px Если вы указываете расстояние в px, то оно будет соответствовать расстоянию в коде. Если у вас в системе проценты, то пусть разработчики умножают это значение на размер шрифта.…
Если вы Скетч-дизайнер или работаете в Фотошопе, то вам поможет статья от Редмадроботов. Ребята рассказывают как подружить значения из графических редакторов с кодом. Причём не только про трекинг, но и про интерлиньяж

Работать в фотошопе над интерфейсами — не стыдно. Например, игровые интерфейсы часто делают в фотошопе просто потому, что Фигма не умеет в нормальную работу с текстурами.

https://habr.com/ru/company/redmadrobot/blog/280029/
👍3
Разбираемся в нативе, понимаем разработку
Лучший способ ускорить дизайн и разработку под мобилки — разбираться что можно сделать стандартными средствами, а что нет.

Почитать что такое нативные компоненты
https://designpub.ru/натив-и-кастом-318d83675553

Сейчас будет пачка годноты
👍42
Для iOS

Ui Kit Lab
Самое кайфовое приложение со сборкой всех нативных компонентов. Можно тестировать их на прочность, добавлять свои тексты и стандартные иконки. Рекомендую всем там поиграться.
https://apps.apple.com/ru/app/uikit-lab/id1572751890?l=en

Interactful
Более сложное, но более подробное приложение. Однозначная годнота. Для каждого компонента есть описание кодом и ссылка на документацию. Можно даже выбрать на какую документацию ссылаться: для дизайнеров или разработчиков. Отдельно загляните на вкладку Foundations. Там шикарно показаны возможности настройки анимации, смешивания цветов и Если разберётесь с ними, сможете общаться с разработчиками на одном языке. Кроме того, есть версия на Mac OS
https://apps.apple.com/ru/app/interactful/id1528095640?l=en

Гайды Эппл
Они сильно обновились за последний год, стали куда подробнее и интереснее
https://developer.apple.com/design/human-interface-guidelines/foundations/overview
🔥2
Для Андроид
К сожалению, таких же годных приложений я там не знаю. Если есть что на примете — пишите в комментарии

Material Design Components
Неплохой сборник компонентов, но подглючивает
https://play.google.com/store/apps/details?id=io.materialdesign.catalog

Гайды Материал
Material 2. Старые гайды, актуально будет ещё лет 5, люди медленно переходят на новые андроиды https://material.io/design
Material 3. новые компоненты, новый дизайн, другая философия. Гугл добавляет персонализации и выглядит современнее
https://m3.material.io/