Дизайн-печь 🔥 Ваня Емелюшкин – Telegram
Дизайн-печь 🔥 Ваня Емелюшкин
1.78K 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
О том как я косячил как руководитель

Я хотел вам рассказать историю, а получилась целая пачка. Растяну на пару месяцев, чтоб интереснее было. Первая история — завтра утром. А пока затравка.

Когда мне было только месяцев 7, как дизайнеру, мне дали в подчинение совсем зелёного новичка, потом ещё одного и ещё. Так, спустя всего 1,5 года в профессии я обнаружил у себя команду в 15 человек, йо-хо-хо и бутылку рома. Я ничего не знал о том, как быть хорошим руководителем и косячил напропалую. Тогда мне помог блог Александра Ложечкина. Каждая его история откликается во мне болезненным жизненным опытом, о котором я буду рассказывать. Если у вас недавно появился подчинённый — не ждите моих рассказов о косяках, листайте блог Александра в самый низ и впитывайте мудрость.

Жаль, но заметки уже год как перестали регулярно выходить =(
https://medium.com/@allo

Ошибки начинающего руководителя
https://medium.com/@allo/о-17-типичных-ошибках-начинающих-руководителей-a00b04623e43

Ошибки опытного руководителя
https://medium.com/@allo/о-17-ошибках-опытных-руководителей-6a05cc307663
Как я замкнул всю работу на себе и разорвался

У нас в отделе была такая иерархия:
1. Начальниник отдела
2. Руководитель направления
3. Тимлид
4. Миддл
5. Джун

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

Краткий план моего новичка на день мог выглядеть так:
1. Ознакомиться с ТЗ
2. Собрать референсы
3. Нарисовать наброски
4. Показать референсы и наброски Ване (это я)
5. Исправить и повторять пункт 2—5 пока Ваня не скажет «норм»
6. Нарисовать первый экран, показать Ване
7. Нарисовать остальные, показать Ване
8. Показать разработчику, собрать замечания, посоветоваться с Ваней
9. Вместе с Ваней разобрать замечания и доделать работу

Я понимал, что без жесткого плана, результат будет удручающий. Пока джунов было только 3 — я справлялся, когда 8 — стало тяжко. На 10 джуне я понял, что весь день только и делаю, что контролирую и советую. Без меня работа не шла, я был очень важен, мои джуны не знали что делать, если я опаздывал на работу. Это была самая главная проблема. Я почти не рисовал, работа перестала приносить радость, я начал путаться в показаниях. Наступила бесконечная жопа контроля.

К моменту самой жопы, я был уже тимлидом.

Решение я нашел радикальное — ограничил время согласований до двух часов в день: с 12 до 13 и с 16 до 17. Я просто отключал уведомления и, если ко мне подходили с несрочным вопросом, отправлял ждать. Кроме того, я скинул контроль за джунами полностью на миддлов.

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

Не сразу, но постепенно я всё меньше замыкал процессы на себе. Спустя месяц, я тратил на команду 40 минут в день, вместо 4–6 часов. Тогда я понял, что главная задача руководителя наладить процесс так, чтобы стать ненужным.

По теме:
https://medium.com/@allo/о-главной-задаче-руководителя-69b8de225f1b
Мои лучше заметки за последний год
Если вы на канале недавно, они помогут понять о чём я пишу и решить насколько канал интересен.

Что делать, если статьи и книги по дизайну больше не приносят удовольствия
https://news.1rj.ru/str/Design_fire/554

Как выровнять цвета по тону. Несколько записей подряд
https://news.1rj.ru/str/Design_fire/591

Нельзя просто взять и сделать как в другом продукте
https://news.1rj.ru/str/Design_fire/598

Как дизайнеру найти задачи
https://news.1rj.ru/str/Design_fire/631

Зачем хранить старые работы и мысли
https://news.1rj.ru/str/Design_fire/646

Пустой экран как точка старта, а не тупик
https://news.1rj.ru/str/Design_fire/649

Критикуешь — не жести
https://news.1rj.ru/str/Design_fire/652

Нативные и кастомные элементы. Каюсь, называл нативные элементы стандартными, но это немного неверно.
https://news.1rj.ru/str/Design_fire/661

Любой процесс сложнее, чем выглядит сначала
https://news.1rj.ru/str/Design_fire/665

Правила, чтобы не выгореть
https://news.1rj.ru/str/Design_fire/701

Как устроены тени в Андроиде и что с этого дизайнеру
https://news.1rj.ru/str/Design_fire/706

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

🧐О чём речь
В iOS три элемента, похожих на карточки:
1. Карточка
2. Шторка
3. Карточный вид.

🧑‍💻Как делают
Карточка — простой кастомный элемент. Это значит, что разработчику либо придётся писать с нуля, либо искать библиотечку. Если вы хотите сделать карточку «как в App Store», то придётся описывать как работает карточка, следить, что анимация по времени такая же, тень пушистая, карточка нажимается сразу при тапе и т.д. Благо, карточка делается не сильно сложно и любой iOS разработчик сможет её сделать.

Шторка — сложный кастомный элемент. Хоть она появилась в приложениях Apple (Карты, Команды, Акции), в стандартные компоненты её не добавили. Значит разработчик будет делать с нуля или возьмёт готовую библиотеку. Проблема готовых библиотек, в том, что их надо проверять. Возможно, что библиотека написана криво и в ней что-то отвалится с выходом новой версии Оси.

Карточный вид — нативное представление для экрана. Разработчик может сделать такое за 5 минут. Есть ограничения: 
1. Пипки сверху, за которую можно сворачивать окно по-умолчанию нет. Её можно добавить наверх карточки, но это будет непросто. Почему эппл её не сделали — не знаю. 
2. Свайпать экраны в карточном виде нельзя.
3. В iOS 12 нет карточного вида. В iOS 12 экран будет на всю высоту.
Если вам нужно выйти за ограничения, то опять же писать с нуля.

😎 И что теперь
Обсуждайте дизайн с разработчиками до того, как покажете заказчику. Если до релиза неделя, то шторку скорее всего не сделают, а вот карточку успеют. А может разработчик новичок и не справится и с карточкой. Просите оценить разработчиков сложность реализации и сколько времени это займёт. Спросите какие баги могут вылезти. Возможно, что для него в норме вещей будет, что заголовок будет дергаться, но узнаете вы об этом только после недели реализации.
Открывать поиск по свайпу вниз — невероятно удобная фишка. Не надо тянуться пальцем наверх, а если свайпнул случайно, то просто скроллишь вниз. Свайпом вниз искать быстрее. Надеюсь, Эппл тоже такую фишку введут на уровне оси.
Приложения Things и Bear
#ux_мелочи
500 человек. Ух ты!
Ребят, вы классные. Приятно, что вас так много. Надеюсь, вам полезно, что я тут пишу.
Пост для комментов и предложений
Вот это битва! То второй пункт обгонял, то третий. Я вижу, что у вас есть интерес к нежным линчам. Кидайте свои работы в личку @Nordicus, я буду их смотреть по одной и раз в неделю показывать на канале =)

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

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

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

