1.
МОДУЛЬНЫЕ СЕТКИ В ВЕБЕ
Описание, назначение, правила построения,
заблуждения, ссылки
Сергей Кондауров
facebook.com/SergeyDesigner
Активный участник
SPECIA

2.
1
ВСТУПЛЕНИЕ

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

4.
2.
МОДУЛЬНАЯ СЕТКА
ИСТОРИЯ РАЗВИТИЯ

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

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

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

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

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

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

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

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

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

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

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

16.
3. Для чего
ПОЧЕМУ ЭТО ВАЖНО
ДЛЯ ПОЛЬЗОВАТЕЛЕЙ

17.
3. Для чего: почему это важно для пользователей
УДОБСТВО ПРОСМАТРИВАНИЯ
Облегчение визуального сканирования

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

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

20.
3. Для чего: почему это важно для пользователей
ОДИНАКОВАЯ ПОДАЧА
Консистентность интерфейса

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

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

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

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

25.
3. Для чего: почему это важно для пользователей
ЭСТЕТИКА

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

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

28.
3. Для чего
ПОЧЕМУ ЭТО ВАЖНО
ДЛЯ ВАС

29.
3. Для чего: почему это важно для вас
УСКОРЕНИЕ РАЗРАБОТКИ
ДИЗАЙНА

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

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

32.
3. Для чего: почему это важно для вас
УСКОРЕНИЕ ВЕРСТКИ

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

34.
3. Для чего: почему это важно для вас
АДАПТИВНЫЙ ДИЗАЙН

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

36.
4
ПРАВИЛА

37.
4. Правила
ПРИНЦИП ПОСТРОЕНИЯ
Три простых шага

38.
4. Правила: принцип построения
ИЗУЧАЕМ МАТЕРИАЛ

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

40.
4. Правила: принцип построения
РАССТАВЛЯЕМ ПРИОРИТЕТ

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

42.
4. Правила: принцип построения
СОЗДАЕМ МАКЕТ

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

44.
4. Правила: принцип построения
ВЫЯВЛЯЕМ ПРАВИЛА

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

46.
4. Правила
ОСНОВНЫЕ ВИДЫ

47.
4. Правила: основные виды
САМАЯ ПРОСТАЯ СЕТКА —
ОДНА КОЛОНКА

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

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

50.
4. Правила: основные виды
ДВУХКОЛОННИКИ (ОДНА
КОЛОНКА ДОМИНИРУЕТ)

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

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

53.
4. Правила: основные виды
ТРЕХКОЛОННИКИ (ОДНА
КОЛОНКА ДОМИНИРУЕТ)

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

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

56.
4. Правила: основные виды
МОДУЛЬНЫЕ СЕТКИ

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

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

59.
4. Правила
ИНСТРУМЕНТЫ

60.
4. Правила: инструменты
ГОЛОВА, ГЛАЗА И РУКИ

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

62.
4. Правила: инструменты
ПЛАГИН GUIDEGUIDE
http://guideguide.me/

63.
5
ЗАБЛУЖДЕНИЯ

64.
5. Заблуждения
ПРИНЦИП ПОСТРОЕНИЯ
Три простых шага

65.
5. Заблуждения
СЕТКА ПОД 960 ПИКСЕЛЕЙ —
РЕШЕНИЕ ВСЕГО

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

67.
5. Заблуждения
СНАЧАЛА СЕТКА, ПОТОМ
КОНТЕНТ

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

69.
5. Заблуждения
ДОЛЖНА БЫТЬ ОДНА СЕТКА
НА ВЕСЬ ПРОЕКТ

70.
5. Заблуждения: одна сетка
ГЛАВНАЯ СТРАНИЦА
НЕ РАВНА ВНУТРЕННЕЙ

71.
5. Заблуждения
СЕТКА НЕ НУЖНА,
ОНА ОГРАНИЧИВАЕТ МЕНЯ

72.
5. Заблуждения: сетка не нужна
СРОКИ, СЛОЖНОСТЬ РЕШЕНИЙ,
ИСКЛЮЧЕНИЯ

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

74.
6. Логика в основе
ПРОКРУСТОВО ЛОЖЕ

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

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

77.
7. Для детального изучения
КНИГА «МОДУЛЬНЫЕ
СИСТЕМЫ В ВЕРСТКЕ»
Йозеф Мюллер-Брокман

78.
7. Для детального изучения
ПЛАГИН GUIDEGUIDE
http://guideguide.me/

79.
7. Для детального изучения
ССЫЛКИ
Обзор плагинов, сайтов и книг о создании сеток
http://www.dejurka.ru/web-design/grid-oriented-design/
Интересная классификация сеток и советы
http://www.vanseodesign.com/web-design/grid-types/

80.
СЕРГЕЙ КОНДАУРОВ
https://www.facebook.com/SergeyDesigner
Активный участник
SPECIA