{"id":14262,"url":"\/distributions\/14262\/click?bit=1&hash=8ff33b918bfe3f5206b0198c93dd25bdafcdc76b2eaa61d9664863bd76247e56","title":"\u041f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u0435 \u041c\u043e\u0441\u043a\u0432\u0435 \u0438\u043d\u043d\u043e\u0432\u0430\u0446\u0438\u044e \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0434\u043e 1,5 \u043c\u043b\u043d \u0440\u0443\u0431\u043b\u0435\u0439","buttonText":"\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435","imageUuid":"726c984a-5b07-5c75-81f7-6664571134e6"}

С чего начать дизайн сайтов? Рассказываем про свой стартовый шаблон в 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 👋

0
17 комментариев
Написать комментарий...
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Александр Лёгкий

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Платон Щукин

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

Ответить
Развернуть ветку
Pasha Pahitos

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

Ответить
Развернуть ветку
Платон Щукин

Спасибо!

Ответить
Развернуть ветку
max smirnoff

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Платон Щукин

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

Ответить
Развернуть ветку
Рустам Байбулатов

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

Ответить
Развернуть ветку
Dmitry Mezenin

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

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Александр Лёгкий

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

Ответить
Развернуть ветку
Porto

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

Ответить
Развернуть ветку
MarketMike

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

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

Ответить
Развернуть ветку
Александр Комков

thanks

Ответить
Развернуть ветку
14 комментариев
Раскрывать всегда