Чек-лист

веб-дизайнера
В помощь веб-дизайнеру

Moscow Digital Academy

О чем

расскажем?
Композиция и сетки Работа с логотипами
Сетки в веб-дизайне Макет и адаптивы
Основы типографики Правила UX
Классификация шрифтов Что такое UI-дизайн?
Редактура текста Как проверить свой дизайн?
Какие шрифты использовать? Полезные ресурсы
 01

Композиция

и сетки
Композиция
01

Композиция
Композиция – это гармоничное расположение элементов на экране
таким образом, чтобы максимально раскрывалось их содержание.
Якорные объекты – это ключевые точки взаимодействия мозга

пользователя с областью композиции.

Композиция

01

Правило третей

Главная задача дизайнера - управлять вниманием пользователя.

Для этого важно уметь правильно расставлять акценты и выделять

якорные объекты.

Один из способов добиться сбалансированной композиции -

использовать правило третей.

Мысленно разделив страницу на девять частей, вы получите точки

пересечения, наиболее удачные для размещения фокуса. Именно

на них будет сосредоточено внимание пользователя в первую

очередь.
Композиция
01

Обилие крупных элементов.

Глаз не знает, за что зацепиться.

Композиция
01

Фокус направлен

на изображение.

Пользователю легко отличить

главное от второстепенного
Композиция
01

Правило баланса
Баланс — это гармоничное размещение

и взаимодействие всех элементов композиции.

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

Симметрия

визуально приятна

на подсознательном

уровне, поскольку

композиция

выглядит

организованной

и гармоничной.

Пример использования

правила.

Работа cтудента Moscow

Digital Academy
Асимметричный
баланс

В отсутствии равновесия

наш взгляд начинает

рефлективно искать

противовес, это повод

привлечь внимание

к той части страницы,

которая могла бы

остаться незамеченной.
Композиция
01

Правило размещения

в угловых точках и в центре

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

HD +7 932 932 32 23

Пример

использования
Holla! Digital! Все якорные объекты

на макете расположены

по центру и в угловых точках

facebook hd@holla.ru
Композиция
01

Правило силовых линий

Якорные объекты также можно разместить вдоль одной

из силовых линий композиции.

Композиция
01

Пример

использования
В данном случае, контент
расположен по силовым
линиям.
Модульные сетки
02

Сетки в веб-дизайне
В работе дизайнера, когда макеты состоят из различных элементов,

сетка помогает их упорядочить. Она позволяет, не вычисляя каждое

расстояние и размер в отдельности, заложить ключевые

закономерности при её построении всего один раз.

1. Cетка определяет единый стиль оформления

2. Ускоряет работу с макетом

3. Снижает вероятность ошибок

4. Макет выглядит более эстетично

Модульные сетки
02

Колоночная сетка
Сетка, имеющая колонки в своей структуре.

Обычно используют от 2 до 12 колонок.

Ширина межколонника определяется его

назначением, если он просто отделяет элементы друг

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

Пример

использования
В данном случае, используется
12-колоночная сетка, которая
образует силовые линии.
Модульные сетки
02

Модульная сетка
Модульная сетка характеризуется наличием как вертикального
членения, так и горизонтального.
То, что образуется на пересечениях, есть модуль — прямоугольник

с заданнойвысотой и шириной, который лежит в основе композиции.

Где используется?

Страницы с большим количеством баннеров

Главные страницы интернет магазинов

Модульные сетки
02

Пример

использования
Использование модульной
сетки определяется
контентом.
Интенсивы

Хочешь получить
полную версию?
Приходи на интенсив для новичков!