С началом карьеры веб-дизайнера, я сталкивалась с ситуацией, когда макеты не верстались из-за бардака везде. Несколько раз приходилось переделывать работу, потому что верстальщики отправляли её обратно (с матюками). Нервные какие-то...
![Закон жизни №1 Закон жизни №1](https://habrastorage.org/getpro/habr/upload_files/4e3/978/9fe/4e39789fe2dbe24a8cfbdc78f4797295.png)
Изрядно поколотив подушку, я собрала «волю в кулак» и оформила стандарты и правила, по которым макет сайта будет проектироваться. Назваю их микстурами от нервов. В этой статье я опишу, что «под капотом» моих макетов.
1 микстура от нервов — Grid options
С чего я начала? Конечно с размеров макетов и сетки. Тут не обойти вопрос: «Какую сетку использовать: Bootstrap или google.material?» Для себя я выбрала скомбинировать эти две методологии . Их системы сеток мне как дизайнеру понятны, а разработчики уже имеют наработки breakpoints.
Итак, фреймворк Bootstrap 5 предлагает создателям интерфейсов, 6 уровней сетки, в каждой из которых свой размер контейнера. На основе этих требований я строю модульные сетки (базовая сетка + колоночная) с шагом 8 px.
Разрешение XX-Large
![Общая ширина макета 1480 px, а боковые отступы справа и слева по 80 px. Общая ширина макета 1480 px, а боковые отступы справа и слева по 80 px.](https://habrastorage.org/getpro/habr/upload_files/a19/807/76c/a1980776cf8221f2b1de21887e01a666.jpg)
Дублирую информацию с картинки: Ширина макета 1480 px, ширина контейнера — 1320 px, количество колонок — 12, ширина 1 колонки — 88 px , ширина отступов — 24 px. Sitebar off — 64 px, type — left. Sitebar on — 200 px, type — left. Скачать image тут.
Этого мне показалось мало, и я решила в сетке XX-Large, X-Large и Large разместить фиксированный размер sitebar off и sitebar on. Эта заготовка на случай, когда сетка будет использоваться для 1 экрана с возможным выбором решения использовать боковое меню.
Разрешение X-Large
![Общая ширина макета 1272 px, а боковые отступы справа и слева по 72 px. Общая ширина макета 1272 px, а боковые отступы справа и слева по 72 px.](https://habrastorage.org/getpro/habr/upload_files/2e7/5ee/7ef/2e75ee7efa8cec9117651a957fafb0c6.jpg)
Дублирую информацию с картинки: Ширина макета 1272 px, ширина контейнера — 1128 px, количество колонок — 12, ширина 1 колонки — 72 px , ширина отступов — 24 px. Sitebar off — 64 px, type — left. Sitebar on — 200 px, type — left. Скачать image тут.
Разрешение Large
![Общая ширина макета 1096 px, а боковые отступы справа и слева по 80 px. Общая ширина макета 1096 px, а боковые отступы справа и слева по 80 px.](https://habrastorage.org/getpro/habr/upload_files/2c5/aa3/f64/2c5aa3f64ed6fabbe5b30807520f58e3.jpg)
Дублирую информацию с картинки: Ширина макета 1096 px, ширина контейнера — 936 px, количество колонок — 12, ширина 1 колонки — 56 px , ширина отступов — 24 px. Sitebar off — 64 px, type — left. Sitebar on — 200 px, type — left. Скачать image тут.
Разрешение Medium
![Общая ширина макета 808 px, а боковые отступы справа и слева по 32 px. Общая ширина макета 808 px, а боковые отступы справа и слева по 32 px.](https://habrastorage.org/getpro/habr/upload_files/db0/10a/f76/db010af769157bb45e20296f615e3618.jpg)
Дублирую информацию с картинки: Ширина макета 808 px, ширина контейнера — 744 px, количество колонок — 12, ширина 1 колонки — 40 px , ширина отступов — 24 px. Sitebar off — 48 px, type — left. Sitebar on — 160 px, type — left. Скачать image тут.
Разрешение Small
![Общая ширина макета 592 px, а боковые отступы справа и слева по 16 px. Общая ширина макета 592 px, а боковые отступы справа и слева по 16 px.](https://habrastorage.org/getpro/habr/upload_files/36c/733/041/36c733041a14d3586f543e09a047a62a.jpg)
Дублирую информацию с картинки: Ширина макета 592 px, ширина контейнера — 560 px, количество колонок — 8, ширина 1 колонки — 56 px , ширина отступов — 16 px. Скачать image тут.
Фиксированный размер места для бургера 32×32 px, type Right, Top. Icon «Burger» — 21 px.
![Место для бургерного меню Место для бургерного меню](https://habrastorage.org/getpro/habr/upload_files/d25/59b/8f5/d2559b8f5ea5162b05f82bcc50dea07c.jpg)
Меню раскрывается на 100% разрешения экрана. Оставляю себе напоминание об Icon «Close» — 21 px.
![Пример как будет выглядеть раскрывшийся “бургер” Пример как будет выглядеть раскрывшийся “бургер”](https://habrastorage.org/getpro/habr/upload_files/08c/7d6/e10/08c7d6e105476064da6ae5f294dc7647.jpg)
Разрешение Extra Small
![Общая ширина макета 368 px, а боковые отступы справа и слева по 16 px. Общая ширина макета 368 px, а боковые отступы справа и слева по 16 px.](https://habrastorage.org/getpro/habr/upload_files/cea/fa9/1e5/ceafa91e5b635170f4a6186971cffa8f.jpg)
Дублирую информацию с картинки: Ширина макета 368 px, ширина контейнера — Auto, количество колонок — 4, ширина 1 колонки — Auto , ширина отступов — 16 px. Скачать image тут.
Фиксированный размер места для бургера 24×24 px, type Right, Top. Icon «Burger» — 21 px.
![Место для бургерного меню Место для бургерного меню](https://habrastorage.org/getpro/habr/upload_files/853/08b/baf/85308bbafcc11d44e8bbedda72d52079.jpg)
Меню раскрывается на 100% разрешения экрана. Оставляю себе напоминание об Icon «Close» — 21 px.
![Пример как будет выглядеть раскрывшийся “бургер” Пример как будет выглядеть раскрывшийся “бургер”](https://habrastorage.org/getpro/habr/upload_files/c58/1aa/5d5/c581aa5d5efd9fdc9738f519089a4a26.jpg)
Пояснение.
Несмотря на большое количество описанных сеток, я базово для клиента делаю 3 разрешения: XX-Large, Medium, Extra Small. Остальные разрешения выполняю только при просьбе подробно проработать дизайн.
2 микстура от нервов — Названия слоёв
Стоило однажды завести себе привычку правильно называть слои и всё — эти принципы навсегда уложились в голове. Работа стала намного быстрее и стало проще возвращаться к проектам спустя много лет.
![Схема вложенности слоёв Схема вложенности слоёв](https://habrastorage.org/getpro/habr/upload_files/814/0fc/f7e/8140fcf7e6e7c9f545a3b5ae05931a53.jpg)
Логика тут сказочная «игла в яйце, яйцо в утке, а утка в зайце». Поясню словами, container всегда только один. Его ширина определена выше, исходя из разрешения экрана. Я буду много опираться на размеры сеток, потому что принцип однообразия важен для лечения нервов разработчиков.
![Основной принцип в веб-дизайне Основной принцип в веб-дизайне](https://habrastorage.org/getpro/habr/upload_files/85b/0ff/1b0/85b0ff1b09fa5ebf7108bc9d3e09b6ee.png)
Продолжаем разговор, в этом container лежат screen 1, screen 2 и т.п. Этим Screen будет, например, главный экран или призыв к действию (Call To Action). А внутри каждого screen содержание согласно ТЗ.
Главное, помнить-то 6 слов:
Container;
Screen;
Column (-s);
Image;
Row (-s);
Icon (-s).
![Скриншот расположения слоев Скриншот расположения слоев](https://habrastorage.org/getpro/habr/upload_files/f31/aa9/171/f31aa9171e9aac34af5b56ff35ed0276.jpg)
3 микстура от нервов — Отступы
Куда отступать и по каким правилам учат курсы дизайна, называется это горизонтальным и вертикальным ритмами. Не буду подробно останавливаться, а скорее покажу свой вариант изменений расстояний в зависимости от размеров container.
![Таблица размеров отступов в px Таблица размеров отступов в px](https://habrastorage.org/getpro/habr/upload_files/ad7/183/df5/ad7183df5d07a43c439f2f426fd38422.png)
Скачать image тут.
Причем, 1 уровень использую как отступы между screen. Какие уровни использовать и где, решает сам дизайнер. Думаю ясно, что в месте, где был отступ 48 px на XX-Large, в разрешении Medium он станет 32 px. Важно, чтобы из макета в макет использовать одни и те же значения, чтобы градус напряжения в команде (например, в больших проектах) был сведен к минимуму.
Заключение
Конечно, я не открыла новую страну, а только показала свои наработки. Эти 3 микстуры от нервов на курсах для веб-дизайнеров называют «базовыми знаниями» и рассказывают про правила их использования, но мало говорят о точных значениях.
А меня как человека очень дотошного интересуют только цифры и «сколько вешать в граммах». У разработчиков достаточно забот, поэтому не стоит добавлять к ним еще и мигрень с макетом.
![И крепкий чай. Или не чай. И крепкий чай. Или не чай.](https://habrastorage.org/getpro/habr/upload_files/78b/d59/223/78bd592236a4ec79a848cafa003b9285.png)
Данная статья является личными наработками автора.