Як створити макет для сайту

У статті буде представлений короткий огляд обов’язкових моментів, на які потрібно звернути увагу під час створення web макету для подальшої передачі його на верстку.

Вони допоможуть вам:

глибше продумати свій макет
уникнути зайвих питань
отримати більш якісний результат
залишитися друзями з frontend-розробником

Загальне

1. Іменування макетів (Сторінок, фреймів – обов’язково) повинні чітко передавати суть й призначення і бути прив’язані до логічних сторінок сайту або інших великих сутностей.
(Приклад: “головна – планшет”, “main – mobile”, “кнопки”)
[screen-example]

2. Необхідно дотримуватися структури документу при роботі із шарами, групами, компонентами і екранами, давати їм вичерпні назви
(Приклад: main-background, settings, button, registration-page-mobile)
(Поганий приклад: frame 1, group 45, iphone XR)
[screen-example]

3. Якщо потрібна мобільна версія, то на кожен екран повинен бути розроблений макет шириною 320px (iPhone SE), на додаток до якого можна створити макети з великим розширенням.
[screen-example]

4. Іконки (svg, …) повинні вивантажуватися і коректно відкриватися в браузері. Розмір svg артборда повинен відповідати контенту і потоку. Можна збирати сети іконок на окремих арт-бордах.
[screen-example]

5. Картинки (графічний контент) повинні бути вивантажувані. Мати розширення не менше 2x. Вивантажуватися без попередньої обробки. (Таких, як: округлені краї, прозорість, тінь). За винятком випадків, коли така обробка була явно запрошена.
[screen-example]

Необхідно враховувати розміри контентної області і те, що цей розмір змінюється від розширення до розширення. Тим самим “точка кріплення” повинна бути продумана.
Контентні картинки повинні вивантажуватися єдиним зображенням. (Наприклад: У нас є прямокутний блок з [фоном] , який буде змінюватися. Відповідно, вивантажуватися картинка повинна повністю з фоном, як на прикладі вище.)

6. Кольори шрифтів не повинні містити alpha-канал (прозорість), за винятком випадків, коли шрифт використовується на різних фонах (градієнтах або зображеннях) і тому повинен мати таку логіку.

7. Повний список (zip.архів) використовуваних в проекті шрифтів повинен надаватися в першу чергу (до початку робіт на фронті).

8. Також не завадить підібрати безпечний шрифт (які є у всіх ОС Windows, Mac, Linux і т.д.), схожий на використовуваний кастомний, щоб його можна було підставити на випадок помилки завантаження кастомного шрифту
(Приклад: ‘Roboto’, sans-serif)

9. Якщо маємо справу з кастомним іконочним шрифтом, то з іконками треба поводитися відповідно, а саме: потрібно вирівнювати за базовими лініями, щоб кілька іконок в ряду не були різного розміру і з різними відступами. Також кількість накреслень, базова товщина накреслень, рівень деталізації повинні зберігатися від іконки до іконки, інакше вони будуть виглядати різноманітно, немов з різних наборів шрифтів.

10. За відсутності спеціальних вимог до логіки поведінки, блоки в потоці повинні зберігати послідовність свого розташування при адаптиві на тих розширеннях, які відображені у вимогах.

11. Логіка повинна бути відображена в дизайні. Наприклад, кілька однакових карток, в кожній з яких відобразити різну кількість контенту, різні зображення, різні стани і т.д., щоб з’явилася можливість простежити залежність.

12. На додаток до макету вітається текстовий опис роботи елементів

13. Вказати поведінку елементів при переповненні текстом
(Наприклад, обрізати довгий текст трьома крапками в блоці і т.д.)

14. Залишати коментарі та опис (будь-яким способом) до анімованих елементів і елементів, поведінку яких неможливо однозначно визначити тільки за макетом.

15. Повинна бути присутня сторінка 404, 500, та інші стандартні екрани

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

Гайд, GUI, UI-kit, Style Guide

Опис і макети блоків, пов’язаних загальною функціональністю, наводяться в одному розділі документу.
(Наприклад, всі спливаючі вікна мають білий фон і заокруглення кутів 10px, кнопки …)
Типографіка повинна бути описана і відмальована додатково на окремому артборді.
(Приклад: Всі заголовки першого рівня мають розмір 24px і відступ знизу 40px. Всі заголовки другого рівня …, параграфи …, і тд.)
Всі посилання, кнопки, чекбокси та ін. інтерактивні елементи повинні бути намальовані в пасивному, наведеному, активному стані. Аналогічно цьому повинні бути стаи для мобілки (тач-пристроїв) – пасивне, момент-натискання. Стану: (link, hover, active, focus, visited, disabled, process).
[Checkbox-example]
[Buttons-example]
Навігаційні ланцюжки (Breadcrumbs) повинні бути намальовані у всіх станах (активний, попередній, заблокований, …) і з урахуванням перенесення рядків.
Пагінація повинна бути відмальована у всіх станах (на першому, останньому, проміжному етапі) і з різною кількістю кроків (1, багато) з урахуванням великої (3+ символу) кількості цифр.
Інпути (поля введення), форми повинні бути відмальовані у всіх станах: за замовчуванням, при фокусі, при натисканні, заблокована, повідомлення про помилку, повідомлення про коректність і тд.
[Input-example]
Обмежити кількість використовуваних кольорів і відтінків
[Color-level-example].

Всі використовувані кольори повинні бути винесені гайд.
(Будь-який новий колір в макеті вважатиметься помилкою і буде прирівняний до найближчого з гайду)
Унікальні з точки зору функціональності кольору повинні бути описані або прив’язані до суті.
(Наприклад, віджет акції на halloween з єдиним помаранчевим фоном: помаранчевий – колір для акцій на halloween)

Сітка

Розміри відступів і елементів повинні бути кратні одному значенню
(2px, 4px, 8px, 5px …)
[screen-example]
[post-example]
Сітка (якщо є) повинна бути описана і не суперечити
макетам. Розміри колонок, їх кількість і т.д.
Розміри контейнеру повинні бути описані на кожному з представлених
розширень.
Значення breakpoints повинні бути описані.
Вертикальні відступи блоків в потоці повинні бути стандартизовані. (Аналогічно типографіки)

Листи, пошта, розсилки, mail

Необхідно робити дизайн листа якомога простіше. Важливо розуміти як працює верстка і тег <table>. Листи верстаються на таблицях. (display: block, flex, position absolute – в листі застосувати не вийде). Адаптив максимально простий без блоків, що змінюють своє положення в потоці. Бажана звичайна “резина” і 1 набір стилів
Не застосовувати кастомні шрифти в листі

Звичайно, якщо ви малюєте для “дріблу” і т.п., то можете робити, що хочете, але для серйозного проекту ці пункти необхідні на 100%.

Джерело: habr.com