Для крутого дизайнера недостаточно просто красиво передвигать картинки. Широкий кругозор, прокаченная коммуникация с коллегами из смежных сфер, знание топовых инструментов — вот что определяет специалиста в крупной компании. Разбираемся на примере верстки, что должен уметь дизайнер и зачем.

Быть T-shaped дизайнером

Современные IT-компании нанимают T-shaped специалистов, которые гармонично сочетают широкий кругозор с углубленной экспертностью в одной из областей. T-shaped people прекрасно коммуницируют с профессионалами из смежных сфер, при этом обладая достаточным авторитетом в своей отрасли.

_{Соавтор: Кузнецова Юлия Андреевна - UX-писатель Экосистемы РСХБ}

Каким должен быть дизайнер в банке, чтобы и продукт хороший создавал, и коллеги не жаловались. Смотрим через призму софт-навыков вместе с UX-дизайнерами РСХБ.

Как мы пришли к SVGator.com

Digital-рынок сегодня насыщен хорошими решениями, тренды не стоят на месте, одним
из доминантных признаков качества становится анимация интерфейса. В рамках разработки группы продуктов Своё и банковских сервисов Россельхозбанка мы с командой рассматривали
различные решения.

Наш путь начался с lottie, как с более популярного сервиса. Ключевой недостаток: встроенная api. Нам хотелось найти более прагматичное решение без интеграции, поэтому выбор пал на SVGator. В наши цели попадало закрытие микроанимаций элементов интерфейса, оформительские детали и т.п.

Что за зверь и какие задачи решает

SVGator.com — это web-платформа для создания svg-анимаций, то есть svg-файлов со встроенными анимациями, которые без каких-либо проблем интегрируются в html. Можно задать последовательную обработку таких анимаций. Возможен экспорт как js, так и чистым CSS. Возможности js немного шире, но разница не существенная.

В рамках продуктов группы Своё мы создавали различные анимации для лоадеров, микроэлементов (таких как стрелка дропдауна), логотипов и элементов оформления. Мы ещё находимся на стадии экспериментов с SVGator, но уже чётко понимаем, в каких моментах он имеет преимущества и что можно создать с его помощью:

•  Небольшие функциональные элементы интерфейса. Например, интерактивные состояния компонентов и вытекающая микроанимация

•  Регулярные объекты, которые можно усилить посредством анимации. Например, логотипы, в частности, кейс с кастомизацией лого под праздники

• Элементы дизайна. Например, иллюстрации

Начало нового десятилетия – идеальное время, чтобы взглянуть на тренды прошлого и получить некоторые подсказки об индустрии будущего.

Одним из ведущих специалистов в области иллюстраций и их использования в коммуникациях является Джейми Кларк.

Кларк считает, что градиенты хоть и были на пике трендов в 2010-х, но к концу десятилетия их стали использовать более изощренно. «Я наблюдаю все больше градиентных иллюстраций – масштабных и соблазнительных. В правильных руках они способны создавать различные настроения – от эйфории до мрачной угрозы», утверждал иллюстратор. Он предлагал рассмотреть иллюстрацию Марли Галлардо  об устойчивом развитии в журнале Barron’s. В статье прослеживается склонность художника к сохранению жесткого контроля над палитрой, которая усиливает влияние на восприятие изображения.

Я же поделюсь своим опытом, как тенденции трансформируются в будущие тренды и меняют индустрию на примере применения градиентов в проектах Экосистемы РСХБ.

Иллюстрации, иконографика и рисованные персонажи уже давно в обиходе у UXD дизайнеров (детально про UXD можно прочитать по ссылке). Но основном способом коммуникации в диджитал до 2020 года были фотографии. Что изменилось?

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

Почему же сейчас все больше иллюстрации замещают фотографии?

Иллюстрация, на текущий момент, самый гибкий, быстрый и выделяющийся на фоне конкурентов, инструмент визуализации.

- Создать иллюстрацию быстрее, чем организовать фотосессию

- Иллюстрация гибкая и может быть детально подстроена под контекст.

Немного истории.

С 2013 года, в обиходе аббревиатура UI (точное обозначение User Interface), а в 2015 году добавилась новая – UX (точное обозначение User experience).

Под UI понимается дизайн интерфейса, а под UX – аналитика, ключевой опыт и удобство в пользовательских интерфейсах.

Давайте разберемся, что же стоит за работой того или иного специалиста. Чтобы отделить мух от котлет, поясним: UI-дизайнер занимается визуальными элементами и рисует компоненты пользовательского интерфейса, а UX-дизайнер делает прототипирование и блок-схемы с описанием работы приложения.

И всё ж, UI и UX, это не только интерфейсы и дизайн в диджитал.

UI в глобальном смысле обеспечивает внешнее визуальное восприятие, с которыми сталкивается человек. Работа UI эксперта – это придумать, как будет выглядеть глазами человека Ваша дорожка и куст у дома, мебель, светильники, и все то, что вас окружает.

Почему именно так? Почему не только интерфейсы? Дело в том, что мы живем в цифровую эпоху, где интерфейсы есть даже у бытовых предметов: холодильники, стиральные машины и т. д. Именно поэтому на сегодняшний день не корректно соотносить данную аббревиатуру только с приложениями. UI – это все, что связано с дизайном, с которым будет взаимодействовать или встречаться человек.

UX обеспечивает удобство взаимодействия человека с окружающими его предметами. Вот Вам пример: такой тип дизайна подразумевает даже планирование удобства направления дороги. Вы можете такое видеть во дворах: есть четко проложенные дороги для людей, они красивые, люди вместе с архитекторами думали, старались и «строили» их. Но люди ходят напрямик и срезают углы, это видно по стоптанной траве. Вокруг нас масса таких примеров. А вот умные архитекторы только намечают дороги, а спустя несколько месяцев, когда люди протопчут себе удобный пусть, делают их именно по тому пути, который удобен людям. Это как AB тестирование на сайтах, когда есть несколько дизайнов, и запускаются одновременно две разные версии сайта, которые отличаются по каким-то критериям, а люди уже просто выбирают, что им удобнее.