С чего начать дизайн сайтов? Рассказываем про свой стартовый шаблон в Figma

Мы сделали стартовый шаблон для наших проектов. Рассказываем подробности, а в конце статьи оставляем на него ссылку.

Привет! Меня зовут Александр Щетинин. Я дизайнер в The Architect — диджитал-компании, которая создает продукты и комплексные решения для застройщиков в цифровой среде.

Его цель – систематизировать дизайн. Это минимизирует потерю времени – любой дизайнер может быстро вникнуть в проект.

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

Есть понятная система наименований, размеров для экранов и компонентов. Плюс у каждого проекта появляется своя обложка – все проекты в списке выглядят единообразно и стильно.

Стартовые шаблоны наших проектов в Figma

В начале проекта дизайнер дублирует шаблон и начинает заполнять все страницы по простым шагам.

Или обложка проекта. Сюда вставляем логотип клиента и название проекта.

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

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

В прототипе собираем будущую структуру сайта, формируем страницы, которые будут использоваться, и наполняем их содержанием. Другими словами, создаем UX – user experience.

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

В конце обязательно настраиваем все ссылки на страницы, чтобы презентовать прототип клиенту.

На этих страницах делаем дизайн. Здесь есть свои правила – давать имена компонентов, групп и фреймов. Об этом подробнее.

В ките содержатся все элементы и компоненты дизайна. Дизайнер создает под каждый проект свои компоненты и помещает их в фреймы.

На странице уже есть базовые компоненты – поля ввода, кнопки, сет стандартных иконок, набор шрифтов для компьютера и телефона, набор отступов и стандартная сетка в 1200 px.

В архиве хранятся элементы и страницы, которые не используются, но удалять их не хочется. Например, разные версии дизайна. Здесь правило одно – необходим строгий порядок в расположении.

Для названия цвета нужно использовать формулу «Категория/название».

В шаблоне уже есть нужные стандартные цвета:

theme – основные цвета дизайна;

primary – основной акцентный цвет,
secondary – второстепенный цвет,
text – цвет для текста,
gray – серый.

functional – цвета, имеющие функциональный смысл: «ошибка», «успех»;

brand – комплект оттенков, сочетающихся с основной гаммой;

gradients – градиенты.

Для названия цвета нужно использовать формулу «Категория/название».

Стандартный список всех текстовых стилей

Мы используем пять популярных экранов: 1280, 980, 640, 480, 320px.

В файле есть базовый компонент – offset – он содержит варианты отступов. Все они кратны 8px.

Просто скопируйте шаблон, измените название и начните его заполнять.

В итоге мы смогли систематизировать дизайн и ускорить workflow за счет готовых компонентов и стандартизации. Да, мы не открыли Америку, а просто показали, как пользуемся Figma. Если у вас есть способы, позволяющие еще больше оптимизировать процесс дизайна сайтов и приложений, будем рады их услышать.

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