Дизайн-система

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

Программное обеспечение

Рекомендуется использовать Figma, результат передавать ссылкой на проект.

Выбор платформы для разработки дизайна - вопрос удобства и взаимопонимания между дизайнером и верстальщиком, но также важно пройти этап приёмки дизайна непосредственно перед заказчиком. Как факт, в индустрии веб-дизайна чаще всего используется Figma, либо аналогичный софт. Разработка дизайна в Adobe Photoshop на деле отнимает гораздо больше времени.

Принципиальные подходы в работе дизайнера

Mobile First, принцип позволяющий избежать большинства проблем при приёмке и вёрстке проекта.

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

В качестве наиболее частого используемого мной фреймворка, приведу пример Bootstrap v5:

Здесь мы видим 6 относительных размеров, относящих ширину экрана к промежуточным точкам, брекпойнтам. При построении макетов чаще всего выбирается от 1 до 3 размеров (ширин) экрана. В соответствии с задачами полученными от заказчика, нужно определиться с размерами всех требуемых размеров экрана и идти от меньшего к большему, это важно, это и есть принцип Mobile First.

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

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

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

Что нужно на начальном этапе

1. Проработаная цветовая схема проекта
2. Архив с нужными шрифтами
3. Утвержденная сетка и отступы
4. Иконки, элементы фона и т.п.

Если в проекте помимо вектора используется видео, аудио, фото и другой контент - всё это также нужно для вёрстки.

Компоненты

Базовая типографика, 6 типов заголовков, ссылки, элементы форм и так далее.

Кнопки, меню, бары и всё что можно нажимать.

Карточки, блоки содержащие предыдущие типы контента, блоки с графикой и т.д.

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

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

Как правило в веб-дизайне реакция элемента бывает на устройства ввода (клавиатура, мышь/трекпад) или палец, а состояния могут меняться мягко с анимацией или же жёстко сразу - это также важно передать, хотя бы комментарием, если сложно наработать анимацию в фигме.

Что должно получится в итоге

Таким образом мы подходим к итогу, что требуется от готового дизайна:

1. Наработанный в Figma макет
2. Проект должен содержать понятную, измеримую структуру веб-проекта