Стандарты веб-дизайна

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

Эти материалы сложились у нас за годы работы. Почему мы хотим поделиться эксклюзивом? Не скрою, раньше мы не давали этот материал в открытый доступ, но пришло время единых стандартов. Мы будем рады, если кто-то дополнит или покритикует данный материал — в результате будет еще лучше. В общем, берите на вооружение:

1. Тексты должны быть не абстрактными, а относящимися к теме, например, если делается дизайн страницы раздела по керамической плитке, то иллюстрирующий текст должен быть о плитке (чтобы было понимание, как этот дизайн будет смотреться вживую). Фотографии должны стоять не абстрактные, а настоящих продуктов. Дизайн должен давать представление как можно ближе к жизни.
2. Должен быть единый стиль оформления. Например, если для разворачивания блоков текста используется слово Развернуть с пунктирным подчеркиванием, то не допускается в других местах разворачивания без пунктирного подчеркивания. Если ссылки выделяются подчеркиванием, то не должно быть ссылок без подчеркивания, выделенных только цветом. Или это должно быть обосновано.
3. Ссылки. Нужен вид для обычного состояния и для состояния при наведении. Также можно использовать отдельный цвет для посещенных ссылок (опционально).
   
4. Если для дизайна используются изображения, которые надо купить, предоставляются ссылки на покупку. Фотографии лучше выбирать на фотобанка типа pressfoto. ru. Пиктограммы брать с бесплатных источников, типа iconfinder. com, если они платные, предупреждать о необходимости покупки. Все файлы должны передаваться не по почте, а выкладываться на файлообменники (лучше через Yandex Disk).
   

5. Создание favicon — иконки для вкладки в браузере. Желательно в двух форматах (стандартный 64х64 и для мобильной версии 114х114 px)

6. Все иконки, если это не веб-шрифт, то должны быть svg (не jpg, не png)

7. Кнопки. Обычное состояние, наведение мыши, нажатие кнопки (и так для каждого вида кнопок):

• показать шрифт, цвет и местоположение вводимой информации в форму

• показать шрифт, цвет и местоположение поясняющий информации
• показать поведение поля формы, если туда нельзя ничего вводить

• названия полей должны стоять слева от полей для заполнения. При этом в полях могут стоять подсказки, которые исчезают, как только ставим курсор в поле (показать это в дизайне)

• в каждой форме перед кнопкой отправки должен стоять текст «Согласен на обработку персональных данных” с предварительной галочкой. »персональных данных” — является ссылкой
  
• вся типографика — шрифты, их размер, принадлежность к текстовому типу (обычный текст, заголовок, и т. п.) на макете должна соответствовать реальной (то, что будет на реальной странице). Правильно:
  

• Если работа идет по прототипу, также необходимо соблюдать требования типографики, указанные в нем. Примеры:

• Телефоны — поля для ввода оформлять вот так:

1. В макете должно использоваться не больше 2 гарнитур (редко когда — 3). В противном случае сайт будет выглядеть безвкусно.

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

3. Размер для обычного текста, как правило — 16-22 px. При этом длина строки не должна превышать 75 символов. Если текста мало, то его делают крупнее, а для статей и длинных записей — мельче.

4. Чтобы узнать размеры заголовков, кегль основного текста умножают на 1,6.
   

5. Вычислить, какой размер шрифта на сайте лучше использовать, можно с помощью калькулятора. На основе параметров обычного шрифта он подбирает оптимальные размеры для заголовков. Также можно воспользоваться калькулятором Криса Пирсона, чтобы вычислить высоту строки.
6. Трансформирование текста (сжатие, растягивание) — недопустимо. Если нужно изменить размер текста — меняем его через Размер текста.
   
7. Размер должен быть целым числом, а не дробным. (например 16 px, а не 16.55)
   
8. Если в дизайне используются шрифты, отличные от системных, предоставить исходники, но желательно использовать Google Fonts. Никаких шрифтов с непонятным происхождением в дизайне быть не должно!
   

