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.

Егор Стремоусов. Модульная сетка: Что? Где? Когда?

1,833 views

Published on

3 июня Павел Михайлов и Егор Стремоусов устроили показ слайдов на тему модульных сеток в жизни проектировщиков, дизайнеров и верстальщиков.

В программе: что такое сетки, зачем они нужны, как их создавать и использовать, когда сетки нужны и не нужны, примеры, бурное обсуждение и заряд позитива.

Published in: Design
  • Be the first to comment

Егор Стремоусов. Модульная сетка: Что? Где? Когда?

  1. 1. Модульная сетка<br />Что? Где? Когда?<br />Новокузнецкий Веб-Клуб<br />3 июня 2011<br />
  2. 2. Что?<br />1. Система направляющих, помогающих сориентировать и согласовать между собой отдельные элементы композиции.<br />Иконки<br />Комментарии<br />Текст<br />Меню<br />Подвал<br />Логотип<br />Ссылки<br />Слайды<br />Картинки<br />Шапка<br />Пост<br />Форма авторизации<br />Телефоны<br />Видео<br />Новости<br />Карта проезда<br />
  3. 3.
  4. 4. Что?<br />2. Декларация дизайнерских принципов.<br />Решение поставленной задачи,<br />демонстрирующее логику и закономерность<br />Универсальный инструмент управления <br />графическим пространством<br />Унификация размеров для элементов,<br />оптимальный масштаб отображения<br />Вариативность<br />
  5. 5.
  6. 6.
  7. 7. Что такое модульная сетка?<br />3. Элемент псевдо-дизайна.<br />
  8. 8.
  9. 9. Что?<br />3. Элемент псевдо-дизайна.<br />Функциональность<br />Рациональность<br />Шаблонность и конвейерность<br />
  10. 10. Откуда?<br />Архитектура<br />Издательское дело<br />Веб-дизайн<br />
  11. 11.
  12. 12.
  13. 13.
  14. 14.
  15. 15.
  16. 16.
  17. 17.
  18. 18.
  19. 19. Какие?<br />Блочная<br />Колоночная<br />Модульная<br />Иерархическая<br />На основе математических закономерностей<br />
  20. 20.
  21. 21.
  22. 22.
  23. 23.
  24. 24.
  25. 25.
  26. 26. Где?<br />Программы для прототипирования<br />Программы для рисования<br />
  27. 27. Когда?<br />Постановка задачи (ТЗ)<br />Выработка решения<br />Описание информационной структуры<br />Сетка<br />Прототип<br />Макет<br />
  28. 28. Как?<br />1. Определяем базовые характеристики<br />
  29. 29. Как?<br />2. Определяем модуль<br />
  30. 30. Как?<br />3. Определяем правила<br />
  31. 31. Как?<br />3. Определяем правила<br />
  32. 32. Как?<br />3. Определяем правила<br />
  33. 33. Как?<br />4. Определяем паттерн<br />
  34. 34. Как?<br />5. Делаем слой в макете<br />
  35. 35. Как?<br />5. Рисуем дизайн/прототип<br />
  36. 36.
  37. 37.
  38. 38.
  39. 39. Как?<br />Отталкивайтесь от контента<br />Идите от эпицентра<br />Продвигайтесь итеративно<br />Смотрите результат в масштабе 1:1<br />Тренируйте сквозное видение<br />Помните про внешние поля<br />
  40. 40. Что читать?<br />Результаты запросов в Google:<br /><ul><li>Серов сетка
  41. 41. Черенкевич сетка
  42. 42. Швейцарский панк
  43. 43. Композиционная суперпозиция
  44. 44. Gridding 960
  45. 45. The Funniest Grid You Ever Saw
  46. 46. Baseline grid
  47. 47. Modular grid
  48. 48. Incremental leading</li></li></ul><li>Куда ходить?<br /><ul><li>http://thegrids.ru/
  49. 49. http://www.thegridsystem.org/
  50. 50. http://www.designbygrid.com/
  51. 51. http://grid-based.com/
  52. 52. http://www.minimalsites.com/
  53. 53. http://lamb.cc/typograph/
  54. 54. http://drewish.com/tools/vertical-rhythm
  55. 55. http://modulargrid.org/
  56. 56. http://blognya.ru</li></li></ul><li>Спасибо<br />

×