Композиция + Модульные сетки. Тема 2

Визуальный язык, контролы - элементы интерфейса

Эмпатия и Рефлексия

1.1 Законы композиции 

1. Закон целостности, «все объекты композиции — части одного целого и следуют одной идее»

2. Закон подчиненности, «все объекты композиции подчинены общей иерархии, структуре и воспринимаются последовательно»

3. Закон жизненности, «композиция (макет) должна показывать пользователю вещи знакомые ему в реальной жизни »

Композиция не работает без контраста

Средства композиции:

- равновесие;

- пропорции;

- ритмы;

- статика и динамика

Объекты композиции:

- точка (акцентирование) — объект композиции, форма которого не имеет значение из-за его малого размера;

- линия (динамика) — объект композиции, толщина которого не имеет значения из-за его длины;

- пятно (зонирование) — большой композиционный объект.

Вес в композиции строится в зависимости от:

- объема фигуры;

- расположения на макете;

- контраста к окружающей среде

Важен не объект, а соотношение с другими объектами. Принципы взаимодействия

1.2 Навигационные решения

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

- Постоянное меню (включая подвал)

- Контекстное меню(видимые, по правой кнопке мыши или долгому нажатию пальцем)

- Поиск

- Хлебные крошки

- Интструменты для работы со списками (сортировка, фильтрация, группировка, постраничная навигация или подгрузка)

- Контекстные провязки контента

- Системы уведомления и алертов

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

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

Виды сайтов:

1.Корпорпативный

2.Сайт-визитка

3.Интернет-магазин

4.Портал

5.Блог

6.Lending Page

7. Соц.сеть и т.д.

1.3 Модульная сетка сайта

Метрическая система, которую мы используем, тоже является модульной. Один метр состоит из ста модулей «сантиметр», который тоже в свою очередь можно расчленить на более мелкие модули.

Таким образом, модуль — это единица измерения, установленная для придания соразмерности, а сетка — система пропорций.

Использование сетки в проектировании – часть профессиональной культуры дизайнера

ЗАДАЧИ СЕТКИ

- Ускорение работы: мы не тратим лишнего времени на поиск геометрического места элемента в макете. К тому же имеем обоснования в размещении элементов.

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

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

- Определение фреймворка для верстки. Очень популярна 12-колоночная сетка, её используют большенство популярных фреймворков.

- Логика адаптивности

- Механизм ритма - это набор 40-пиксельных колонок с 20-пиксельными колонками