Дизайн Yury Vetrov
4 339

Обзор трендов от Awwwards, дизайн-система «ВКонтакте» для мобильных приложений и другие важные новости дизайна за апрель

Традиционный дайджест директора по дизайну Mail.ru Group.

В закладки

1. Web Design Trends 2019 — Voice Interfaces, Image Search, Fortnite, Alexa and other crazy things that are rocking our world

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

2. Spectacle — The Best Video Marketing Inspiration

Коллекция хороших видеопрезентаций продуктов и их обновлений.

3. Designing Our Design Systems Team

Бен Листер рассказывает о создании дизайн-системы Sprout Social и о том, как менялась её команда. Как это часто бывает, это началось с группы энтузиастов, выделявших 30% времени на работу над ней, но постепенно сформировалась полноценная выделенная группа. Очень крутой пример того, как эволюционирует такая команда с чётко описанными проблемами, целями и задачами.

4. UX Responsibilities in Scrum Ceremonies

Шикарнейшая памятка для дизайнеров, работающих в agile-процессе, от Анны Кейли из Nielsen Norman Group. Она показывает, как эффективно участвовать во всех встречах и планёрках, которые достаточно интенсивны в каноническом подходе.

5. VKUI Styleguide

Дизайн-система «ВКонтакте» для мобильных приложений. Поддерживает тематизацию на базе токенов (репозиторий). Михаил Лихачёв рассказывает о создании тёмной темы для мобильных приложений. Для этого им потребовалось перевести часть переменных на токены, так что улучшили основу для дизайн-системы.

6. Design recommendations to improve digital payment experience

Адил Сиддикви собрал наглядные рекомендации по дизайну мобильных интерфейсов оплаты. Все примеры сопровождаются анимацией в контексте.

7. Новые инструменты дизайна

  • Sketch 54: революций нет, улучшение тёмной темы, направляющих, вставки картинок и символов. Sketch Lint приносит идею линтинга для проверки макетов на соответствие основным параметрам дизайн-системы. Он подсвечивает нестыковки в элементах интерфейса.
  • Команда Google Earth выпустила инструмент, который позволяет собирать видео пролёта над городами на основе своих карт.
  • Framer X: наконец-то вышел Framer Bridge, позволяющий подключить компоненты из технологического фреймворка. Они синхронизируются с компонентами Framer (которые теперь используют Git для версионирования).
  • Figma: обзор работы с сетками.
  • Сравнение Sketch, Figma и Adobe XD по ключевым функциям от Ашиша Богаварта. Хороший способ быстро разобраться для тех, кто знает только один продукт.
  • Наклейки на клавиатуру с горячими клавишами Sketch, Figma и Photoshop.
SketchKeys
  • Adobe XD: коллекция бесплатных иллюстраций.
  • Sheet 2 Site: вторая версия генератора простых сайтов из Google Sheets. Масса новых шаблонов и важных интеграций.
  • Hawkeye: мобильное приложение позволяет тестировать сайты на iPhone с помощью eye tracking. Само собой, нужен телефон из последних поколений.
  • Geenes: наглядный сервис для подбора цветовой палитры для интерфейса. Сразу примеряет их на абстрактный экран мобильного приложения.
  • Awesome Design Tools: неплохой каталог инструментов дизайна по разным категориям.
  • Workbench Suite: пачка простых инструментов для работы над макетами — нарезка нужных размеров, тегировние, мета-теги, создание цветовой палитры из фото и другие.
  • Vector Flow: процедурный инструмент для работы с векторной графикой. В формате, похожем на Origami, вы выстраиваете ноды и их зависимости, в итоге получаете генеративную иллюстрацию.
  • Dislack: ещё один конструктор форм. Собирает и хранит введённые данные.
  • Moleskine Studio: Moleskine запустила своё приложение для набросков на планшете.
  • Speak Human: генератор рыбных интерфейсных текстов, которые правдоподобны.
  • Plectica: ещё один инструмент для совместной работы в цифровом аналоге маркерной доски. Диаграммы, ментальные карты, концептуальные модели и всё такое.

8. Why You Should Measure UX Attitudes

Джефф Сауро описывает способы оценить отношение к бренду по трём критериям: убеждения, чувства и предполагаемое поведение. Оценки в рамках каждой категории могут быть противоречивыми, но этим они и важны для сфокусированной работы над продуктами.