Или когда приходит не тот товар, а оказывается, что ты не заметил скромную «читать описание» рядом с фотографией.
Я каждый раз туплю на Юле, когда нужно изменить объявление. Они спрятали кнопку в троеточие, хотя Снять с публикации и Сделать скидку вшиты в само объявление. Можно было бы избавить от троеточия и написать понятное Изменить.
🤷‍♂️Почему так происходит

Дизайнер не разобрался
Маркетолог проводит исследование рынка и видит, что кнопки «поделиться в соцсеть» под товаром в интернет магазине увеличивают возвраты клиентов. Клиенты кидают их сами себе в сообщения и возвращаются за товаром. Ставит задачу дизайнеру. Дизайнер думает «да ну, фигня какая! Если клиент захочет — скопирует ссылку и отправит сам себе! Я так не делаю, да кому это вообще надо?!» и ставит кнопку где-то еле-заметно сбоку. Т.е. формально задача выполнена, но ничего переделывать не надо.

Дизайнер поленился
Пришел дизайнеру важный текст описания, а у него в макете больше трёх строк некрасиво смотрится. Он делает кнопку «смотри далее» и отдаёт в продакшн. Однажды я покупал 2 книги, а мне пришло 3. В описании было сказано, что первая книга идёт в комплекте со второй. Да, эта информация была спрятана под раскрывашкой.
По тексту видно, что это СЕО-текст, но в нём есть польза — ясно что материал непромокаем, есть наклейки. Места на странице много. Почему не показывать сразу?
😎 Что делать

Разбираться и общаться
Если бы дизайнер знал об исследовании маркетолога, то они бы посмотрели через какие соцсети больше регистраций, провели А/Б -тесты замерили конверсии. Для этого дизайнер должен был разобраться в задаче. Может и исследования не было и менеджер просто так ляпнул, а на сайте кнопка появилась.

Помнить о лени и внимании:

1. Скролл требует меньше усилий чем клик. Лучше сделать страницу длиннее, чем утыкать раскрывашками.
2. Времени мало. Большинство людей просматривают страницу бегло, цепляясь глазом за акценты, что создал дизайнер. Они не прочтут информацию, скрытую за блеклой кнопкой «подробнее».
Хороший пример, когда дизайнер мог показать всю информацию, но вместо этого заставляет на неё наводить мышкой
https://www.essential.com/phone
This media is not supported in your browser
VIEW IN TELEGRAM
Интеренсый способ сделать стрелку видимой и на тёмных и на светлых картинках — добавить ей белой обводки.

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

Простите, не записал где я это видел.
#ux_мелочи