Дизайн-система Глянец. Как рисовать макеты.

Данная дизайн-система служит для быстрого прототипирования и последующего развития прототипа в готовый дизайн.

Актуальная версия системы доступна по ссылке.

Файл системы содержит три страницы.

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

На второй странице размещены все компоненты стилей и шаблоны для разработки последующего дизайна

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

Данный фрейм автоматически генерируется и его не надо изменять

Фон и логотип нужно обязательно заполнить:

00. Атомы

Атомы – самая маленькая структурная единица системы, с помощью которой строится вся система.

Мы видим все базовые цвета, рамки и так же атом изображения.

На основе их уже строятся элементы форм

Более детально о атомарном дизайне.

01. Текстовые стили

Все текстовые стили сформированные через компоненты.

Изменять мастер-компоненты текстовых стилей, а именно их размер, начертание и цвет на этапе создания прототипов категорические запрещается!

Это допустимо только после утверждения всех страниц прототипа, на этапе отрисовки дизайна.

Стиль текстов можно менять через замену компонентов. При этом сохраняется текст внутри стиля:

02. Кнопки

Кнопки разделены на два вида. для прототипирования и для дизайна.

03. Поля

Непосредственно сами поля и элементы форм имею два размера и разные состояния.

Если мы сформировали одно поле в дизайне, его легко можно заменить на другой стиль, просто заменив соответствующий компонент из списка:

Замена через компоненты действует для всех стилей форм и полей.

Так же доступны элементы меню, с помощью которых можно формировать вертикальные и горизонтальные меню, меняя заменой символов их состояние из обычного в активное:

Аналогично работает и горизонтальное меню:

Так же компоненты можно добавлять на дизайн из панели компонентов:

04. Иконки

В системе набор базовых иконок. А так же указатель, который надо обязательно ставить, рисуя ховеры в дизайне.

Цвет иконок сделан через маски атомов-цветов. Цвет легко редактировать, просто заменив атом один на другой:

Менять размер иконок нужно с помощью Scale Tool (K)

05. Изображения

Из атома изображения сформированы картинки разных размером, которые удобно вписываются в сетку:

Размеры картинок можно легко менять, заменяя его компонент на другой:

06. Шаблоны контента

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

Все элементы легко заменяемые через список компонентов:

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

07. Шаблоны продуктов

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

08. Dekazord

Это система отступов, кратных 10 для быстрого выравнивание элементов дизайна:

Используйте команду Pack vertical или Pack Horizontal из меню, чтобы быстро сформировать дизайн из нужными отступами:

Отступы в тексте правильно делать по верхней и нижней линии шрифта:

09. Как начать дизайн сайта используя систему.

1. Открыть систему по ссылке и сделать копию.

2. Называем проект, указывая ID и названии:

3. Копируем ссылку на редактирование, и сохраняем ее в p.glyanec.net

4. Делаем прототип главной сайта, используя дизайн-систему способами, которые описаны выше.

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

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

7. После утверждения дизайна главной рисуем дизайн внутренних страниц.

8. Потом, после того, как принятые все страницы сайта, переходим отрисовке адаптивной версии. Фрейм и сетка для адаптивной версии уже есть в системе:

9. При передаче дизайна главной обязательно заливать в просмотрщик UI KIT, который автоматически формируется из компонентов:

10. FAQ

Мне не ясны вопросы в ТЗ. К кому мне обратиться?

Нужно обратиться к менеджеру проекта в чат, скопировав текст вопроса, указав ссылку на тикет проекта

Я получил правку, и не знаю, как правильно ее сделать, мне нужны уточнения или дополнительные материалы.

После прочтения правок по проекту уточнения и вопросы можно задать менеджеру в личку или процитировав неясные моменты с вопросами в тикет-системе.

Обязательно ли придерживаться выбранной цветовой палитры, шрифтов и примеров сайтов в ТЗ?

Да, обязательно. Если есть сомнения, лучше уточить в менеджера.

После прочтения ТЗ у меня есть идеи по поводу сайта, по поводу добавления или удаления новых блоков и функционала.

Все ваши идеи можно обсудить с менеджером проекта.

У меня закончились Тикеты. Что мне делать?

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

Менеджер долго не отвечает. Что делать.

У менеджера может быть важный звонок или встреча. Если вы зависли на задаче, и нужен ответ менеджера, чтобы ее доделать, то можно переключится на следующую задачу.

Я долго рисую дизайн, у меня нет идей, как сделать определенный блок или страницу.

В любой момент вы можете написать коллегам в чат, попросить помощи и устроить мозговой штурм.

Я увидел ошибку в дизайне коллеги. Что мне делать?

Напишите ему в личные сообщения или оставьте комментарий в Фигме на этой ошибке. Если это простая ошибка, что-то сползло случайно, или текст неправильный можно сразу поправить ее, не уведомляя никого.

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

Сообщите заранее менеджеру об этом. Вы можете попросить так же помощи коллег, чтобы вместе закрыть быстрее задачу.

Мой дизайн постоянно отклоняют, я получаю много правок от заказчика. Постоянные переделки и доделки...

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

Клиент просит сделать в правках абсурдные вещи, которые не сочетаются с макетом.

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

Меня просят передать исходник логотипа, как это правильно сделать

Отправьте архив с логотипом в форматах eps, png, svg и pdf