Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
МОДУЛЬНЫЕ СЕТКИ В ВЕБЕ 
Описание, назначение, правила построения, 
заблуждения, ссылки 
Сергей Кондауров 
facebook.com/Ser...
1 
ВСТУПЛЕНИЕ
2 
МОДУЛЬНАЯ СЕТКА 
Это правило компоновки, которое вы вывели
2. 
МОДУЛЬНАЯ СЕТКА 
ИСТОРИЯ РАЗВИТИЯ
2. МОДУЛЬНАЯ СЕТКА 
ПЕРВЫЙ САЙТ
2. МОДУЛЬНАЯ СЕТКА: ПЕРВЫЙ САЙТ
2. МОДУЛЬНАЯ СЕТКА 
ДВУХКОЛОННИКИ 90-Х
2. МОДУЛЬНАЯ СЕТКА: ДВУХКОЛОННИКИ 90-Х
2. МОДУЛЬНАЯ СЕТКА 
ТРЕХКОЛОННИКИ 00-Х
2. МОДУЛЬНАЯ СЕТКА: ТРЕХКОЛОННИКИ 00-Х
2. МОДУЛЬНАЯ СЕТКА 
ЧТО ПОПУЛЯРНО СЕЙЧАС
2. МОДУЛЬНАЯ СЕТКА: ЧТО ПОПУЛЯРНО СЕЙЧАС
2. МОДУЛЬНАЯ СЕТКА: ЧТО ПОПУЛЯРНО СЕЙЧАС
2. МОДУЛЬНАЯ СЕТКА: ЧТО ПОПУЛЯРНО СЕЙЧАС
3 
ДЛЯ ЧЕГО 
Польза от модульных сеток
3. Для чего 
ПОЧЕМУ ЭТО ВАЖНО 
ДЛЯ ПОЛЬЗОВАТЕЛЕЙ
3. Для чего: почему это важно для пользователей 
УДОБСТВО ПРОСМАТРИВАНИЯ 
Облегчение визуального сканирования
3. Для чего: почему это важно для пользователей. Упорядочивание
3. Для чего: почему это важно для пользователей. Упорядочивание
3. Для чего: почему это важно для пользователей 
ОДИНАКОВАЯ ПОДАЧА 
Консистентность интерфейса
3. Для чего: почему это важно для пользователей. Одинаковая подача
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. Правила: основные виды. Трехколонники
4. Правила: основные виды 
МОДУЛЬНЫЕ СЕТКИ
4. Правила: основные виды. Динамичные сетки
4. Правила: основные виды. Модульные сетки
4. Правила 
ИНСТРУМЕНТЫ
4. Правила: инструменты 
ГОЛОВА, ГЛАЗА И РУКИ
4. Правила: инструменты. Голова, глаза и руки
4. Правила: инструменты 
ПЛАГИН GUIDEGUIDE 
http://guideguide.me/
5 
ЗАБЛУЖДЕНИЯ
5. Заблуждения 
ПРИНЦИП ПОСТРОЕНИЯ 
Три простых шага
5. Заблуждения 
СЕТКА ПОД 960 ПИКСЕЛЕЙ — 
РЕШЕНИЕ ВСЕГО
5. Заблуждения: 960 пикселей
5. Заблуждения 
СНАЧАЛА СЕТКА, ПОТОМ 
КОНТЕНТ
5. Заблуждения: сначала сетка
5. Заблуждения 
ДОЛЖНА БЫТЬ ОДНА СЕТКА 
НА ВЕСЬ ПРОЕКТ
5. Заблуждения: одна сетка 
ГЛАВНАЯ СТРАНИЦА 
НЕ РАВНА ВНУТРЕННЕЙ
5. Заблуждения 
СЕТКА НЕ НУЖНА, 
ОНА ОГРАНИЧИВАЕТ МЕНЯ
5. Заблуждения: сетка не нужна 
СРОКИ, СЛОЖНОСТЬ РЕШЕНИЙ, 
ИСКЛЮЧЕНИЯ
6 
ЛОГИКА В ОСНОВЕ 
ХОРОШИХ ПРАВИЛ
6. Логика в основе 
ПРОКРУСТОВО ЛОЖЕ
6. Логика в основе: Прокрустово ложе
7 
ДЛЯ ДЕТАЛЬНОГО ИЗУЧЕНИЯ
7. Для детального изучения 
КНИГА «МОДУЛЬНЫЕ 
СИСТЕМЫ В ВЕРСТКЕ» 
Йозеф Мюллер-Брокман
7. Для детального изучения 
ПЛАГИН GUIDEGUIDE 
http://guideguide.me/
7. Для детального изучения 
ССЫЛКИ 
Обзор плагинов, сайтов и книг о создании сеток 
http://www.dejurka.ru/web-design/grid-...
СЕРГЕЙ КОНДАУРОВ 
https://www.facebook.com/SergeyDesigner 
Активный участник 
SPECIA
Upcoming SlideShare
Loading in …5
×

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

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

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

  1. 1. МОДУЛЬНЫЕ СЕТКИ В ВЕБЕ Описание, назначение, правила построения, заблуждения, ссылки Сергей Кондауров facebook.com/SergeyDesigner Активный участник SPECIA
  2. 2. 1 ВСТУПЛЕНИЕ
  3. 3. 2 МОДУЛЬНАЯ СЕТКА Это правило компоновки, которое вы вывели
  4. 4. 2. МОДУЛЬНАЯ СЕТКА ИСТОРИЯ РАЗВИТИЯ
  5. 5. 2. МОДУЛЬНАЯ СЕТКА ПЕРВЫЙ САЙТ
  6. 6. 2. МОДУЛЬНАЯ СЕТКА: ПЕРВЫЙ САЙТ
  7. 7. 2. МОДУЛЬНАЯ СЕТКА ДВУХКОЛОННИКИ 90-Х
  8. 8. 2. МОДУЛЬНАЯ СЕТКА: ДВУХКОЛОННИКИ 90-Х
  9. 9. 2. МОДУЛЬНАЯ СЕТКА ТРЕХКОЛОННИКИ 00-Х
  10. 10. 2. МОДУЛЬНАЯ СЕТКА: ТРЕХКОЛОННИКИ 00-Х
  11. 11. 2. МОДУЛЬНАЯ СЕТКА ЧТО ПОПУЛЯРНО СЕЙЧАС
  12. 12. 2. МОДУЛЬНАЯ СЕТКА: ЧТО ПОПУЛЯРНО СЕЙЧАС
  13. 13. 2. МОДУЛЬНАЯ СЕТКА: ЧТО ПОПУЛЯРНО СЕЙЧАС
  14. 14. 2. МОДУЛЬНАЯ СЕТКА: ЧТО ПОПУЛЯРНО СЕЙЧАС
  15. 15. 3 ДЛЯ ЧЕГО Польза от модульных сеток
  16. 16. 3. Для чего ПОЧЕМУ ЭТО ВАЖНО ДЛЯ ПОЛЬЗОВАТЕЛЕЙ
  17. 17. 3. Для чего: почему это важно для пользователей УДОБСТВО ПРОСМАТРИВАНИЯ Облегчение визуального сканирования
  18. 18. 3. Для чего: почему это важно для пользователей. Упорядочивание
  19. 19. 3. Для чего: почему это важно для пользователей. Упорядочивание
  20. 20. 3. Для чего: почему это важно для пользователей ОДИНАКОВАЯ ПОДАЧА Консистентность интерфейса
  21. 21. 3. Для чего: почему это важно для пользователей. Одинаковая подача
  22. 22. 3. Для чего: почему это важно для пользователей. Одинаковая подача
  23. 23. 3. Для чего: почему это важно для пользователей. Одинаковая подача
  24. 24. 3. Для чего: почему это важно для пользователей. Одинаковая подача
  25. 25. 3. Для чего: почему это важно для пользователей ЭСТЕТИКА
  26. 26. 3. Для чего: почему это важно для пользователей. Эстетика
  27. 27. 3. Для чего: почему это важно для пользователей. Эстетика
  28. 28. 3. Для чего ПОЧЕМУ ЭТО ВАЖНО ДЛЯ ВАС
  29. 29. 3. Для чего: почему это важно для вас УСКОРЕНИЕ РАЗРАБОТКИ ДИЗАЙНА
  30. 30. 3. Для чего: почему это важно для вас. Ускорение разработки дизайна
  31. 31. 3. Для чего: почему это важно для вас. Ускорение разработки дизайна
  32. 32. 3. Для чего: почему это важно для вас УСКОРЕНИЕ ВЕРСТКИ
  33. 33. 3. Для чего: почему это важно для вас. Ускорение верстки
  34. 34. 3. Для чего: почему это важно для вас АДАПТИВНЫЙ ДИЗАЙН
  35. 35. 3. Для чего: почему это важно для вас. Адаптивный дизайн
  36. 36. 4 ПРАВИЛА
  37. 37. 4. Правила ПРИНЦИП ПОСТРОЕНИЯ Три простых шага
  38. 38. 4. Правила: принцип построения ИЗУЧАЕМ МАТЕРИАЛ
  39. 39. 4. Правила: принцип построения. Изучаем материал
  40. 40. 4. Правила: принцип построения РАССТАВЛЯЕМ ПРИОРИТЕТ
  41. 41. 4. Правила: принцип построения. Расставляем приоритет
  42. 42. 4. Правила: принцип построения СОЗДАЕМ МАКЕТ
  43. 43. 4. Правила: принцип построения. Создаем макет
  44. 44. 4. Правила: принцип построения ВЫЯВЛЯЕМ ПРАВИЛА
  45. 45. 4. Правила: принцип построения. Выявляем правила
  46. 46. 4. Правила ОСНОВНЫЕ ВИДЫ
  47. 47. 4. Правила: основные виды САМАЯ ПРОСТАЯ СЕТКА — ОДНА КОЛОНКА
  48. 48. 4. Правила: основные виды. Одна колонка
  49. 49. 4. Правила: основные виды. Одна колонка
  50. 50. 4. Правила: основные виды ДВУХКОЛОННИКИ (ОДНА КОЛОНКА ДОМИНИРУЕТ)
  51. 51. 4. Правила: основные виды. Двухколонники
  52. 52. 4. Правила: основные виды. Двухколонники
  53. 53. 4. Правила: основные виды ТРЕХКОЛОННИКИ (ОДНА КОЛОНКА ДОМИНИРУЕТ)
  54. 54. 4. Правила: основные виды. Трехколонники
  55. 55. 4. Правила: основные виды. Трехколонники
  56. 56. 4. Правила: основные виды МОДУЛЬНЫЕ СЕТКИ
  57. 57. 4. Правила: основные виды. Динамичные сетки
  58. 58. 4. Правила: основные виды. Модульные сетки
  59. 59. 4. Правила ИНСТРУМЕНТЫ
  60. 60. 4. Правила: инструменты ГОЛОВА, ГЛАЗА И РУКИ
  61. 61. 4. Правила: инструменты. Голова, глаза и руки
  62. 62. 4. Правила: инструменты ПЛАГИН GUIDEGUIDE http://guideguide.me/
  63. 63. 5 ЗАБЛУЖДЕНИЯ
  64. 64. 5. Заблуждения ПРИНЦИП ПОСТРОЕНИЯ Три простых шага
  65. 65. 5. Заблуждения СЕТКА ПОД 960 ПИКСЕЛЕЙ — РЕШЕНИЕ ВСЕГО
  66. 66. 5. Заблуждения: 960 пикселей
  67. 67. 5. Заблуждения СНАЧАЛА СЕТКА, ПОТОМ КОНТЕНТ
  68. 68. 5. Заблуждения: сначала сетка
  69. 69. 5. Заблуждения ДОЛЖНА БЫТЬ ОДНА СЕТКА НА ВЕСЬ ПРОЕКТ
  70. 70. 5. Заблуждения: одна сетка ГЛАВНАЯ СТРАНИЦА НЕ РАВНА ВНУТРЕННЕЙ
  71. 71. 5. Заблуждения СЕТКА НЕ НУЖНА, ОНА ОГРАНИЧИВАЕТ МЕНЯ
  72. 72. 5. Заблуждения: сетка не нужна СРОКИ, СЛОЖНОСТЬ РЕШЕНИЙ, ИСКЛЮЧЕНИЯ
  73. 73. 6 ЛОГИКА В ОСНОВЕ ХОРОШИХ ПРАВИЛ
  74. 74. 6. Логика в основе ПРОКРУСТОВО ЛОЖЕ
  75. 75. 6. Логика в основе: Прокрустово ложе
  76. 76. 7 ДЛЯ ДЕТАЛЬНОГО ИЗУЧЕНИЯ
  77. 77. 7. Для детального изучения КНИГА «МОДУЛЬНЫЕ СИСТЕМЫ В ВЕРСТКЕ» Йозеф Мюллер-Брокман
  78. 78. 7. Для детального изучения ПЛАГИН GUIDEGUIDE http://guideguide.me/
  79. 79. 7. Для детального изучения ССЫЛКИ Обзор плагинов, сайтов и книг о создании сеток http://www.dejurka.ru/web-design/grid-oriented-design/ Интересная классификация сеток и советы http://www.vanseodesign.com/web-design/grid-types/
  80. 80. СЕРГЕЙ КОНДАУРОВ https://www.facebook.com/SergeyDesigner Активный участник SPECIA

×