Цели модуля Осваивая принципы верстки и инструменты работы с диджитал-проектами, студенты учатся создавать комплексный контент для спецпроектов и сайтов. Перед студентами стоит задача разработки типографических и стилистических решений, создания визуального контента, инфографики и интерактивных элементов.
Итоговый проект Цифровой лонгрид в формате спецпроекта (не менее 10 экранов) и маркетинговый лендинг (не менее 10 блоков), созданные на Tilda или в формате прототипа в Figma. Проекты должны быть оформлены в отдельные презентации на hsedesign.ru и содержать ссылки на рабочие версии.
Лекции
Лекция 1
Сетки в веб-дизайнеСетка в вебдизайне — это базис на который дизайнер накладывает контент сайта. Она складывается из колонок и строк, которые образуют систему ячеек, или модульную сетку.
Другие полезные качества сетки.
— Единый стиль. С помощью сетки дизайнер устанавливает добавления новых элементов в макет. — Ускоряет вёрстку макета. С сеткой веб-дизайнер тратит меньше усилий на размещение новых элементов на лендинге — достаточно выбрать направляющую и привязать элемент к ней. — Простота считывания информации. Сетка создаёт визуальный порядок, в котором проще ориентироваться. Обнаруживая закономерности в типах контента пользователь начинает искать их в определенных местах. — Эстетичность. Пропорциональность и структурированность элементов лендинга оставляет приятное впечатление у посетителей сайта. — Упрощать перенос макета в код. Фронтенд-разработчикам проще работать с сайтами, созданными дизайнерами по модульной сетке.
Основные термины
Колонки. Это параллельные вертикальные полосы, составляющие основу любой сетки. Посмотрите на изображение ниже: каждая полоса — это одна колонка. Сетки могут состоять из 24, 16, 12, 9, 6, 4, 3 и даже 2 колонок. Наиболее распространенной в веб-дизайне 12-колоночная сетка. Межколонные отступы (пробелы, межколонники, средники). Это расстояние между колонками. Отступы дают дизайну «воздух» и не позволяют элементам слиться в одну кучу.
Пример 12 колоночной сетки
Столбцы. Колонки и межколонные отступы образуют столбцы, в которых будет размещаться контент. Столбцы могут иметь разную ширину, но они всегда начинаются и заканчиваются на границе колонки и не захватывают межколонник.
Ряды. Это горизонтальные параллельные колонки, разделяющие страницу на несколько частей. В идеальной ситуации они должны быть одинаковой высоты, но на практике этого не всегда можно достичь. Особенно, если дизайн сложный и состоит из разноплановых элементов.
Модули. Это прямоугольники или квадраты, которые появляются при пересечении колонок и рядов. Можно сказать, что модули — это те самые кирпичики, из которых строится каркас всего дизайна. Поля. В веб-дизайне как и в книжном дизайне есть поля.
Все вышеперечисленные элементы можно комбинировать в сетке. Например, создать трехколоночный макет и разбить две колонки на модули.
Виды сеток
Сетка из колонок
Сетка — 12 столбцов Колонки — 30 px Межколонник — 20 px
Советы от вебдизайнеров:
- Вы также можете использовать сетку без межколонников и полей.
- Вы можете разделить увеличить количество колонок, чтобы сделать сетку более детализированной. Например, 16 колонок вместо 8.
- Эту сетку можно легко адаптировать к разным экранам.
Сетка — 8 столбцов Колонки — 60 px Межколонник — 30 px
Советы от вебдизайнеров:
- Используйте горизонтальную сетку, основанную на высоте строки.
- Определите размер стиля текста (обычно 14-16 пикселей), отрегулируйте соответствующую высоту строки. Это будет ваша основа для горизонтальной сетки.
- Выберите размер шрифта для другой типографики, подходящей для него.
Van de Graaf
Линий — 8 Колонки — 80 px
Советы от веб-дизайнеров:
- Проведите линии на пересечениях звезды, пока не получите отступ в 40–100 пикселей от краёв экрана.
- Не используйте все линии сетки, выберите несколько линий и используйте их.
- Эту сетку очень легко адаптировать для других экранов.
Модульная сетка
Модульная или прямоугольная сетка. Этот тип сетки очень структурирован и предлагает очень широкий спектр применения. У нее много общего с сеткой с колонками.
Горизонтальных линий — 25 Вертикальных линий — 25
Советы от веб-дизайнеров:
- Размер и пропорции модуля будут образовывать горизонтальную и вертикальную сетку (если содержимого мало, то лучше выбрать модуль поменьше, если их много, то — побольше…)
- Используйте несколько модулей для создания межколонников.
Другие виды сеток
Сетки могут быть асимметричными, круглыми, диагональными… Главное, чтобы сетка помогала структурировать информацию.
Линий — 8 Колонки — 80 px
Советы от веб-дизайнеров:
- Сначала обратите внимание на идею и композицию и используйте сетку как инструмент для структурирования ваших идей.
- Концепция дизайна может существенно изменить стандартную сетку, на некоторых страницах возможно отказаться от текущей сетки сайта (если этого требует концепция).
Линий — 6 Колонки — 80 px
Советы от веб-дизайнеров:
- Комбинируйте нестандартные и стандартные сетки, это позволит вам сделать ваш сайт креативным, не теряя при этом его удобства.
- Сетка — это просто набор правил и рекомендаций по размещению контента, не относитесь к ней слишком серьёзно.
