Поделиться , , Google+, Pinterest,

Опубликовано в:

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

Обзор инструментов для создания адаптивного дизайна сайта. Будет полезна как дизайнерам так и front-end разработчикам.

Адаптивный дизайн сайтов охватил всю индустрию  веб разработки. Адаптивный дизайн помогает сделать  сайт дружественным для пользователя вне зависимости от типа устройства и размеров экранов: смартфон, планшет, ноутбук. При использовании адаптивной модульной сетки для разрабатываемого сайта отпадает необходимость разрабатывать отдельный мобильный сайт.

C приходом адаптивных сайтов полностью изменился и процесс разработки. Раньше все макеты дизайна сдавались как отдельный этап и направлялись далее  по производственной цепочке. Сейчас же при разработке сайта с адаптивной модульной сеткой необходимо плотное взаимодействие между дизайнером и front-end разработчиком на большинстве этапов.

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

Tiny Fluid Grid Generator

www.tinyfluidgrid.com

Tiny-Fluid-Grid-Generator

Удивительно простой в использовании генератор css-файлов для разметки страницы. Для того чтобы скачать модульную сетку, необходимо задать количество колонок, расстояние между колонками, максимальную и минимальную ширину.

Grid Pak

gridpak.com

Grid-Pak

Генератор адаптивной модульной сетки. Разработан компанией  Good Work.

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

Modular Grid Pattern

modulargrid.org

Modular-Grid-Pattern

Приложение для веб дизайнеров, которое легко и быстро поможет создать модульную сетку для Adobe Photoshop. Так же имеется возможность скачать расширение для Photoshop.



Guide Guide

guideguide.me

Guide-Guide

Плагин для Photoshop, помогающий в создании направляющий.

Responsive Photoshop Template

www.elliotjaystocks.com

Responsive-Photoshop-Template

Одна из лучших модульных сеток для Photoshop, помогающая в создании адаптивного дизайна.

960px Grid Templates

robbiemanson.com

960px-Grid-Templates

960 pixel — подборка шаблонов модульных сеток для Adobe Photoshop и Fireworks в диапазоне от 3 до 16 колонок.

Responsive Grid PSD

Responsive Grid PSD

Responsive-Grid-PSD

Шаблон модульной сетки от Джоела Букелмана для разработки адаптивного дизайна.

Фреймворки для построения модульной адаптивной сетки

1140px.com

www.1140px.com

1140

Простой в использовании, кроссбраузерный фреймворк, предназначенный для быстрой разработки  динамичных сайтов.



The Golden Grid

goldengridsystem.com

Golden-Grid-System

Golden Grid — фреймворк на основе CSS. Использует правила «золотого сечения». Изменяет количество колонок от 4 до 18, в зависимости от размера экрана.

Bootstrap

getbootstrap.com

Bootstrap

Самый популярный фреймворк для разработки адаптивных и мобильных web-проектов. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейсов, включая JavaScript расширения. Bootstrap использует самые современные наработки в области CSS и HTML. Интуитивно простой и в тоже время мощный инструмент, повышающий скорость и облегчающий разработку web-приложений.

Frameless

framelessgrid.com

FRAMELESS

Простой шаблон для создания адаптивной модульной сетки. Адаптирует дизайн в любое количество колонок.

Columnal

Columnal

Адаптивная модульная сетка, позволяющая  ПК и мобильному устройству одинаково хорошо отображать содержимое сайта. Columnal рекомендуется применять для быстрого прототипирования Ваших проектов.

Skeleton

getskeleton.com

Skeleton

Skeleton — фреймворк на основе CSS и JavaScript. Адаптивная сетка основана на многим знакомой 960 пиксельной сетке, однако ее легко адаптировать под разные устройства.

PURE

Pure

PURE

Набор адаптивных CSS модулей, которые могут быть использованы  для любого веб-проекта. Прекрасный  инструмент, позволяющий применять модули для любого проекта, даже если вы уже используете в разработке другие фреймворки или вам просто нужен только один модуль. Настоятельно рекомендует обратить внимание на данный фреймворк, если вы занимаетесь разработкой адаптивных сайтов.

YAML

www.yaml.de

YAML

Yaml — СSS Framework от немецких разработчиков для создание адаптивных кроссбраузерных сайтов. Как и любые другие CSS фреймворки, он создан для облегчения жизни front-end разработчика. В нем можно создать шаблон как для простого, так и для сложного сайта. Yaml хорошо документирован, имеется множество примеров, которые пригодиться при верстки.

960grid

960.gs

960grid

960 grid — классика среди CSS фреймворков, очень полезный инструмент в основе которого лежит ширина каркаса в 960 пикселей. Grid 960 — СSS фреймворк, позволяющий разработчикам быстро разрабатывать прототипы дизайна. Являются прекрасным инструментом для создания макетов. Система создаст каркас шириной 960 пикселей и все блоки, созданные в этом каркасе будут соответствовать определённым пропорциям.

Поделиться , , Google+, Pinterest,