Инструменты для создания адаптивного дизайна сайта на основе модульной сетки

Многим известен Масимо Винелли, известный дизайнер модернистского направления, работавший за свою карьеру во многих сферах дизайна. В 1977 году он создал систему Unigrid для Службы Национыльного Парка. Модульная сетка позволила легко создать брошюры в 10 различных форматах с узнаваемой структурой. Никто не предполагал, что 30 лет спустя его работа будет использоваться в сферах, о которых он даже не слышал. В 2009, Винелли опубликовал свою бесплатную электронную книгу под названием «The Vignelli Canon», с единственной целью — поделиться своими знаниями с молодым поколением дизайнеров.

Инструменты и генераторы макетов

  • 892 различных способа создать сетку 3 x 4
    Инструменты для создания сайта на основе модульной сетки
    3 × 4 grid генерирует 892 уникальных сетки 3 x 4 используя алгоритм генерации всех возможных вариантов.
    http://www.3x4grid.com/poster.html
  • 3×4 Grid Builder
    Инструменты для создания сайта на основе модульной сетки
    Drag & drop. Смотрим код.
    http://www.3x4grid.com
  • Tiny Fluid Grid Generator
    Инструменты для создания сайта на основе модульной сетки
    Простой и удивительный способ построения плавающих сеток.
    http://www.tinyfluidgrid.com/
  • The 1kb Css Grid
    Инструменты для создания сайта на основе модульной сетки
    Ищете способ проще и легче? Знакомтесь The 1KB CSS Grid.
    http://www.1kbgrid.com/
  • Grid calculator and Generator
    Инструменты для создания сайта на основе модульной сетки
    GridCalc простой в использовании калькулятор сетки, который предоставит все возможные варианты в соответствии с выставленными ограничениями.
    http://www.problem.se/labs/gridcalc/
  • Grid Pak
    Инструменты для создания сайта на основе модульной сетки
    Gridpak интерактивный инструмент для создания адаптивных макетов.
    http://gridpak.com/

 

Сетки и расширения Photoshop

  • Modular Grid Pattern
    Инструменты для создания сайта на основе модульной сетки
    Приложение для веб дизайнеров, которое поможет легко и быстро создать модульную сетку в Adobe Photoshop.
    Скачать
  • Guide Guide
    Инструменты для создания сайта на основе модульной сетки
    Плагин Photoshops для создания набора направляющих.
    Скачать
  • Responsive Photoshop Template
    Инструменты для создания сайта на основе модульной сетки
    Лучшая сетка в photoshop для создания адаптивного дизайна.
    Скачать
  • 960px Grid Templates
    Инструменты для создания сайта на основе модульной сетки
    960 pixel — множество шаблонов модульных сеток в диапазоне от 3 колонок до 16, для Adobe Photoshop и Fireworks.
    Скачать
  • Frameless Template
    Инструменты для создания сайта на основе модульной сетки
    Простой шаблон для сеток с 48 px колонками и 24 px желобами.
    http://framelessgrid.com/
  • Responsive Grid PSD
    Инструменты для создания сайта на основе модульной сетки
    Шаблон Джоела Букелмана для отзывчивого дизайна.
    http://dribbble.com/shots/410635-Responsive-Grid-PSD

 

Фреймворки

  • 960grid
    Инструменты для создания сайта на основе модульной сетки
    960 grid является классикой среди CSS фреймворков, очень полезный инструмент в основании которого ширина 960px, с большим числом способов интеграции дизайна в макет.
    http://960.gs/
  • YAML
    Инструменты для создания сайта на основе модульной сетки
    Это не просто еще один макет на основе сетки. Yaml — это гибкая адаптивная система модульной сетки, которая сочетает в себе лучшие характеристики большинства известных систем.
    http://www.yaml.de/
  • The Golden Grid
    Инструменты для создания сайта на основе модульной сетки
    Модульная система для адаптивного дизайна, включающая в себя складывающиеся колонки, эластичные желоба, масштабируемые направляющие и восхитительный скрипт наложения сетки.
    http://goldengridsystem.com/
  • SimpleGrid
    Инструменты для создания сайта на основе модульной сетки
    Адаптивность, бесконечная вложенность, единый класс для всех элементов, простота.
    http://simplegrid.info/
  • Frameless
    Инструменты для создания сайта на основе модульной сетки
    Это не фреймворк. Это не масштабируемая сетка для адаптивного дизайна; адаптирует колонку в колонку, но не пиксел в пиксел. Адаптирует дизайн в такое количество колонок, которое только возможно.
    http://framelessgrid.com/
  • Columnal
    Инструменты для создания сайта на основе модульной сетки
    Адаптивная CSS модульная сетка, способствующая браузеру ПК и мобильному устройству отображать контент одинаково хорошо. Columnal поддерживает мобильные макеты с помощью запросов.
    http://www.columnal.com/
  • 1140 CSS Grid
    Инструменты для создания сайта на основе модульной сетки
    1140 grid прекрасно отображается в 1280 px. На меньших мониторах перестраивается в мобильный вариант.
    http://cssgrid.net/
  • Skeleton
    Инструменты для создания сайта на основе модульной сетки
    Еще одни адаптивная модульная сетка. Лучший выбор для быстрого создания сайта для различных устройств.
    http://www.getskeleton.com/

 

Литература

  • Ordering Disorder: Grid Principles for Web Design
    Инструменты для создания сайта на основе модульной сетки
    Темы WordPress с типографикой адаптированной в соответствии с модернистским дизайном.
    Купить
  • Layout Essentials: 100 Design Principles for Using Grids
    Инструменты для создания сайта на основе модульной сетки
    Эта книга показывает простые макеты и модульные сетки на 100 примерах.
    Купить
  • Web Book
    Инструменты для создания сайта на основе модульной сетки
    Это настольная книга для веб дизайнера. Ее особенность в 15-точечной сетке, которая вертикально разделена на 2, 3, 4, 5 или 6 колонок.
    Купить
  • Bon Graf
    Инструменты для создания сайта на основе модульной сетки
    Макеты с 12 колоночной сеткой.
    Купить

 

Темы WordPress

 

Материалы по теме