1. . Стажировка-2013
Дизайнеры. Занятие 4
Структура сайта.
Разрешение и размеры. Модульные сетки

2. . Стажировка-2013
Структура сайта
«Внешняя»:
«Внутренняя»:

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

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

5. . Стажировка-2013
Разрешение и размеры
Ширина макета - ?
Ориентируемся на 980 - 1000 пикселей при фиксированном макете.
Не забывать про статистику мониторов!

6. . Стажировка-2013
Модульные сетки
Часть первая. «38 попугаев»
Удава можно дискретизировать с частотой, равной единице,
деленной на попугая )

7. . Стажировка-2013
Модульные сетки
Задачи сетки:
• Ускорение работы
• Сбалансированность
и пропорциональность
• Ускорение и шаблонирование,
единообразность элементов

8. . Стажировка-2013
Модульные сетки
Виды сеток:
• Блочная сетка • Колоночная сетка

9. . Стажировка-2013
Модульные сетки
Виды сеток:
• Модульная сетка • Иерархическая сетка

10. . Стажировка-2013
Модульные сетки
Алгоритм:
1. Начинаем с определения рабочей
области
2. Делаем шрифтовую сетку

11. . Стажировка-2013
Модульные сетки
Алгоритм:
3. Строим вертикальное членение 4. Делаем горизонтальное членение

12. . Стажировка-2013
Модульные сетки
Алгоритм:
5. Получаем модульную сетку 6. Объединяем модули в регионы,
создаем композицию, рисуем

13. . Стажировка-2013
Модульные сетки
Алгоритм:

14. . Стажировка-2013
Модульные сетки
Оптика
1. Микромодуль
2. Оптические компенсации
Ломайте сетку к чертовой матери, если так будет выглядеть
лучше, если это решает вашу задачу!
Выводы:
1. Геометрия не так важна. Оптика решает.
2. Сетка — это всего лишь инструмент. Причем ненавязчивый.

15. . Стажировка-2013
Модульные сетки
Оптика
3. Плашки
Сдвигать
или не сдвигать?

16. . Стажировка-2013
Модульные сетки
Оптика
4. Висячая пунктуация
5. Шрифты с засечками
и крупные кегли
Сдвигать
или не сдвигать?

17. . Стажировка-2013
Модульные сетки
Оптика
6. Иллюстрации
Сдвигать
или не сдвигать?