9. Design Leadership Notebook

Деннис Хамбойкерс запустил блог о дизайн-менеджменте, где описывает своё видение системного развития дизайна в компаниях (до этого он вёл аналогичный блог по проектированию услуг).

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

10. (Value ÷ Effort) x Confidence = Priority

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

11. Andy Clarke — Art Direction For The Web

Smashing Magazine выпустили книгу Энди Кларка "Art Direction for the Web". В ней рассказывается о возможностях современных технологий по эффектному представлению брендов в вебе. Одна из статей показывает, какую эффектную журнальную вёрстку можно сделать с помощью CSS Shapes.

12. Новая «Почта Mail.ru» и при чём тут осьминог

Артём Гладков рассказал о редизайне «Почты Mail.ru». Статья — об истории работы над восьмой версии продукта, принципах дизайна, первоначальных концептах, заложенных идеях и их обкатке на пользователях.

13. From Like Buttons to Message Bubbles — The UX Designs You Can’t Use

Кристи Тэнь изучила и описала интерфейсные патенты крупных технологических компаний. В подборке: Apple, Facebook, Microsoft, Snapchat, Samsung, Netflix, Airbnb, Tinder.

14. Building to learn ― The role of prototyping in Design

Шикарная статья Кристиана Кантрелла из Adobe о том, как дизайн-команда использует прототипы для лучшего понимания проблемы и улучшения интерфейса. Он подробно рассказывает о задачах, которые решает прототип в сложной продуктовой работе.

15. Journey Mapping — 9 Frequently Asked Questions

Толковые советы Алиты Джойс и Кейт Каплан из Nielsen Norman Group по созданию customer journey map. Стоит ли разбивать карту на несколько частей, как вовлекать недизайнеров, какие исследования проводить и другие полезные вводные.

16. Sympathy vs. Empathy in UX

Сара Гиббонс из Nielsen Norman Group пишет об отличиях симпатии и эмпатии. Дизайнеры не всегда используют эти термины правильно, а где-то путают с жалостью и состраданием.

17. Rebranding as a distributed team — How we collaborated with a design agency

Егор Коробейников рассказывает о ребрендинге RealtimeBoard, ставшего впоследствии Miro. Неплохо и достаточно подробно о процессе и ключевых этапах. Барбара Гаго — о предпосылках ребрендинга и использовании бренд-спринта.

18. How a Team Matures Its User Research Integration

Джаред Спул предлагает модель зрелости пользовательских исследований в команде. Его важное уточнение: зрелость имеет смысл оценивать именно у конкретной команды, а не организации в целом.

19. Give Your Research Skills Away — Why Coaching Product Teams Won’t Put You Out of a Job

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

20. Lisa Maria Martin — Everyday Information Architecture

A List Apart выпустили в апреле 2019 книгу Лизы Марии Мартин "Everyday Information Architecture". Они публикуют отрывок из четвёртой главы.

Читайте полную версию дайджеста в моём блоге. В нём, как обычно, много новых материалов по дизайн-системам, инструментам дизайна, трендам, пользовательским исследованиям и ещё тонна всего. За свежими ссылками также можно следить в группе на Facebook или во «ВКонтакте», канале в Telegram — спасибо всем, кто помогает наполнять её. Вы также можете получать свежие обзоры по почте.

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Yury Vetrov", "author_type": "self", "tags": [], "comments": 4, "likes": 36, "favorites": 156, "is_advertisement": false, "subsite_label": "design", "id": 67211, "is_wide": false, "is_ugc": true, "date": "Tue, 14 May 2019 17:41:02 +0300" }
SMS-чат для клиентов
{ "id": 67211, "author_id": 8729, "diff_limit": 1000, "urls": {"diff":"\/comments\/67211\/get","add":"\/comments\/67211\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/67211"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }

4 комментария 4 комм.

Популярные

По порядку

3

Автор благодарю за большой труд и ваши статьи на VC. Они действительно полезные.

Ответить
1

Спасибо!

Ответить
2

Юра, ты это сам все готовишь?

Ответить
2

Читаю и собираю дайджест сам, уже почти 10 лет :)

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Компания отказалась от email
в пользу общения при помощи мемов
Подписаться на push-уведомления
{ "page_type": "default" }