Организуйте файлы макета сайта по назначению: отдельно храните исходники, экспортируемые ресурсы и архив, а страницы и компоненты называйте по единому правилу. Такая структура папок сайта помогает быстро находить нужные материалы, передавать проект разработчику и снижает риск перезаписи. Сначала согласуйте схему с командой, затем переносите файлы и проверяйте связи.
Опорные правила файловой системы макета
- Разделяйте редактируемые исходники, готовые к передаче ресурсы и архивные версии.
- Группируйте материалы по страницам, компонентам и назначению, а не только по типу расширения.
- Используйте короткие имена латиницей, единый регистр и понятные разделители.
- Фиксируйте правила для версий, состояний интерфейса и адаптивов в одном месте.
- Перед перемещением и переименованием делайте резервную копию и проверяйте связанные ресурсы.
Соберите структуру проекта по типам страниц и компонентов
Такой подход подходит для макетов с несколькими страницами, повторяющимися блоками или передачей проекта между дизайнерами и разработчиками. Для небольшого одноразового макета достаточно нескольких ясно названных папок: избыточная иерархия усложнит поиск.
Начните с корневой папки проекта, например site-project. Внутри можно создать такую структуру:
site-project/
01-source/
02-assets/
03-exports/
04-archive/
README.mdВ рабочей папке разделяйте страницы и общие элементы. Например, каталог 01-source/pages может содержать макеты главной страницы, каталога и карточки товара, а 01-source/components - шапку, кнопки и карточки.
Для разработки макета сайта с несколькими разделами добавляйте подкаталоги только там, где они упрощают навигацию. Не копируйте один и тот же компонент в папки разных страниц: храните общую версию отдельно и указывайте её использование в макете.
Разделите исходники, экспортируемые ресурсы и архивные версии
Перед началом подготовьте доступ к рабочей папке и облачному хранилищу или репозиторию, если ими пользуется команда. Понадобятся исходные файлы макета, изображения и шрифты, а также приложение или процесс, которым вы экспортируете графику.
- Исходники: редактируемые файлы макета и материалы, нужные для его дальнейшей правки.
- Экспортируемые ресурсы: подготовленные изображения, иконки и другие файлы для передачи или публикации.
- Архив: устаревшие версии, которые нужно сохранить для истории, но не использовать в текущей работе.
Не удаляйте прежние материалы сразу после переноса. Сначала проверьте, что новая структура открывается, нужные ресурсы доступны, а участники команды понимают, где находится актуальная версия.
Выберите схему названий, понятную всей команде
Перед переименованием учтите риски и ограничения: внешние ссылки на файлы могут перестать работать; совместная работа может привести к одновременной перезаписи; одинаковые имена затрудняют поиск; не все инструменты одинаково обрабатывают пробелы и символы; архивная версия может быть ошибочно принята за актуальную.
- Согласуйте формат. Выберите латиницу, единый регистр и разделитель, например дефис:
product-card. Не смешивайте варианты вродеProductCard,product_cardиКарточка товара. - Назовите файлы по содержанию. Укажите тип страницы или компонента и, когда нужно, его назначение:
page-catalog,component-header,icon-search. Избегайте названийnew,finalиfinal2. - Добавьте различительные параметры. Для состояний и адаптивов используйте согласованные суффиксы, например
button-hoverилиpage-home-mobile. Не добавляйте параметры, если они не различают реальные варианты. - Определите правило версий. Если команда хранит версии в именах, используйте один формат, например
site-v03, и назначьте место для предыдущих выпусков. Не перезаписывайте исходник, пока не создана резервная копия. - Запишите правила рядом с проектом. Добавьте в
README.mdкраткие соглашения: назначение папок, формат имён, обозначения состояний и место актуальной версии. Так участникам не придётся угадывать, как организовать файлы сайта.
Зафиксируйте правила для версий, состояний и адаптивов
После организации проверьте структуру по списку. Отметьте выполненные пункты в рабочем документе или задаче проекта:
- У каждого участника есть доступ к рабочим исходникам и нужным ресурсам.
- Папка с актуальной версией не содержит нескольких файлов с неясными пометками вроде
final. - Правило обозначения версий едино для файлов и папок проекта.
- Состояния компонентов различаются по понятным именам, например
input-errorиinput-disabled. - Адаптивные варианты обозначены единообразно, например
desktop,tablet,mobile. - Архив отделён от активных материалов и не используется как источник экспорта.
- В README указано, где искать исходники, ресурсы и архив.
Настройте хранение шрифтов, изображений и других зависимостей
При подготовке материалов проверьте типичные ошибки:
- Не складывайте исходные и экспортированные изображения в одну папку без обозначения назначения.
- Не удаляйте шрифт или изображение, пока не убедились, что макет больше на них не ссылается.
- Не используйте одинаковые имена для разных файлов, например
logo.svgв нескольких несвязанных каталогах. - Не переименовывайте связанные ресурсы без проверки ссылок в макете и экспортных настройках.
- Не помещайте личные данные и материалы, на передачу которых нет разрешения.
- Не храните единственную копию исходника в папке временного экспорта или на личном устройстве.
- Не смешивайте сторонние материалы с авторскими без пометки об источнике и условиях использования.
При передаче материалов для создания сайта под ключ приложите перечень ресурсов и укажите, какие файлы считаются актуальными. Если задачу выполняют внешние специалисты, например команда услуг веб-разработки, согласуйте с ними структуру и способ передачи до начала экспорта.
Проверьте структуру на дубли, потерянные связи и риск перезаписи
Выберите способ хранения с учётом размера команды и частоты изменений:
- Общая папка в облаке подходит для небольших проектов, если участники согласовали права доступа и порядок именования версий.
- Репозиторий или система контроля версий уместны, когда важно отслеживать изменения и восстанавливать прежнее состояние файлов. Уточните, какие форматы и объёмы файлов поддерживает выбранный инструмент.
- Экспорт отдельным пакетом удобен для передачи готовых ресурсов: включайте только необходимые файлы и добавляйте инструкцию, но сохраняйте редактируемые исходники отдельно.
Перед завершением работы сделайте копию проекта, проверьте дубли по именам и содержимому, откройте исходник и убедитесь, что связанные изображения и шрифты доступны. Переносите файлы небольшими группами, чтобы при сбое было проще определить причину.
Практические ситуации при организации файлов макета
Можно ли использовать русские названия папок?
Можно, если вся команда и инструменты проекта обрабатывают такие имена без проблем. Для совместной передачи удобнее заранее согласовать единый формат, например латиницу и дефисы.
Нужно ли добавлять номер версии в каждое имя файла?
Нет, если система хранения уже сохраняет историю изменений и всем понятно, где лежит актуальная версия. Если версии обозначаются в именах, используйте единый формат и архивируйте устаревшие файлы отдельно.
Где хранить экспортированные изображения?
Храните их отдельно от редактируемых исходников, например в 02-assets или 03-exports. Название папки должно однозначно показывать, предназначены ли файлы для дальнейшей правки или для передачи.
Что делать, если один компонент используется на нескольких страницах?
Храните его в общей папке компонентов и ссылайтесь на одну согласованную версию. Не создавайте копии для каждой страницы без необходимости.
Как безопасно переименовать файл, на который ссылается макет?
Сначала сделайте резервную копию, затем переименуйте файл и проверьте, что макет по-прежнему находит ресурс. Если связь потерялась, восстановите имя или обновите ссылку в макете.
Что передать разработчику вместе с макетом?
Передайте актуальный исходник, необходимые экспортированные ресурсы и краткую инструкцию по структуре. Отдельно обозначьте архивные материалы, чтобы их не приняли за действующие.