Hi-Tech

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

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

Свежее

Вакансии

Написать

Уведомлений пока нет

Пишите хорошие статьи, комментируйте,
и здесь станет не так пусто

Войти

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

В закладки

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

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

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

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

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

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

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: ещё один инструмент для совместной работы в цифровом аналоге маркерной доски. Диаграммы, ментальные карты, концептуальные модели и всё такое.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Написать

Блоги компаний

Показать еще

Push-уведомления

{ "page_type": "article" }

["\u041d\u0435\u0439\u0440\u043e\u043d\u043d\u0430\u044f \u0441\u0435\u0442\u044c \u043d\u0430\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0447\u0438\u0442\u0430\u0442\u044c \u0441\u0442\u0438\u0445\u0438
\u0433\u043e\u043b\u043e\u0441\u043e\u043c \u041f\u0430\u0441\u0442\u0435\u0440\u043d\u0430\u043a\u0430 \u0438 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u043e\u043a\u043d\u043e \u043d\u0430 \u043e\u0441\u0435\u043d\u044c","\u0425\u0430\u043a\u0435\u0440\u044b \u0441\u043c\u043e\u0433\u043b\u0438 \u043e\u0431\u043e\u0439\u0442\u0438 \u0434\u0432\u0443\u0445\u0444\u0430\u043a\u0442\u043e\u0440\u043d\u0443\u044e
\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0443\u0433\u043e\u0432\u043e\u0440\u043e\u0432","\u0413\u043e\u043b\u043e\u0441\u043e\u0432\u043e\u0439 \u043f\u043e\u043c\u043e\u0449\u043d\u0438\u043a \u0432\u044b\u043a\u0443\u043f\u0438\u043b
\u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044e-\u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u044f","\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435-\u043f\u043b\u0430\u0446\u0435\u0431\u043e \u0441\u043a\u0430\u0447\u0430\u043b\u0438
\u0431\u043e\u043b\u044c\u0448\u0435 \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u0430 \u0440\u0430\u0437","\u041a\u043e\u043c\u043f\u0430\u043d\u0438\u044f \u043e\u0442\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043e\u0442 email
\u0432 \u043f\u043e\u043b\u044c\u0437\u0443 \u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043c\u0435\u043c\u043e\u0432","\u041a\u043e\u043c\u0430\u043d\u0434\u0430 \u043a\u0430\u043b\u0438\u0444\u043e\u0440\u043d\u0438\u0439\u0441\u043a\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430
\u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u044c\u044e"]

Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень

Подписаться на push-уведомления

Показать больше

Похожие статьи

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть