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

Итоговый проект Цифровой лонгрид в формате спецпроекта (не менее 10 экранов) и маркетинговый лендинг (не менее 10 блоков), созданные на Tilda или в формате прототипа в Figma. Проекты должны быть оформлены в отдельные презентации на hsedesign.ru и содержать ссылки на рабочие версии.

Сетка в вебдизайне — это базис на который дизайнер накладывает контент сайта. Она складывается из колонок и строк, которые образуют систему ячеек, или модульную сетку.

— Единый стиль. С помощью сетки дизайнер устанавливает добавления новых элементов в макет. — Ускоряет вёрстку макета. С сеткой веб-дизайнер тратит меньше усилий на размещение новых элементов на лендинге — достаточно выбрать направляющую и привязать элемент к ней. — Простота считывания информации. Сетка создаёт визуальный порядок, в котором проще ориентироваться. Обнаруживая закономерности в типах контента пользователь начинает искать их в определенных местах. — Эстетичность. Пропорциональность и структурированность элементов лендинга оставляет приятное впечатление у посетителей сайта. — Упрощать перенос макета в код. Фронтенд-разработчикам проще работать с сайтами, созданными дизайнерами по модульной сетке.

Колонки. Это параллельные вертикальные полосы, составляющие основу любой сетки. Посмотрите на изображение ниже: каждая полоса — это одна колонка. Сетки могут состоять из 24, 16, 12, 9, 6, 4, 3 и даже 2 колонок. Наиболее распространенной в веб-дизайне 12-колоночная сетка. Межколонные отступы (пробелы, межколонники, средники). Это расстояние между колонками. Отступы дают дизайну «воздух» и не позволяют элементам слиться в одну кучу.

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

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

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

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

Сетка — 12 столбцов Колонки — 30 px Межколонник — 20 px

Советы от вебдизайнеров:

1. Вы также можете использовать сетку без межколонников и полей.


2. Вы можете разделить увеличить количество колонок, чтобы сделать сетку более детализированной. Например, 16 колонок вместо 8.


3. Эту сетку можно легко адаптировать к разным экранам.

 


Сетка — 8 столбцов Колонки — 60 px Межколонник — 30 px

Советы от вебдизайнеров:

1. Используйте горизонтальную сетку, основанную на высоте строки.


2. Определите размер стиля текста (обычно 14-16 пикселей), отрегулируйте соответствующую высоту строки. Это будет ваша основа для горизонтальной сетки.


3. Выберите размер шрифта для другой типографики, подходящей для него.

 


Линий — 8 Колонки — 80 px

Советы от веб-дизайнеров:

1. Проведите линии на пересечениях звезды, пока не получите отступ в 40–100 пикселей от краёв экрана.


2. Не используйте все линии сетки, выберите несколько линий и используйте их.


3. Эту сетку очень легко адаптировать для других экранов.