Структура сайта. Разрешение и размеры. Модульные сетки

. Стажировка-2013

Дизайнеры. Занятие 4

Структура сайта.Разрешение и размеры. Модульные сетки


Структура сайта«Внешняя»:

«Внутренняя»:


Структура сайта«Внутренняя»:

шапка: лого, инфа, поиск, что еще?меню (элементы навигации) - верт, гориз, нестандартное, выпадающееосн часть - контентфутер - карта сайта, ссылки, адреса, счетчики и т.д.


Разрешение и размеры

72 dpiDpi - Dots Per Inch = точек на дюйм - мера разрешающей способности монитора/принтера/сканера и т.д. Дюйм — единица длины, равная 2,541 см.


Разрешение и размеры

Ширина макета - ?Ориентируемся на 980 - 1000 пикселей при фиксированном макете.

Не забывать про статистику мониторов!


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

Часть первая. «38 попугаев»

Удава можно дискретизировать с частотой, равной единице, деленной на попугая )


Модульные сеткиЗадачи сетки:

• Ускорение работы• Сбалансированность

и пропорциональность• Ускорение и шаблонирование,

единообразность элементов


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

• Блочная сетка • Колоночная сетка


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

• Модульная сетка • Иерархическая сетка


Модульные сеткиАлгоритм:

1. Начинаем с определения рабочей области

2. Делаем шрифтовую сетку



3. Строим вертикальное членение 4. Делаем горизонтальное членение



5. Получаем модульную сетку 6. Объединяем модули в регионы, создаем композицию, рисуем



Оптика1. Микромодуль2. Оптические компенсации

Ломайте сетку к чертовой матери, если так будет выглядеть лучше, если это решает вашу задачу!

Выводы:1. Геометрия не так важна. Оптика решает.2. Сетка — это всего лишь инструмент. Причем ненавязчивый.



Оптика3. Плашки

Сдвигать или не сдвигать?



Оптика4. Висячая пунктуация

5. Шрифты с засечками и крупные кегли




Оптика6. Иллюстрации


Структура сайта. Разрешение и размеры. Модульные сетки

Documents