Наводим порядок в макете и выстраиваем понятный нейминг

Это система понятных и последовательных названий для слоёв, групп, Frame и других элементов макета, которая помогает быстрее ориентироваться в структуре файла.

Это отдельная версия макета, зафиксированная на определённом этапе работы после заметных изменений или правок.

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

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

Удобно располагать версии слева направо: сначала первая, затем следующая и так далее. Рядом можно указывать дату изменения. Такой порядок позволяет быстро сравнивать варианты и понимать последовательность работы.

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

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

Рабочая область вокруг актуального макета должна оставаться чистой. Изображения, старые варианты блоков и другие материалы, которые больше не нужны, удаляем или переносим в архив. Так в файле остаётся только то, с чем действительно продолжается работа.

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

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

Не стоит оставлять десятки отключённых объектов «на всякий случай». Они усложняют навигацию и делают структуру макета менее понятной.

Связанные элементы при необходимости объединяем в логичные группы или Frame: например, изображение с фоном, текстовую часть или набор повторяющихся элементов.

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

Необязательно глубоко изучать HTML только ради нейминга. Достаточно постепенно запоминать основные обозначения:

• header — шапка сайта;
• footer — подвал;
• menu — меню;
• logo — логотип;
• link — ссылка;
• btn или button — кнопка;
• text — текстовый блок;
• bg — фон;
• bg-image — фоновое изображение;
• separator — разделитель.

Названия должны в первую очередь помогать быстро понять назначение элемента.

Крупные секции можно называть последовательно: Block 01, Block 02, Block 03 и далее. Двузначная нумерация помогает сохранить аккуратный порядок, особенно если секций больше девяти.

Футер при этом лучше называть непосредственно Footer, а шапку — Header, поскольку у этих элементов уже есть понятные общепринятые названия.

Внутри блока нейминг становится более конкретным и отражает назначение содержимого.

Название лучше строить не только по внешнему виду элемента, но и по его назначению.

Например, кнопку можно назвать просто Btn, а можно уточнить действие:

• Btn Call — кнопка вызова формы или звонка;
• Btn Scroll — кнопка, которая ведёт к другому блоку страницы;
• Link Call — ссылка для связи.

Для повторяющихся карточек удобно использовать нумерацию: Card 01, Card 02. То же самое можно делать с изображениями и другими похожими элементами.

Необязательно создавать длинные английские предложения. Короткого и понятного кодового названия обычно достаточно.

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

Например, несколько декоративных элементов фотографии можно собрать в BG Image, а текстовые элементы — в Text. Внутри них необязательно переименовывать каждый объект, если структура и так очевидна.

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

После настройки нейминга ещё раз проходим по всем секциям:

• проверяем названия Frame и групп;
• удаляем неиспользуемые и скрытые слои;
• объединяем связанные элементы;
• переносим старые варианты в архив;
• сохраняем только актуальные рабочие версии;
• придерживаемся одного принципа названий на латинице.

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

Домашнее задание