Структура сайта. Разрешение и размеры. Модульные сетки
-
Upload
katya-dolgacheva -
Category
Documents
-
view
392 -
download
4
description
Transcript of Структура сайта. Разрешение и размеры. Модульные сетки
. Стажировка-2013
Дизайнеры. Занятие 4
Структура сайта.Разрешение и размеры. Модульные сетки
. Стажировка-2013
Структура сайта«Внешняя»:
«Внутренняя»:
. Стажировка-2013
Структура сайта«Внутренняя»:
шапка: лого, инфа, поиск, что еще?меню (элементы навигации) - верт, гориз, нестандартное, выпадающееосн часть - контентфутер - карта сайта, ссылки, адреса, счетчики и т.д.
. Стажировка-2013
Разрешение и размеры
72 dpiDpi - Dots Per Inch = точек на дюйм - мера разрешающей способности монитора/принтера/сканера и т.д. Дюйм — единица длины, равная 2,541 см.
. Стажировка-2013
Разрешение и размеры
Ширина макета - ?Ориентируемся на 980 - 1000 пикселей при фиксированном макете.
Не забывать про статистику мониторов!
. Стажировка-2013
Модульные сетки
Часть первая. «38 попугаев»
Удава можно дискретизировать с частотой, равной единице, деленной на попугая )
. Стажировка-2013
Модульные сеткиЗадачи сетки:
• Ускорение работы• Сбалансированность
и пропорциональность• Ускорение и шаблонирование,
единообразность элементов
. Стажировка-2013
Модульные сеткиВиды сеток:
• Блочная сетка • Колоночная сетка
. Стажировка-2013
Модульные сеткиВиды сеток:
• Модульная сетка • Иерархическая сетка
. Стажировка-2013
Модульные сеткиАлгоритм:
1. Начинаем с определения рабочей области
2. Делаем шрифтовую сетку
. Стажировка-2013
Модульные сеткиАлгоритм:
3. Строим вертикальное членение 4. Делаем горизонтальное членение
. Стажировка-2013
Модульные сеткиАлгоритм:
5. Получаем модульную сетку 6. Объединяем модули в регионы, создаем композицию, рисуем
. Стажировка-2013
Модульные сеткиАлгоритм:
. Стажировка-2013
Модульные сетки
Оптика1. Микромодуль2. Оптические компенсации
Ломайте сетку к чертовой матери, если так будет выглядеть лучше, если это решает вашу задачу!
Выводы:1. Геометрия не так важна. Оптика решает.2. Сетка — это всего лишь инструмент. Причем ненавязчивый.
. Стажировка-2013
Модульные сетки
Оптика3. Плашки
Сдвигать или не сдвигать?
. Стажировка-2013
Модульные сетки
Оптика4. Висячая пунктуация
5. Шрифты с засечками и крупные кегли
Сдвигать или не сдвигать?
. Стажировка-2013
Модульные сетки
Оптика6. Иллюстрации
Сдвигать или не сдвигать?