Структура сайта. Разрешение и размеры. Модульные сетки
-
Upload
katya-dolgacheva -
Category
Documents
-
view
426 -
download
4
description
Transcript of Структура сайта. Разрешение и размеры. Модульные сетки
![Page 1: Структура сайта. Разрешение и размеры. Модульные сетки](https://reader034.fdocuments.net/reader034/viewer/2022051013/54987b86b479593a678b4646/html5/thumbnails/1.jpg)
. Стажировка-2013
Дизайнеры. Занятие 4
Структура сайта.Разрешение и размеры. Модульные сетки
![Page 2: Структура сайта. Разрешение и размеры. Модульные сетки](https://reader034.fdocuments.net/reader034/viewer/2022051013/54987b86b479593a678b4646/html5/thumbnails/2.jpg)
. Стажировка-2013
Структура сайта«Внешняя»:
«Внутренняя»:
![Page 3: Структура сайта. Разрешение и размеры. Модульные сетки](https://reader034.fdocuments.net/reader034/viewer/2022051013/54987b86b479593a678b4646/html5/thumbnails/3.jpg)
. Стажировка-2013
Структура сайта«Внутренняя»:
шапка: лого, инфа, поиск, что еще?меню (элементы навигации) - верт, гориз, нестандартное, выпадающееосн часть - контентфутер - карта сайта, ссылки, адреса, счетчики и т.д.
![Page 4: Структура сайта. Разрешение и размеры. Модульные сетки](https://reader034.fdocuments.net/reader034/viewer/2022051013/54987b86b479593a678b4646/html5/thumbnails/4.jpg)
. Стажировка-2013
Разрешение и размеры
72 dpiDpi - Dots Per Inch = точек на дюйм - мера разрешающей способности монитора/принтера/сканера и т.д. Дюйм — единица длины, равная 2,541 см.
![Page 5: Структура сайта. Разрешение и размеры. Модульные сетки](https://reader034.fdocuments.net/reader034/viewer/2022051013/54987b86b479593a678b4646/html5/thumbnails/5.jpg)
. Стажировка-2013
Разрешение и размеры
Ширина макета - ?Ориентируемся на 980 - 1000 пикселей при фиксированном макете.
Не забывать про статистику мониторов!
![Page 6: Структура сайта. Разрешение и размеры. Модульные сетки](https://reader034.fdocuments.net/reader034/viewer/2022051013/54987b86b479593a678b4646/html5/thumbnails/6.jpg)
. Стажировка-2013
Модульные сетки
Часть первая. «38 попугаев»
Удава можно дискретизировать с частотой, равной единице, деленной на попугая )
![Page 7: Структура сайта. Разрешение и размеры. Модульные сетки](https://reader034.fdocuments.net/reader034/viewer/2022051013/54987b86b479593a678b4646/html5/thumbnails/7.jpg)
. Стажировка-2013
Модульные сеткиЗадачи сетки:
• Ускорение работы• Сбалансированность
и пропорциональность• Ускорение и шаблонирование,
единообразность элементов
![Page 8: Структура сайта. Разрешение и размеры. Модульные сетки](https://reader034.fdocuments.net/reader034/viewer/2022051013/54987b86b479593a678b4646/html5/thumbnails/8.jpg)
. Стажировка-2013
Модульные сеткиВиды сеток:
• Блочная сетка • Колоночная сетка
![Page 9: Структура сайта. Разрешение и размеры. Модульные сетки](https://reader034.fdocuments.net/reader034/viewer/2022051013/54987b86b479593a678b4646/html5/thumbnails/9.jpg)
. Стажировка-2013
Модульные сеткиВиды сеток:
• Модульная сетка • Иерархическая сетка
![Page 10: Структура сайта. Разрешение и размеры. Модульные сетки](https://reader034.fdocuments.net/reader034/viewer/2022051013/54987b86b479593a678b4646/html5/thumbnails/10.jpg)
. Стажировка-2013
Модульные сеткиАлгоритм:
1. Начинаем с определения рабочей области
2. Делаем шрифтовую сетку
![Page 11: Структура сайта. Разрешение и размеры. Модульные сетки](https://reader034.fdocuments.net/reader034/viewer/2022051013/54987b86b479593a678b4646/html5/thumbnails/11.jpg)
. Стажировка-2013
Модульные сеткиАлгоритм:
3. Строим вертикальное членение 4. Делаем горизонтальное членение
![Page 12: Структура сайта. Разрешение и размеры. Модульные сетки](https://reader034.fdocuments.net/reader034/viewer/2022051013/54987b86b479593a678b4646/html5/thumbnails/12.jpg)
. Стажировка-2013
Модульные сеткиАлгоритм:
5. Получаем модульную сетку 6. Объединяем модули в регионы, создаем композицию, рисуем
![Page 13: Структура сайта. Разрешение и размеры. Модульные сетки](https://reader034.fdocuments.net/reader034/viewer/2022051013/54987b86b479593a678b4646/html5/thumbnails/13.jpg)
. Стажировка-2013
Модульные сеткиАлгоритм:
![Page 14: Структура сайта. Разрешение и размеры. Модульные сетки](https://reader034.fdocuments.net/reader034/viewer/2022051013/54987b86b479593a678b4646/html5/thumbnails/14.jpg)
. Стажировка-2013
Модульные сетки
Оптика1. Микромодуль2. Оптические компенсации
Ломайте сетку к чертовой матери, если так будет выглядеть лучше, если это решает вашу задачу!
Выводы:1. Геометрия не так важна. Оптика решает.2. Сетка — это всего лишь инструмент. Причем ненавязчивый.
![Page 15: Структура сайта. Разрешение и размеры. Модульные сетки](https://reader034.fdocuments.net/reader034/viewer/2022051013/54987b86b479593a678b4646/html5/thumbnails/15.jpg)
. Стажировка-2013
Модульные сетки
Оптика3. Плашки
Сдвигать или не сдвигать?
![Page 16: Структура сайта. Разрешение и размеры. Модульные сетки](https://reader034.fdocuments.net/reader034/viewer/2022051013/54987b86b479593a678b4646/html5/thumbnails/16.jpg)
. Стажировка-2013
Модульные сетки
Оптика4. Висячая пунктуация
5. Шрифты с засечками и крупные кегли
Сдвигать или не сдвигать?
![Page 17: Структура сайта. Разрешение и размеры. Модульные сетки](https://reader034.fdocuments.net/reader034/viewer/2022051013/54987b86b479593a678b4646/html5/thumbnails/17.jpg)
. Стажировка-2013
Модульные сетки
Оптика6. Иллюстрации
Сдвигать или не сдвигать?