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

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

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

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

Для чего нужен стартовый шаблон

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

Как было раньше

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

Как сейчас

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

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

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

Из чего состоит шаблон

Cover

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

Creative concept

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

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

Prototype

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

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

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

Desktop, Tablet, Mobile

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

UI kit

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

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

Archive

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

Нюансы, которые нужно знать

Как называть цвета

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

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

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

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

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

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

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

Как называть текстовые слои

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

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

Какие размеры фреймов использовать

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

Про отступы

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

Как пользоваться стартовым шаблоном

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

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

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

И на нашу страницу в Instagram 👋

{ "author_name": "The Architect", "author_type": "editor", "tags": [], "comments": 17, "likes": 63, "favorites": 519, "is_advertisement": false, "subsite_label": "design", "id": 183584, "is_wide": false, "is_ugc": false, "date": "Thu, 03 Dec 2020 15:49:34 +0300", "is_special": false }
Объявление на vc.ru Отключить рекламу
Транспорт
Фуры и бензин: как российский бизнес учился контролировать водителей и расход топлива
Представьте: вы заказали диван, а вам его не доставили. Все потому, что водителя не узнали на заправке и отказались…
0
17 комментариев
Популярные
По порядку
Написать комментарий...
19

Ну и если совсем быть правильным, то дизайн начинается не с дизайн системы. А а с задач бизнеса, анализа конкурентов, исследования userflow,  целей, брифа, креативной концепции, и прочего. 

Ответить
0

Воронку забыл) по сути от воронки функционал 

Ответить
0

и воронка и пизденка, все туда )))

Ответить
11

Тема на самом деле очень мощная и глубокая, а статья, что запись в твиттере. 
Человеку который совсем в этом ничего не понимает и только учится, совершенно ничего полезного взять, потому что не о чем не рассказано толком. Вот мол исходник - смотрите сами.

UI Kit тоже слабенький очень. Зачем было дублировать один и тот же элемент? Они же ничем не отличаются. 

Текст внутри поля можно динамически менять в символе/компоненте. 

Очень сырая статья, очень сырой пример. 

Ответить
1

Егор, где почитать прогрессивнее, но только чур конкретный линк.

Ответить
3

https://material.io
+ разобраться в ui ките, который можно найти либо здесь же, либо в комьюнити фигмы

Ответить
0

Спасибо!

Ответить
0

действительно непонятно, зачем они пришли сюда с этим примитивом

Ответить
1

ну дело даже не в примитиве, а в содержании. 

Ответить
0

Пс статья реально щед

Ответить
1

Заглянул в файлик и там бардак. Это как так? Явно не то, что на скрине.

Ответить
0

Люди, использующие эмодзи в проектах, скажите, вам реально удобно? Я работаю с большими проектами, где много страниц, но никогда не возникало желания или не было необходимости добавлять в название страницы эмодзи.

Иной раз пришлют тебе макет, а там тихий ужас.

Ответить
0

Я только в некоторых слоях иногда использую. Чтобы было проще и быстрее найти специфические страницы. Например, лейауты для писем. 

Ответить
0

Расшарьте ссылку то, чем писать 

Ответить
0

Интересно, спасибо. А у меня к слову кавер не показывается.
upd: с задержкой происходит. Все отлично)

Ответить
0

Шаблон не работает, пустой файл  

UPD нашел внизу темлейт

Ответить

Комментарии

null