Что такое модульные сетки, как их создавать, на что ориентироваться, какие существую заблуждения

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