web 2.0

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

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

Традиционный дайджест директора по дизайну 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.
  • 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 — спасибо всем, кто помогает наполнять её. Вы также можете получать свежие обзоры по почте.

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

Написать

Добавить комментарий