Дизайн-печь 🔥 Ваня Емелюшкин – 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
​​Тогда я всё осознал, обдумал и поменял своё отношение к обзорам. Человек проделал огромную работу, постарался и у него есть хорошие решения. Недостаточно, чтобы назвать работу великолепной, но провальной её назвать нельзя. Надо признать его усилия, уважать его время. Такое даже толстокожим дизайнерам будет приятнее.
​​Если критикуете

1. Уважайте время и усилия, потраченные на работу
2. Обоснуйте критику
3. Предложите решение

По теме:
Кнут и пряник. Максим Ильяхов
http://maximilyahov.ru/blog/all/knut-i-pryanik/

Спасибо, пожалуйста. Максим Ильяхов
http://maximilyahov.ru/blog/2013/01/07/1/

Кнут и пряник. Илья Бирман
Тут Бирман как раз говорит обратное, мол, нечего сопли распускать. Он прав, но я призываю всё же быть помягче.
https://ilyabirman.ru/meanwhile/all/knut-i-pryanik/
Как создать продуктовую страницу

Берём всю информацию, что у вас есть и составляем по плану:

1. Что продаём
Название товара или сервиса.

2. Как это работает
Польза для клиента. Фотографии, описание как это прекрасно, счастливые люди, характеристики, вот это вот всё.

3. На каких условиях продаём
Цена, подписка, доставка, упаковка, и т.д.

4. А что если что-то пойдёт не так? Работа с ожиданиями
Ответы на вопросы, гарантии

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

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

7. Действие. Должно быть видно постоянно, а не только в конце.
Большой финальный блок в конце для тех, кто дочитал. Пусть выглядит как награда за весь пролистанный путь. Купить, заказать, подписаться…

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

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

Посмотрите на Шопфанс. Один из моих любимых проектов в Бюро. Очень журнально. Казалось бы ничего такого, но обратите внимание на подачу информации. Она именно такая же как в плане и применима к любой другой странице. Товары в Яндекс. Маркете, Беру, Алиэкспрессе сделаны по тому же принципу.

Шопфанс https://shopfans.ru/carters/

Страница товара в Яндекс.Маркете https://market.yandex.ru/product--smartfon-apple-iphone-11-128gb
​​Зачем хранить старые работы и мысли

Жееесть. А ведь я это ещё в портфолио хотел выставить. Хорошо, что руки не дошли. Ладно, че место занимает, — подумал я и удалил все свои наработки за первые 2 года работы. Это была ошибка.

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

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

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

https://news.1rj.ru/str/designrookie
Шутка от подписчика в ответ. Жиза т_т
​​Пустой экран как точка старта, а не тупик

Вот заходишь на Беру в 2017 в корзину, а там пусто, ничего нет. Ну нет и ладо, пойду дальше по своим делам, пока Беру.
​​В 2019 году в пустой корзине полнее не стало, но вот тооочно, забыл кондёр купить и кофе кончается. А ещё какие-то акции есть (почему-то по кнопке), интересненько.
Наполняйте пустые экраны, чтобы люди с них сразу не уходили, повышался отклик, сервис выглядил полнее.

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

Нет заметок? Создайте заметку с полезными советами по фишкам приложения!
В поиске ничего не нашлось? Просто посмотрите что у нас есть!
404? Тут ничего нет, но у нас есть новости и акции. Смотрите!
Как рассчитать время прочтения статьи

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

Время на чтение статьи рассчитываем так:
Средняя скорость чтения взрослого человека — 1500 знаков в минуту. Если взять количество знаков в статье и поделить на 1500, получим количество минут. Каждая картинка прибавляет к общему времени +0,2 минуты. Округляем до большего целого числа уже после 0,3 включительно. Запас взят, чтобы не сильно обманывать ожидания людей, что читают медленнее среднего.

Например у нас есть статья на 4315 знаков с двумя картинками.

4315/1500=2,87
2,87+0,2×2 картинки= 3,27

Округляем до 3 минут чтения.

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

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

https://habr.com/en/post/223705/
Адаптивные иконки от гугла

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

Соль
Теперь разрабам нужно отдавать отдельно фон и главный элемент на иконке. В формате noscript. Размер 108×108, но вписана иконка дожна быть в 72×72. Если так не делать, то ваша восхитительная квадратная иконка на андроид будет подпирать углами круг.

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

В статье показано какие крутые теперь иконки у гугла, есть исходник для Скетча, Фигмы, Иллюстратора и даже Аффинити. Кроме того, есть приложение, чтобы поиграться с иконками.
https://medium.com/google-design/designing-adaptive-icons-515af294c783
Вот такой геометрический ребус можно словить, если забыть адаптировать иконку.
О как круто показана плотность записей на квест. Сразу видно когда больше шансов попасть на нужное время.

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

Такой календарь был бы полезен при записи к конкретному стоматологу или СТО.
— Давай это сделаем как у Эппл
— А не пойти бы тебе…


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

Сделать поиск, как в календаре, чтобы сверху появлялся — это нестандартно. Низкий селект — тоже. Карточки, как в эпп-сторе — Пфффф. Оказалось Эппл даёт разработчикам весьма скудный набор стандартных компоненов, которые почти никак нельзя изменять. Любое отличие дизайна от стандарта означало, что разработчик будет писать компонент с нуля.

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

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

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

https://designpub.ru/как-рассчитать-время-прочтения-статьи-3e1819e36769
Кастом или натив

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

Нативный:
1. Будет работать быстро, сразу, из коробки. Если он глючит, то глючит сразу по всей системе.
2. Работает только так, как его придумали разработчики Эппл или Гугл.
3. Добавить его очень быстро.
4. Ему нельзя добавить поведение или сильно изменить внешний вид. В iOS у него вообще почти никак не изменить внешний вид.

Кастомный, нестандартный:
1. Будет работать как напишут. Могут быть баги в зависимости от версии оси, ориентации телефона, фазы луны, чего угодно
2. Работает так, как его придумал создатель. Можно найти элемент в интернете и разбираться в том, как его кто-то создал, а можно его написать самому.
3. Если писать самому — это долго. А может и нет, спросите у вашего разработчика. Одно ясно — нужно придумать все состояния: активный, заблокированный, с длинными надписями, короткими, иконками, заливкой, выбранный, не выбранный, маленький, большой, на нажатие, при загрузке.
4. Зато полный контроль над поведением и внешними видом, максимальная творческая свобода.

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

И почаще общайтесь с разработчиками.
This media is not supported in your browser
VIEW IN TELEGRAM
Обычно, снежок на сайте под Новый год — пошлый ход, но у 2ГИС вышло невероятно уютно. А ещё можно настроить силу снегопада.

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

https://2gis.ru/
Кинопоиск подвёл свои итоги года. Зацените как минимум ради хайпового дизайна — на каждый элемент можно навести, он подвигается, перельётся. Любое действие приведёт к шутке или вспомнит мем уходящего года.
https://www.kinopoisk.ru/special/itogi2019/