Разработка веб-дизайна в сервисе Figma

Курс будет полезен как начинающим веб-дизайнерам, так и спецам, которые разрабатывают свои дизайны в Photoshop. Расскажу, чем Figma так хороша и почему история с массовой миграцией дизайнеров с Photoshop скоро повторится как это уже происходило с таким флагманом UI разработки как Sketch, но не было таким массовым так как Sketch остается продуктом для владельцев Mac.

Figma объединила в себя все лучшее, что происходило в миром инструментов UI-дизайна за последние несколько лет. Figma — это лучшие качества Sketch, Zeplin и InVision в одном крутом продукте.

 01

Достоинства
Figma работает в браузере и доступна на любой платформе как Windows так и Mac (если вы уже работал в конструкторах страниц типа Webflow или Tilda, проблем с адаптацией к интерфейсу не будет).
Никаких дистрибутивов и приложений — нужно только зайти на figma.com, залогиниться и работать.
Бытуем мнение в среде спецов, что если разработка происходит в браузере, то это не серьезно. Но такие продукты как Webflow или Zeplin сломали эти мифы.

Достоинства

 Организация файлов.
Все рабочие файлы хранятся в облаке и организованы простым деревом «команда/проект /файл», поэтому больше никаких конфликтов копий. Нет этих сумасшедших архивов в Яндекс диске или Dropbox. Это позволяет развернуть работу где угодно и с любого компьютера. Достаточно открыть браузер и войти в свой аккаунт.

Организация файлов

Командная работа
Режим одновременной работы в проекте сразу нескольких специалистов все больше становится обыденным делом. Но Figma задала тон такому тренду.
В Figma можно в режиме реального времени работать над одним файлом одновременно с другими членами команды. И, как я уже писал, для подключения к работе им нужен только браузер.
Самое крутое то, что каждый пользователь, находящийся в данную секунду вместе с тобой в одном файле, дает о себе знать мельтешащим курсором с именем — ты знаешь кто это и чем он занят.
Я использую эту возможность для работы с копирайтером. После того как макет с рыбным текстом подготовлен, то он точно знает какое количество знаков необходимо. Если вам необходимо удаленно согласовать проект с заказчиком, то вы на его глазах при разговоре по скайпу вносите все правки. Это многократно ускоряет процесс.

Командная работа

Комментарии
Это отдельный блок, которому стоит уделить ваше внимание. Когда над проектом трудится несколько человек или идет согласование с заказчиком, то при обсуждении происходит масса пометок, которые очень сложно все запомнить. Даже если все это записывать у вас получится груда хаотичных листочков. Figma решает этот вопрос, так как предусмотрена доска фидбека. Можно пометить коментом любой блок или начать обсуждение по цвету кнопочки. Но главное, что ничего не будет упущено из вида и проект будет двигаться.

 

 Контроль версий

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

Основные блоки курса

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

Боли клиента и User Stories
Самый важный этап в разработке любого сайта заключается в ответе на главные вопросы посетителя. Если вы сможете это сделать, то состоится продажа товара или услуги. Как собрать эти вопросы, построить User Stories будет в этом блоке.

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

Кнопки, Формы и Иконки в дизайне
Типы кнопок, практика их создания в Figma. Виды форм обратной связи. Отступы, типографика, цвет, читаемость, размер и на что делать ориентир при разработке. Основная задача иконок, виды и их проектирование. Практика создания иконок в Figma.

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

MoodBoard и Графика
Как правильно собрать MoodBoard в Figma и его основное назначение. Как подбирать графику по целям и целевой аудитории сайта. Где можно взять качественную графику бесплатно. Цветовая поляризация графики для сайта. Как выделить основное из общего. Техника визуальной коммуникации.

Нестандартное использование объектов
Как можно нарушать законы модульной сетки и создавать нескучный дизайн. Техника стилизации блоков. Где черпать вдохновение для разработки нестандартного дизайна.

Отрисовка дизайна и сдача проекта в Figma
В финале вы получите готовый дизайн для вашего продающего сайта. Поэтому рекомендуется проходить курс со своим проектом. В этом случае вы будете более тщательно выполнять домашние задания и прорабатывать все тонкости аналитики.