Giter VIP home page Giter VIP logo

design-checklist's Introduction

Design Checklist

Адаптивность

  • Должны быть указаны используемые точки перехода.
  • Каждой точке должно быть присвоено обозначение: screen-xs, screen-sm, screen-md, screen-lg, screen-xl, ...
    • screen-xs: [0px, 640px)
    • screen-sm: [640px, 960px)
    • screen-md: [960px, 1280px)
    • screen-lg: [1280px, 1600px)
    • screen-xl: [1600px, ...)
  • Должны быть заданы параметры сетки:
    • Количество колонок (12, 24, ...);
    • Отступ между колонками;
    • Размер контейнера на разных режимах адаптивности.

Цвета

  • Каждому из основных цветов сайта должно быть присвоено обозначение primary, secondary, tertiary, ...
  • Должны быть описаны системные цвета
    • error - ошибка,
    • info - информация,
    • success - успех,
    • warning - предупреждение.
  • Для каждого цвета задаётся оттенок от 100 до 1000 с шагом 100, где
  • Дополнительно задаются оттенки серого, также от 100 до 1000, с обозначением gray.
  • Также рекомендуется описать полупрозрачные чёрные и белые оттенки на белом и чёрном фоне, соответствующие описанным выше серым оттенкам. Эти оттенки рекомендуется использовать для текста и линий для уменьшения эффекта "грязного" цвета (https://www.viget.com/articles/equating-color-and-transparency/).
  • Все описанные выше цвета должны быть вынесены в стили Figma и использованы через них. Использование цветов не через стили или цветов не описанных в палитре - не допускается.

Типографика

  • Все используемые шрифты должны быть приложены к макету.

  • У используемых шрифтов лицензия для использования в Web должна быть свободна или куплена.

  • Должны быть перечислены используемые варианты начертания используемых шрифтов (жирность, наклон)

  • Должны быть перечислены все используемые стили текста (размер шрифта, высота строки) для каждого используемого экрана.

    Стиль family xs sm md lg xl
    h1 Roboto 26px/36px 28px/38px 30px/40px 34px/44px 36px/46px
    h2 Roboto 24px/34px 26px/36px 28px/38px 30px/40px 32px/42px
    ... ... ... ... ... ... ...
    p PT-Sans 14px/18px 16px/26px 16px/26px 16px/26px 16px/26px
    ... ... ... ... ... ... ...

  • В результате должен получиться такой набор стилей в Figma:

    Desktop 1600+ Laptop 1280-1600 Tablet L 960-1280 Tablet S 640-960 Mobile 0-640
    xl/h1 lg/h1 md/h1 sm/h1 xs/h1
    xl/h2 lg/h2 md/h2 sm/h2 xs/h2
    ... ... ... ... ...
    xl/p lg/p md/p sm/p xs/p
    ... ... ... ... ...

  • В Less стилях это будет выглядеть следующим образом:

    @font-h1-xs: 26px/36px;
@font-h1-sm: 30px/40px;
@font-h1-md: 30px/40px;
@font-h1-lg: 36px/46px;
@font-h1-xl: 36px/46px;
@font-h2-xs: 24px/34px;
@font-h2-sm: 26px/36px;
@font-h2-md: 26px/36px;
@font-h2-lg: 30px/40px;
@font-h2-xl: 30px/40px;
// …
@font-p-xs: 14px/18px;
@font-p-sm: 16px/26px;
@font-p-md: 16px/26px;
@font-p-lg: 16px/26px;
@font-p-xl: 16px/26px;
// …

  • На каждом экране могут использоваться только стили соответствующие этому экрану, т.е. для экрана xs, могут использоваться только стили с суффиксом -xs (font-h1-xs, font-h2-xs, ...).

  • Должно сохраняться единство стиля для разных размеров экрана, т.е. если на экране xs для текста используется размер font-h3-xs, то на экране md должен использоваться только стиль font-h3-md.

WYSIWYG

  • Если сайт предполагает вывод форматированного пользовательского контента (WYSIWYG), отдельно должны быть описаны все контентные стили:

    Тег Описание Тип Стили
    h1-h6

    Заголовки

    		 Блочный
    • Должен применяться соответствующий стиль из типографики;
    • Должны быть заданы отступы;
    • Не дублировать описание стилей.
    p

    Параграф

    		 Блочный
    • Должен применяться соответствующий стиль из типографики;
    • Должны быть заданы отступы;
    • Не дублировать описание стилей.
    a Ссылка Строчный
    • Должны применяться стили Link.
    abbr Аббревиатура Строчный
    cite Сноска Строчный
    code 
    Код программы
    		 Строчный
    • Должен использоваться моноширный шрифт.
    em Акцент Строчный
    q Цитата Строчный
    strong Акцент Строчный
    address Информация об адресе Блочный
    dl, dt, dd Список терминов Блочный
    • Должны быть прописаны отступы самого блока и элементов.
    blockquote
    Цитата
    		 Блочный
    • Должны быть указаны отступы от соседних элементов.
    ul
    • Маркированный список
    		 Блочный
    • Должны быть указаны отступы от соседних элементов.
    ol
    1. Нумерованный список
    		 Блочный
    • Должны быть указаны отступы от соседних элементов.
    li Элемент списка Блочный Должны быть указаны
    • Отступы от соседних элементов;
    • Текст в несколько строк;
    • Правила вложенных элементов:
      • отступы;
      • маркеры.
    table Таблица
    caption Заголовок таблицы
    tr Строка таблицы
    th Заголовок столбца/строки таблицы
    td Ячейка таблицы
    hr Горизонтальная линия
    		 Блочный

Иконки

  • Иконки должны быть отрисованы в svg.
  • При рисовании иконок допускается только использование примитивов:
    • линии;
    • фигуры:
      • окружности;
      • эллипсы;
      • прямоугольники;
      • многоугольники;
      • ...
  • Не допускается использование:
    • масок;
    • фильтров;
    • трансформаций;
    • встроенных изображений.
  • Рекомендуется линии рисовать линиями (stroke), а объекты фигурами (fill).
  • Исходники иконок должны быть вынесены на отдельную страницу, все они должны иметь одинаковый размер (по высоте).

Элементы управления

  • Все элементы должны иметь состояния:
    • normal;
    • hover;
    • focus;
    • active;
    • disabled.
  • Для ссылок также должны быть описаны состояния visited.
  • Для элементов ввода информации (input, select, textarea, ...) также должны быть описаны состояния успешной и неуспешной валидации. Должно быть предусмотрено поведение, если текст ошибки больше одной строки.
  • Отдельно должно быть описано, как выводить общие ошибки формы (не привязанные к конкретному полю).
  • Для input должны быть описаны стили встроенных иконок.
    • Иконки могут быть активные;
    • Иконок может быть несколько.
  • Для кнопок должны быть заданы минимальные отступы текста.
  • Для кнопок должен быть предусмотрен вариант, когда текст не помещается в кнопку.
  • Должны быть описаны все возможные варианты кнопок (цвета, форма, размер, ...).
  • Для элементов управления должны быть заданы отступы от соседних элементов (вертикальные и горизонтальные).

Модальные окна

  • Должен быть описан цвет подложки модального окна.
  • Должны быть описаны размеры модального окна для разных режимов адаптивности.
  • Должно быть описано поведение модального окна (закрывается ли по клику на подложку).

Поведение

  • Любой текст (заголовки, лейблы, теги, пункты меню, может быть очень длинным) и любые элементы (теги, кнопки, карточки, ...) могут не помещаться в экран и/или переноситься на 2 и более строк. Это поведение должно быть описано. Должно быть описано не менее 3-состояний:
    • обычное;
    • нет данных;
    • очень много данных.
  • Для контентных изображений должна быть описана логика позиционирования:
    • Какой размер контейнера изображения?
    • Как масштабируется изображение не совпадающее по размеру (с полями, с обрезкой краёв)
    • Как позиционируется изображение не совпадающее по соотношению сторон (верх, низ, лево, право, центр)
  • Для контентных изображений должна быть указана заглушка, если изображение ещё не загрузилось или отсутствует.
  • Для каталогов предполагающих фильтрацию (списков новостей, каталогов товаров, ...) должно быть указано состояние "ничего не найдено".
  • Если в блоке текста не wysiwyg используется перенос текста, об этом должен быть комментарий.

Figma

  • Названия проектов должны быть на английском языке. Не должны использоваться спец-символы.
  • Страницы должны быть сгруппированы по сущностям с разными режимами адаптивности.
    • Пример:
      • Первый ряд - Список новостей: Десктоп, планшет, мобилка;
      • Второй ряд - Новость Х: Десктоп, планшет, мобилка;

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.