• Дизайнер работает на своем аккаунте, после окончания работы передает файл в формате. fig. Он считается «исходником».
• В процессе работы дизайнер дает гостевую ссылку для показа. (иногда требуются и jpg-и каждой страницы в каждом разрешении (потому что джипег помогает отследить историю изменений, а текущий файл в Фигме показывает только последнее состояние. Это обсуждается отдельно для каждого проекта).
  

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

• Одна страница — должны быть все адаптивные версии на одном листе, все слои выстроены в иерархию, удобно для экспорта

• Шапку и подвал лучше размещать на отдельной странице, т. к. если по ним делаются все варианты с раскрытиями, то получается очень много фреймов

• У каждой страницы помимо названия должен быть и номер:

• Все повторяющиеся элементы, например, шапка сайта, футер, меню — должны быть вынесены в отдельную страницу Components (или UI Kit) и автоматически подтягиваться оттуда на все страницы, чтобы не пришлось потом одну цифру править в куче файлов, если заказчик решит поменять номер телефона в шапке:

• На сайте должны быть описаны все текстовые стили и все цветовые:

В отдельной странице components (или UI Kit) должны быть описаны

• ссылки в тексте (обычные, при наведении, нажатые),

• чекбоксы (тоже в 3 состояниях)
• все виды заголовков и подзаголовков
  
• все другие элементы (например, ссылки на всплывающие окна, выезжающие блоки текста, кнопки и прочие элементы, которые меняются при наведении и в нажатом состоянии)
  

• должно быть показано, как будут выглядеть выпадающие элементы

• все виды кнопок в 3 состояниях.
• радиокнопки (тоже в 3 состояниях)
• табы
• пагинация
• скролбар
• нумерованный и маркированный списки. Пример:

• На страницах с контентом должна происходить только сборка из экземпляров, взятых с мастер компонентов этой страницы.
• Нужно пользоваться autolayout (автораспределение)
  

Все макеты должны быть сделаны с использованием Bootstrap-сетки.

При создании Bootstrap-сеток в Figma и других графических редакторах для других разрешений следует учитывать, что если для самого большого разрешения ширина фрейма свободная и может меняться, то на остальных разрешениях, которые меньше, ширина фреймов должна быть привязана к соответствующим значениям из документации Bootstrap (см. Bootstrap Grid options):

Скачать готовый шаблон Bootstrap-сетки с описанной ниже системой сеток можно среди стандартных шаблонов Фигмы.

• Первый фрейм шириной 1920 пикселей. Это среднее универсальное значение. Конечно-же можно сделать макет шире или наоборот уже, но, в целом, начинать создание дизайна можно именно с такой ширины макета. Кроме 12-ти колоночной системы сеток Bootstrap можно также использовать и горизонтальную разметку для соблюдения вертикального ритма. Сетка в 12 колонок. Размеры столбцов — 65px. Расстояние между колонками — 30 px.

• Общая ширина фрейма для следующего разрешения составит 992px:

• Ширина одной Bootstrap-колонки для данного разрешения, при условии, что будет отражено 12 колонок, составит 50px. Остальные параметры Bootstrap-сетки такие-же, как у предыдущего фрейма:

• Общая ширина фрейма для следующего разрешения составит 768px. В данном фрейме можно также отобразить 12 колонок. Зачастую, на таком разрешении адаптивный контент еще не «схлопывается», контент максимально вытягивается по высоте. Однако, в зависимости от задач, вы можете указать и другое количество колонок. Ширина одной колонки на таком разрешении составит 30px, если количество колонок указано 12. остальные параметры – как у предыдущих макетов.
• Следующий размер фрейма — 576 px.
  

• И последний фрейм шириной 320px, можно сделать 2 колонки, ширина колонки 130px. Остальные параметры как у предыдущих макетов. 320px – это минимальное разрешение в веб-дизайне, так как в настоящее время уже нет устройств, способных отобразить современный веб-контент меньше этого разрешения. Обычно на таком разрешении весь контент вытягивается в длинную ленту, однако иногда бывают случаи, когда необходимо разделить дизайн на колонки и на таком маленьком разрешении. Так как отступы в любом случае одинаковые по краям, можно сделать разлиновку на 2 колонки для того, чтобы в случае необходимости у нас была возможность воспользоваться колоночной системой.

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

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