Модульная сетка для веб-дизайнера

Модульная сетка для веб-дизайнера
Модульная сетка для веб-дизайнера

По долгу работы в сфере в front-end разработок я частенько сталкиваюсь с исходниками других дизайнеров. Хороших, профессиональных, новичков и просто дилетантов. У них у всех есть одна большая беда — элементы в макете дизайна разбросаны грубо говоря, т.е не выровнены как следует прыгают из стороны в стороны. Поэтому я решил сегодня написать эту статью для веб-дизайнеров, познакомить их с таким чудом как Модульная сетка, как пользоваться и где скачать.

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

Для этого существует понятие как Модульная сетка. Она помогает предотвратить хаос элементов при рисовании дизайна. Поэтому когда отсутствует или представляет из себя нечто подобное как на картинке ниже…

Хаос при рисовании

Хаос при рисовании

…то на веб странице правит хаос, произвол и путаница. Кнопки, списки, меню, поле для поиска разбросаны по странице как попало. Верстается это фигня так же глупо и запутанно как и нарисовано. А это не очень хороший тон дизайнера, и на практике верстальщику приходиться самому исправлять что повлияет на сроки сдачи проекта. Чтоб такого не было существует Модульная сетка.

Что из себя представляет модульная сетка

Набор горизонтальных линий, к которым привязываются практически все элементы, расположенные на странице.

В большинстве случаев модульная сетка бывает 12, 16 и 24 колоночной. Если вы делаете свободный сайт с большим количеством «воздуха» между элементами, стоит использовать 12 колоночную сетку. Если же вы делаете сайт, где должно быть over дохрена информации на квадратный пиксель (привет forex), стоит использовать 24 колоночную сетку.

Откуда взять модульную сетку

Существует две способы получения модульной сетки абсолютно легальным способом.

1. Нарисовать

Долго, дорого (если учитывать человеко/часы, за которые вам платят деньги) и не всегда правильно с первого раза (зависит от опытности дизайнера в этом вопросе). Я на практике не встречал дизайнеров которые сами делают модульную сетку. Это на мой взгляд лишняя трата времени.

2. Скачать

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

960 grid — Конечно же самый популярный сервис. Каждый дизайнер наверняка знает этот сайт. Здесь можно бесплатно скачать сетку под разрешение 960 px практически для всех возможных редакторов (Photoshop, Illustrator, Corel…)

Modular Grid Pattern — Очень простой и эффективный калькулятор, позволяющий работать с ним на интуитивном уровне. Просто двигаем ползунки и наслаждаемся результатом.

Если не хотите каждый раз при рисовании рисовать сетки можно поступить еще проще. Существует немало количество расширений для фотошопа которые позволяют в самой программе рисовать модульные сетки. С моей стороны я могу порекомендовать одно единственное:

Guideguide — Одно из самых популярных расширений. Полностью бесплатно (но вы можете сделать пожертвование). Рекомендации по установке (English) можно прочитать здесь . Если в двух словах и на русском: установите Adobe Extensios Manager (бесплатно), установите расширение, перейдите в Window > Extensions > GuideGuide, наслаждайтесь.

В заключении

Не стоит пренебрегать построением макета по модульной сетке. Это облегчит жизнь вашим коллегам дизайнерам и вашим коллегам верстальщикам. А так же это повысить ваш уровень работы в глазах коллег и начальства. Если статья понравилась поделитесь со своими друзьями, помогите им повысить уровень квалификации. По поводу вопросов пищите в комментариях.

Читайте также:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.