Модульная сетка

Креативный дизайн сайта — это конечно же неплохо. Об актуальности и мере креатива написано немало. Но никогда не нужно забывать о базовых требованиях к макету.

Итак, поговорим о модульной сетке, которая помогает структуризировать элементы дизайна и привести их в логически понятную схему для дальнейшего креатива, верстки и программирования. Проще говоря, мобудльная сетка — это набор вертикальных и горизонтальных направляющих, которые делят макет страницы сайта (включая поля), в соответсвии с которыми в дальнейшем организуется контент. Например:

пример модульной сетки

 

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

Модульная сетка — очень гибкий инструмент. Ее можно создавать самостоятельно (создавая их в photoshop View>New Guid или используя специальные плагины для photoshop и скрипты). Так же можно воспользоваться готовыми шабонами сетки. Очевидно, что сетку можно создавать как под дизайн, так и дизайн создавать под сетку.

 

Самостоятельное создание сетки.

1. guideguide.me — плагин для photoshop cs5, cs6. Позволяет самостоятельно задавать количество направляющих и расстояние между ними.

guideguide

2. GridMaker — плагин для  photoshop со множеством вариантов настроек

gridmaker

Сервисы, которые позволяют либо установить плагин либо выбрать вариант шаблона

1. 960.gs — пожалуй, самый известный инструмент. Предоставляет и psd шаблон (templates) и плагин (app_plugins). Единственный минус — всего 3 варианта количества колокнок 12, 16 или 24 колонки; горизонтальные направляющие отсутсвуют. Более подробное руководство тут

960

2. Modular Grid Pattern

modul grid pattern

 

Сервисы готовых вариантов модульных сеток

1. Photoshop Grids — база готовых шаблонов сеток для photoshop

Ps_Grid

2. Grid Calculator — по заданным параметрам рассчитывает ширину макета

grid_calculator

 

3. Grid Designer — помогает создавать css и html шаблоны на основании заданных параметров модульной сетки и выбранных варинтов типографии

grid_designer

 

4. GridSystemGenerator — предоставляет выбор популярных сеток с возможностью азадать свои параметры в них и скачать результат.

gridly-generator

 

 

Сервисы для адаптивных сайтов

1. Gridpak — генератор адаптивной сетки

gridpak

 

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

 

Оставить свой комментарий

Пожалуйста, введите ваше имя

Ваше имя необходимо

Пожалуйста, введите действующий адрес электронной почты

Электронная почта необходима

Введите свое сообщение

Оставайтесь на связи

webydesign © 2020 Все права защищены