Организация проекта в Figma
- В проекте должна быть разработана цветовая схема проекта
-
Аналогичная схема должна быть разработана для всех используемых шрифтов. (Так же использовать нейминг в проекте — называем шрифты осмысленно)
- Если проект рисуется с нуля, то все макеты должны лежать на одной странице Figma, для проектов на поддержке же стоит разбивать проект на разные страницы под каждую новую задачу. Каждая страница в таком случае должна иметь правильное понятное всем название. Не Page 1, а, например, Великий камень: раздел для партнеров.
-
Для общих сквозных элементов сайта все состояния и ховеры должны быть отрисованы на эталонной странице. Для уникальных или очень редких элементов состояния и ховеры рисуются рядом с этим элементом прямо рядом с макетом.
-
Логотип проекта всегда должен быть нарисован в SVG, если его нет от клиента, отрисуйте его самостоятельно по предоставленному PNG.
-
Отступы всех элементов должны задаваться отступами, которые можно сразу померять. Не Line Height текста, не межстрочными интервалами и т. д.
- Сложные коллажи из фото должны быть объединены в единую группу (если планируется, что это будет один слой на верстке).
-
Составные изображения обязательно группируем в макетах, чтобы даже те, у кого нет доступа к редактированию макета (менеджеры и т.д.) могли легко экспортировать нужные элементы.
- Все макеты в Figma должны иметь соответствующее правильное название.
- Обязательно показываем сетку и направляющие.
-
Состав элементов эталонной страницы:
- Заголовки H1-H6.
- Текстовые параграфы (ширина текстового блока не должна быть шире 800 пикселей).
- Нумерованный список.
- Маркированный список.
- Стиль таблицы.
- Медиа (изображение, галерея, видео). Под фото обязательно предусматриваем вариант с подписью фото.
- 2-3 варианта выделения текста (например, цитата, текст в рамке и т. д.).
![5yumdymq981m2z9uo5pjoprfbxiav1v8.png 5yumdymq981m2z9uo5pjoprfbxiav1v8.png](/upload/medialibrary/22d/fjirz67dw5pqgx5ozga7tuurt2zs6rda.png)
![4 (1).png 4 (1).png](/upload/medialibrary/e5d/5vz8d29pceyf3e12cgbfknu77maqhjtf.png)
Адаптивность и дизайн динамического контента
-
Правила ширины фреймов: ширина фрейма должны быть 1920px (если в проекте не заложены варианты под Retina или варианты под SMART TV). Речь не про ширину дизайн-макета, а именно про ширину фрейма. Если сделать меньше, то при демонстрации заказчику по краям макета буду черные полосы + у верстальщика будут вопросы по блокам со 100% заливкой по ширине.
-
Разрешения дизайн-макетов.
В наших проектах максимальное разрешение проектов 1500 или 1400. Макеты могут по согласованию с менеджером иметь кастомные брейкпоинты для адаптива, но если у вас нет других вводных, руководствуйтесь стандартными брейкпоинтами Bootstrap.
Дополнительно:
- показываем или описываем верстальщику также, как будут вести себя блоки с цветными заливками на разрешении побольше 1920px. Или как будет вести себя главный слайдер и главный визуал на разрешениях больше. Чтобы не было ситуации типа https://cloud.mail.ru/public/9BRz/9hdBGQkTT;
- мобайл рисуем на 360px, все что ниже мы будем уже на верстке резинить до 320.
-
Когда вы рисуете разные пропорции картинок для десктопа/планшета и мобайла — согласуете эту логику с менеджером, чтобы понимать будет ли готов клиент поддерживать разработку нескольких версий картинок для одного блока. Или проще пропорционально перестраивать картинку, чтобы один вариант поддерживался всеми разрешениями.
-
Для листингов с динамическим контентом всегда показываем вариант отображения элементов превью в 1,2,3 и т.д. строки (или вариант с ограничением по строкам, например, с многоточием или фейдом текста), чтобы показать верстальщику логику перестроения элементов по сетке
-
Рисуем вариант зафиксированного хедера в 1 строку
![Адаптивность и дизайн динамического контента (1).png Адаптивность и дизайн динамического контента (1).png](/upload/medialibrary/b37/k2zgdaa0oa1nu2xz02tdstm4xl0wx638.png)
![Адаптивность и дизайн динамического контента (3) (2) (1).png Адаптивность и дизайн динамического контента (3) (2) (1).png](/upload/medialibrary/b05/8q6t8kq24eiy2ig42y71ez9qa87thmf9.png)
![Group 534813667.png Group 534813667.png](/upload/medialibrary/abb/8ug0mq7mqg8qcflwj4aqzpbxcaofgvdu.png)
Обязательные элементы проекта
-
Вне зависимости от наличия в проекте, должны быть прорисованы:
- дизайн прелоадера,
- дизайн пагинации,
- дизайн панели / попапа с хранением cookies,
-
спасибо-страница после заполнения формы.
- Показать дизайн поп-апа.
-
Показать дизайн нотификаторов добавления в корзину: успешно, возникли проблемы, ошибка.
- Рисуем картинки размерами w:1200 h:630 и w:300 h:300 для превью при шаринге в различных соц. сетях и мессенджерах.
-
Обязательно рисуем заглушку для всех элементов, где может быть фото (товар, статья в превью и т.д.) на случай, если картинка отсутствует или не выгрузилась.
- Обязательно делаем дизайн 404 (страница не найдена), 500 (ошибка сервера) по желанию если проект с упором в дизайн.
![1_ спасибо-страница после заполнения формы.png 1_ спасибо-страница после заполнения формы.png](/upload/medialibrary/51a/5c0dqizfecw3x3wu7hpdzo9416jueyag.png)
![Group 534813666.png Group 534813666.png](/upload/medialibrary/cd8/5cv5nk84q3as2ejqlkyzic6c2d93ipfx.png)
Организация файлов
- Название слоев либо кириллица, либо латиница, только одно
-
Название отражает содержимое
- Все слои одного логического элемента в одной папке
- Избежать полупрозрачные градиенты и режимы наложения типа «multiply, screen, overlay, и т.д.
- Не использовать сложные режимы наложения (blend mode) на любых свойствах слоя (типа inner shadow, drop shadow и т.д.)
- Обязательно показываем сетку и направляющие
![2.png 2.png](/upload/medialibrary/dcd/ctc10qb4z279nh7kdx2gl6rv90b4eb0x.png)
Типографика, шрифты и тексты
- Использовать не больше 2 шрифтов (заголовки, основной текст).
- Использовать не более 3-4 начертаний шрифта.
- Не использовать прозрачность для шрифтов.
- В текстах нет грубых грамматических ошибок.
- Не используем в дизайне light и extralight гарнитуры на мобайле для основных блоков текста, если только это не специальный дизайн-прием для создания нужной эстетики.
- При разработке стараемся использовать минимальное количество шрифтов и гарнитур, выбирайте те шрифты, где и буквы, и цифры выглядят хорошо. Помните, что жирности тоже влияют на общий вес шрифтов в проекте. Поэтому не надо использовать просто так и Bold, и ExtraBold и Black без необходимости.
-
Серый цвет не должен использоваться как основной цвет текста на проекте, особенно в статьях, описаниях, характеристиках. Только как нейтральный цвет для опциональных и служебных элементов страниц (тултипы, плейсхолдеры, элементы футера, подписи к фото и таблицам и т. д.).
- Не используем просто так платные или кастомные шрифты, только Google Fonts. При использовании платных или кастомных шрифтов архив с ИСПОЛЬЗУЕМЫМ начертаниями прикрепить к проекту при передаче макетов на верстку.
-
Обязательно делаем таблицу адаптивности шрифтов: десктоп-мобайл. И строго соблюдать эти размеры в макетах.
-
На мобайле не должно быть шрифта ниже 14px (валидаторы гугла будут ругаться и снимать баллы в Google pagespeed insight), основной шрифт текста должен желательно не ниже 16px. Для меню тапбара и всяких служебных нотификаторов типа блока с cookies можно сделать шрифт 12.
- Составление схемы используемых шрифтов с адаптивом. И обязательно использование одного размера как в моб версии так и на десктопе (т.е, если мы для заголовка используем шрифт h2, значит в моб. версии должен использоваться тот же шрифт h2, а не менять его например на h3). Использовать не больше 6 размеров для заголовков (h1 ... h6). Шрифты вынести в uikit.
- Не используем рыбные тексты Lorem ipsum в макетах.
-
Каждый текстовый элемент страницы должен быть привязан к конкретному шрифту из шрифтовой схемы, чтобы верстальщик сразу мог подкидывать нужный класс шрифта при верстке.
![Group 534813674 (1) (1).png Group 534813674 (1) (1).png](/upload/medialibrary/ad1/ds5hdwhmurq9oukkrewd47m4r95lqk6p.png)
![Group 534813668.png Group 534813668.png](/upload/medialibrary/f59/g9cpbyp3922exalhh3u2d3uhu2i89wui.png)
![13.png 13.png](/upload/medialibrary/988/czpfdw66c51pmk2mnnkjxz6kmayzzqq5.png)
Состояния элементов
- КАЖДЫЙ кликабельный элемент сайта должен иметь ховер.
-
Ховеры должны быть сильно заметны и отличны от статичного текста. Предпочтительно использование двойного ховера для элементов меню, кнопок, тегов и т.д. (например, цвет и подчеркивание/бордер/заливка и т. д.).
- Статический текст, ховеры и цвет ссылок должны иметь понятную логику и отличаться друг от друга визуально.
- Отрисовать default, hover, focus и disabled состояния для кнопок, ссылок, инпутов. Для инпутов также отрисовать состояния error с валидацией.
- Показать все состояния полей форм: input, textarea, select, check-box, radio-button.
- Для всех полей и выпадающих списков отрисовать варианты, когда текст не вмещается в строку поля.
![Group 534813670.png Group 534813670.png](/upload/medialibrary/005/epgpssx1cp0t6xdfufl1qhibrpoyz4y5.png)
Иконки
-
Иконки делаем всегда в контейнере одного размера. Что касается самих иконок, то они в идеале должны быть:
- одной стилистики,
- одинакового размера по ширине и высоте. Если пропорцию невозможно сохранить, тогда делайте иконки одинаковыми по высоте,
- если у иконки есть hover-эффекты, используйте иконки, у которых цвет формируется из fill или stroke. Использование 2-х этих свойств вместе усложняет сильно работу верстальщика,
- стараемся делать уникальные иконки — особенно для смысловых блоков страниц, для служебных блоков можно использовать packs, но не злоупотребляем штатными фигмовскими иконками.
- Рисуем фавикон в svg формате размером от 16×16 до 192×192. Фавикон должна быть читаемая и понятная в маленьком размере. Поэтому логотип как фавикон — плохое решение.
-
Отрисовать иконки основных форматов файлов для документов: pdf, docx, xls, txt, ppt, mp4, rar, zip, jpg, gif, png, avi, mp3 (остальное в зависимости от проекта)
-
Для ряда иконок всегда надо рисовать несколько состояний:
- личный кабинет: неавторизованный / авторизованный пользователь;
- корзина: пустая / с товарами;
- избранное: пустое / с товарами;
- гамбургер меню: статичный / открытый в виде крестика.
![Group 534813677.png Group 534813677.png](/upload/medialibrary/4af/0ca00x83wm3tfxez73duld3offhmkt58.png)
![Group 534813675.png Group 534813675.png](/upload/medialibrary/8f5/bfo99ixhhagjhn0hg5gf7412xlcyyy8r.png)
Особые элементы и состояния для дизайна интернет-магазинов
-
В превью товаров (если это не противоречит ТЗ проекта) нужно показать следующие элементы превью:
-
лейблы (хит, новинка и т.д.). Иногда на превью может быть более 3 лейблов. Предусмотрите в дизайне вариант таких случаев;
- слайдер фото. Иногда в превью может выводиться более одного фото. Продумайте логику переключения фото. Использование слайдера для фото — плохой вариант, потому что в блоках, где товары выводятся в виде слайдера (с этим товаром покупают, похожие товары и т.д.) получится вариант работы слайдера в слайдере. Это будет плохо работать через свайп на мобайле;
- варианты название товара в 1,2,3 и более строк. Если вы решаете ограничить название товара 2 или 3 строками, покажите вариант скрытия текста (многоточие или затемнение текста — отталкивайтесь от дизайна проекта);
- все варианты статуса наличия товара. Не лишним будет показать все варианты «на будущее»: в наличии, под заказ, ожидается, в пути, нет в наличии. Желательно чтобы разные статусы отличались цветом;
-
все варианты call-to-action в зависимости от статуса наличия товара: в корзину, сообщить о поступлении, подробнее, посмотреть аналоги, под заказ;
-
вариант цены со скидкой, учитывайте требования к местному законодательству по размеру старой цены относительно новой цены;
- для каунтера товара прорисуйте состояние максимального количества товаров в корзине.
-
лейблы (хит, новинка и т.д.). Иногда на превью может быть более 3 лейблов. Предусмотрите в дизайне вариант таких случаев;
- Всегда рисуется отдельная страница заказа для истории заказов (логика 1C-Битрикс проектов).
-
Есть ряд страниц, на которые можно попасть просто по url, дизайн этих страниц должен быть прорисован:
- пустое избранное,
- личный кабинет без авторизации,
- пустая корзина,
- листинг каталога без товаров,
- малая корзина без товаров,
- страница в стадии наполнения (для пустой страницы без контента),
- пустая выдача предиктивного поиска,
- пустая выдача страницы поиска.
![3_ряд страниц, на которые можно попасть просто по ur (1).png 3_ряд страниц, на которые можно попасть просто по ur (1).png](/upload/medialibrary/5a9/ocms5qq8qlbee02s84kr9yeckghb0qyg.png)