Егор Стремоусов. Модульная сетка: Что? Где? Когда?
-
Upload
egor-stremousov -
Category
Design
-
view
1.377 -
download
0
description
Transcript of Егор Стремоусов. Модульная сетка: Что? Где? Когда?
![Page 1: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/1.jpg)
Модульная сетка
Что? Где? Когда?Новокузнецкий Веб-Клуб
3 июня 2011
![Page 2: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/2.jpg)
Что?
1. Система направляющих, помогающих сориентировать и согласовать между собой отдельные элементы композиции.
Меню Подвал
Шапка
Телефоны
Логотип
Текст
Видео
Пост
Комментарии
Форма авторизации
СсылкиСлайды
Карта проездаНовости
Иконки
Картинки
![Page 3: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/3.jpg)
![Page 4: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/4.jpg)
Что?
2. Декларация дизайнерских принципов.
Универсальный инструмент управления графическим пространством
Решение поставленной задачи,демонстрирующее логику и закономерность
Унификация размеров для элементов,оптимальный масштаб отображения
Вариативность
![Page 5: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/5.jpg)
![Page 6: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/6.jpg)
![Page 7: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/7.jpg)
Что такое модульная сетка?3. Элемент псевдо-дизайна.
![Page 8: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/8.jpg)
![Page 9: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/9.jpg)
Что?
3. Элемент псевдо-дизайна.
Функциональность
Рациональность
Шаблонность и конвейерность
![Page 10: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/10.jpg)
Откуда?
Архитектура
Издательское дело
Веб-дизайн
![Page 11: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/11.jpg)
![Page 12: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/12.jpg)
![Page 13: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/13.jpg)
![Page 14: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/14.jpg)
![Page 15: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/15.jpg)
![Page 16: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/16.jpg)
![Page 17: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/17.jpg)
![Page 18: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/18.jpg)
![Page 19: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/19.jpg)
Какие?
Колоночная
Блочная
Модульная
Иерархическая
На основе математических закономерностей
![Page 20: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/20.jpg)
![Page 21: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/21.jpg)
![Page 22: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/22.jpg)
![Page 23: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/23.jpg)
![Page 24: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/24.jpg)
![Page 25: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/25.jpg)
![Page 26: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/26.jpg)
Где?
Программы для прототипирования
Программы для рисования
![Page 27: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/27.jpg)
Когда? Постановка задачи (ТЗ)
Описание информационной структуры
Выработка решения
Сетка
Прототип Макет
![Page 28: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/28.jpg)
Как?
1. Определяем базовые характеристики
![Page 29: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/29.jpg)
Как?
2. Определяем модуль
![Page 30: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/30.jpg)
Как?3. Определяем правила
![Page 31: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/31.jpg)
Как?3. Определяем правила
![Page 32: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/32.jpg)
Как?3. Определяем правила
![Page 33: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/33.jpg)
Как?
4. Определяем паттерн
![Page 34: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/34.jpg)
Как?5. Делаем слой в макете
![Page 35: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/35.jpg)
Как?
5. Рисуем дизайн/прототип
![Page 36: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/36.jpg)
![Page 37: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/37.jpg)
![Page 38: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/38.jpg)
![Page 39: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/39.jpg)
Как?
Помните про внешние поля
Идите от эпицентра
Смотрите результат в масштабе 1:1
Тренируйте сквозное видение
Продвигайтесь итеративно
Отталкивайтесь от контента
![Page 40: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/40.jpg)
Что читать?
Результаты запросов в Google:
Серов сеткаЧеренкевич сеткаШвейцарский панкКомпозиционная суперпозицияGridding 960The Funniest Grid You Ever SawBaseline gridModular gridIncremental leading
![Page 41: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/41.jpg)
Куда ходить?
http://thegrids.ru/http://www.thegridsystem.org/http://www.designbygrid.com/http://grid-based.com/http://www.minimalsites.com/
http://lamb.cc/typograph/http://drewish.com/tools/vertical-rhythmhttp://modulargrid.org/
http://blognya.ru
![Page 42: Егор Стремоусов. Модульная сетка: Что? Где? Когда?](https://reader036.fdocuments.net/reader036/viewer/2022062313/557f5ee1d8b42a822f8b50fc/html5/thumbnails/42.jpg)
Спасибо