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

МОДУЛЬНЫЕ СЕТКИ В ВЕБЕОписание, назначение, правила построения, заблуждения, ссылки

Сергей Кондауров facebook.com/SergeyDesigner

Активный участник SPECIA

http://facebook.com/SergeyDesigner

ВСТУПЛЕНИЕ

1

МОДУЛЬНАЯ СЕТКАЭто правило компоновки, которое вы вывели

2

2.

ИСТОРИЯ РАЗВИТИЯ

МОДУЛЬНАЯ СЕТКА

2. МОДУЛЬНАЯ СЕТКА

ПЕРВЫЙ САЙТ

2.МОДУЛЬНАЯ СЕТКА: ПЕРВЫЙ САЙТ

2.МОДУЛЬНАЯ СЕТКА

ДВУХКОЛОННИКИ 90-Х

2.МОДУЛЬНАЯ СЕТКА: ДВУХКОЛОННИКИ 90-Х


ТРЕХКОЛОННИКИ 00-Х

2.МОДУЛЬНАЯ СЕТКА: ТРЕХКОЛОННИКИ 00-Х


ЧТО ПОПУЛЯРНО СЕЙЧАС

2.МОДУЛЬНАЯ СЕТКА: ЧТО ПОПУЛЯРНО СЕЙЧАС



ДЛЯ ЧЕГОПольза от модульных сеток

3

ПОЧЕМУ ЭТО ВАЖНО ДЛЯ ПОЛЬЗОВАТЕЛЕЙ

3. Для чего

УДОБСТВО ПРОСМАТРИВАНИЯ

3. Для чего: почему это важно для пользователей

Облегчение визуального сканирования

3. Для чего: почему это важно для пользователей. Упорядочивание

3. Для чего: почему это важно для пользователей. Упорядочивание

ОДИНАКОВАЯ ПОДАЧА


Консистентность интерфейса

3. Для чего: почему это важно для пользователей. Одинаковая подача




ЭСТЕТИКА


3. Для чего: почему это важно для пользователей. Эстетика

3. Для чего: почему это важно для пользователей. Эстетика

ПОЧЕМУ ЭТО ВАЖНО ДЛЯ ВАС

3. Для чего

УСКОРЕНИЕ РАЗРАБОТКИ ДИЗАЙНА

3. Для чего: почему это важно для вас

3. Для чего: почему это важно для вас. Ускорение разработки дизайна

3. Для чего: почему это важно для вас. Ускорение разработки дизайна

УСКОРЕНИЕ ВЕРСТКИ


3. Для чего: почему это важно для вас. Ускорение верстки

АДАПТИВНЫЙ ДИЗАЙН


3. Для чего: почему это важно для вас. Адаптивный дизайн

ПРАВИЛА

4

ПРИНЦИП ПОСТРОЕНИЯ

4. Правила

Три простых шага

ИЗУЧАЕМ МАТЕРИАЛ

4. Правила: принцип построения

4. Правила: принцип построения. Изучаем материал

РАССТАВЛЯЕМ ПРИОРИТЕТ


4. Правила: принцип построения. Расставляем приоритет

СОЗДАЕМ МАКЕТ


4. Правила: принцип построения. Создаем макет

ВЫЯВЛЯЕМ ПРАВИЛА


4. Правила: принцип построения. Выявляем правила

ОСНОВНЫЕ ВИДЫ

4. Правила

САМАЯ ПРОСТАЯ СЕТКА — ОДНА КОЛОНКА

4. Правила: основные виды

4. Правила: основные виды. Одна колонка

4. Правила: основные виды. Одна колонка

ДВУХКОЛОННИКИ (ОДНА КОЛОНКА ДОМИНИРУЕТ)


4. Правила: основные виды. Двухколонники

4. Правила: основные виды. Двухколонники

ТРЕХКОЛОННИКИ (ОДНА КОЛОНКА ДОМИНИРУЕТ)


4. Правила: основные виды. Трехколонники

4. Правила: основные виды. Трехколонники

МОДУЛЬНЫЕ СЕТКИ


4. Правила: основные виды. Динамичные сетки

4. Правила: основные виды. Модульные сетки

ИНСТРУМЕНТЫ

4. Правила

ГОЛОВА, ГЛАЗА И РУКИ

4. Правила: инструменты

4. Правила: инструменты. Голова, глаза и руки

ПЛАГИН GUIDEGUIDE

4. Правила: инструменты

http://guideguide.me/


ЗАБЛУЖДЕНИЯ

5

ПРИНЦИП ПОСТРОЕНИЯ

5. Заблуждения

Три простых шага

СЕТКА ПОД 960 ПИКСЕЛЕЙ — РЕШЕНИЕ ВСЕГО


5. Заблуждения: 960 пикселей

СНАЧАЛА СЕТКА, ПОТОМ КОНТЕНТ


5. Заблуждения: сначала сетка

ДОЛЖНА БЫТЬ ОДНА СЕТКА НА ВЕСЬ ПРОЕКТ


5. Заблуждения: одна сетка

ГЛАВНАЯ СТРАНИЦА НЕ РАВНА ВНУТРЕННЕЙ

СЕТКА НЕ НУЖНА, ОНА ОГРАНИЧИВАЕТ МЕНЯ


5. Заблуждения: сетка не нужна

СРОКИ, СЛОЖНОСТЬ РЕШЕНИЙ, ИСКЛЮЧЕНИЯ

ЛОГИКА В ОСНОВЕ ХОРОШИХ ПРАВИЛ

6

ПРОКРУСТОВО ЛОЖЕ

6. Логика в основе

6. Логика в основе: Прокрустово ложе

ДЛЯ ДЕТАЛЬНОГО ИЗУЧЕНИЯ

7

КНИГА «МОДУЛЬНЫЕ СИСТЕМЫ В ВЕРСТКЕ»

7. Для детального изучения

Йозеф Мюллер-Брокман

ПЛАГИН GUIDEGUIDE




ССЫЛКИ


Обзор плагинов, сайтов и книг о создании сеток http://www.dejurka.ru/web-design/grid-oriented-design/

Интересная классификация сеток и советы http://www.vanseodesign.com/web-design/grid-types/

http://www.dejurka.ru/web-design/grid-oriented-design/

http://www.vanseodesign.com/web-design/grid-types/

СЕРГЕЙ КОНДАУРОВhttps://www.facebook.com/SergeyDesigner

Активный участник SPECIA

https://www.facebook.com/SergeyDesigner