диздание дизайна сайта на основе модулей : пошаговая инструкция

разбирает, когда удобно использовать и как споекти и как споектировать как спроектировать страницу на их основе.

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

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

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

построения веб-страницы на основе модулей на примере портфолио фотографа.

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

Самая распространёная сетка в веб-дизайне состоит из 12 колонок. Она же по умолчанию используется в Тильде. 12 колонок можно поделить на 2, 3, 4 и 6 равных частей. Благодаря этому сетка получается гибкой и позоляет разместить на этаже как чётное, так и нечётное количество элементов. Чем больше контента, тем боле детализированной должна быть сетка.

колонок нужно определиться со значением gouttière - межколоночного расстояния. Его значение будет зависеть от того, насколько плотной вы хотите сделать вёрстку. в 10 или 20 px - более плотная и напряжёная вёрстка. Gouttière в 40 и более пикселей - более воздушная и невесомая.

настройки сетки создаётся протип страницы с использованием простых фигур. тажа, то есть определимся, сколько модулей нужно расположить в одном ряду. количества количента : чем его больше, тем большеше будет тулей на дном этаже больше. Например, при создани сайта начинающего фотографа нужно предусмотреть, что работ у него немного, поэтому изображения можно показать крупно - либо во всю ширину контентной области по одному на этаж, либо по 2 картинки в ря. Если в портфолио много работ, тогда в одном ряду следует разместить больше количество фотографий, например, 3-4. Конечно, это не железное правило, а рекомендация.

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

Пауза - намеренный пропуск элемента или групы элементов. Композиционные паузы, чтобы пользователь не переутомился от количества информаци и не ушёл с сайта. композиционую паузу, можно потерять внимание человека из-за перенияния внимания контом.

Если объект окружён воздухом, всё внимание будет направлено только на него. Поэтому использовать композиционые паузы нужно там, где хочется выделить элемент.

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

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

Les deux sont en train de s'entendre sur un plan d'action à long terme. Контент расставить нужно так, чтобы предусмотреть его изменение. Например, если название фотографии будет не в две строки, а в три. правильное межстрочное растояние, чтобы строки не друг налипали друг на друг друг. При этом оно должно быть меньше, чем внешние отступы.

Les deux sont en train de s'entendre sur un plan d'action. Затем выберите финальный вариант.

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

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