Дизайн
Yury Vetrov
4625

Adobe Photoshop, Affinity Designer для iPad, Sketch 51 и другие новые инструменты для дизайнера интерфейсов

Подборка от руководителя портальной дизайн-команды Mail.Ru Group Юрия Ветрова.

В закладки

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

Ещё один новый инструмент дизайна, который играет на поле Figma ― одновременная работа нескольких дизайнеров в браузере. Заявлен весь комплект современных возможностей (прототипирование, обсуждение экранов, адаптивность, символы и компоненты). Из новых идей — поддержка нескольких языков в макете, экспорт макетов в код и загрузка на сервер, быстрый просмотр на телефоне через QR-код. Анонс от создателей.

Теперь стили можно добавить в библиотеки. Много небольших доработок по прототипированию и основному интерфейсу. Плагин:

  • Timeline 2.0: надстройка от Anima стала ещё мощнее и сделала упор на интерактивные компоненты, код которых можно выгрузить (пока голый HTML, CSS, JS, но обещают React, VueJS, Angular, Lottie, iOS и Android).

Вышла планшетная версия приложения. Сейчас можно купить со скидкой 30%. Кстати, можно почитать пошаговое руководство по работе с инструментом от Изабель Аракамы.

Bloomberg вбросил информацию, что на Adobe MAX 2018 этой осенью покажут полноценную версию для планшетов (сейчас есть простецкий Photoshop Express). Источники анонимные, так что это всё ещё не точно.

Добавили инструмент для описания пользовательских сценариев. Здорово, что не нужно мучаться с этим в каком-нибудь Sketch или создателе ментальных карт.

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

InVision

Вышла вторая версия мобильного приложения. Можно комментировать на планшетах и телефонах с помощью Freehand, быстро открывать прототипы Studio через QR-код.

Ещё один инструмент для тестирования адаптивных сайтов в браузере. Стивен Хей, один из ключевых авторов на тему, считает его одним из лучших.

Онлайн-сервис помогает сделать эффектную подачу куска кода.

Инструмент помогает делать эффектную подачу макетов интерфейса. Обзор.

Ещё один инструмент для эффектного оформления экранов интерфейса.

Firefox

Появился инструмент для анализа accessibility сайта.

Overflow

Мощный пример того, что можно делать в инструменте.

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

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

Написать
{ "author_name": "Yury Vetrov", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 5, "likes": 28, "favorites": 47, "is_advertisement": false, "subsite_label": "design", "id": 42012, "is_wide": false, "is_ugc": true, "date": "Mon, 16 Jul 2018 20:12:22 +0300", "is_special": false }
0
{ "id": 42012, "author_id": 8729, "diff_limit": 1000, "urls": {"diff":"\/comments\/42012\/get","add":"\/comments\/42012\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/42012"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
5 комментариев
Популярные
По порядку
4

Пересел на Фигму две недели назад (и пересадил отдел) и теперь вообще не понимаю почему люди до сих пор используют Скетч. Ради поддержки предыдущих проектов приходится возвращаться время от времени обратно и это натурально "смерть от тысячи порезов" :(

Ответить
0

я пробую своих пересадить но это на месяцы затянется. Делал презентацию возможностей Фигмы и вроде есть подвижкИ, но все проекты у нас в фотошопе и никуда от этого не денешься. Боль, вообщем.

Ответить
1

Надо просто взять и сделать следующий проект в Фигме. Не думать, а сделать.

Месяц-два придется прыгать туда и обратно, народ будет ныть, но когда увидят как выросла скорость и эффективность работы (и не только дизайнеров, но и разработчиков), сами попросят добавки :)

Ответить
0

я именно так и поступил)
сейчас делаем в Фигме несколько проектов, в целом только позитивные эмоции у всех)

Ответить
1

PersP выглядит весьма интересно. Смесь фигмы и вебфлоу.

Ответить
{ "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": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "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, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }