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

Памятка дизайнеру сайтов / Хабрахабр. Вторая версия статьи, расширенная и дополненая. Большая часть готовилась для моего выступления на «РИТ: Клиентские технологии», куда я, к сожалению, не доехал.

В данной статье расскажется о том зачем нужны модульные сетки, как их. Устав Ооо Кафе. Сегодня я решил поделиться с коллегами одним из учебных кейсов пошагового построения дизайна сайта с использованием . Использование модульной сетки поможет начинающим дизайнерам не перегружать сайт. Если впервые слышишь понятие «модульная . Для лендингов, сайтов с карточной структурой, портфолио и галерей. Пример из физического мира — модульная сетка в стене с .

К сожалению огромная армия даже опытных, «модных» и эффектных дизайнеров забывают, что результатом их творчества должен быть сайт, а не только «супер- скриншот» годный только для портфолио. Первоначально эта памятка писалась мною для внутреннего пользования но, обрастая материалами, выросла в самостоятельную статью. Америку я не открыл, а просто собрал воедино и сформулировал ряд требований, которые должен учитывать дизайнер в процессе проектирования и оформления сайта. Вначале думаем, потом делаем. Это очень простое и часто нарушаемое правило.

Особенно молодыми дизайнерами. Я настоятельно рекомендую всем и каждому: возьмите карандаш и бумагу.

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

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

Пример быстрого наброска и полученного результата. От большего к меньшему, от общего к частному. Это второе простое правило. И оно также часто нарушается. Классическое преподавание рисунка и живописи учит: «Двигайтесь от большего к меньшему, от общего к частному.

Вначале проработайте общую композицию, самые большие массы и объемы, самые крупные пятна, а потом дорабатывайте, уточняйте, насыщайте деталями.»Это правило целиком применимо ко всем аспектам и жанрам дизайна. Продумайте свой проект, найдите идею и композицию, нарисуйте серию эскизов. И потом, планомерно, эти эскизы воплощайте, начиная с сетки, компоновки блоков, элементов, крупных цветовых пятен. И последовательно насыщайте их деталями.

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

А не просто «получится- неполучится». Итак, подытожим: «От большего к меньшему, от общего к частному». Модульная сетка. Одно из первых решений в процессе создания дизайна — это модульная сетка. Единый каркас и схема расположения всех основных блоков и элементов, проходящий через все страницы сайта. Сетки бывают простые и сложные, гибкие в использовании и не очень.

Это не столь важно. Важно то, что если вы при проектировании дизайна задали определенную сетку модулей — будьте добры ей следовать. От первой до последней страницы своего проекта.

А если в процессе прорисовки внутренних страниц у вас появились элементы, не ложащиеся в принятую сетку — значит вы недостаточно времени уделили её проектированию. Следование единой модульной сетке в рамках проекта не только увеличит цельность и логичность восприятия сайта, но и многократно упростит труд разработчикам. Пример использования модульной сетки.

Пример использования модульной сетки. Масштабируемость. В наше время, когда у всех пользователей самые различные мониторы, есть смысл делать преимущественно «резиновые» сайты. Во многих случаях, это касается даже рамок (border).

Исключение могут составлять лишь картинки. И то, жесткий размер в px для многих изображений — ограничение лишь по вертикали.«Сжатие- растяжение». Оптимальна для использования так называемая «полу- резина», т. Фактически сейчас есть только два минимальных параметра: 7. Первый оптимален для корпоративных сайтов либо ресурсов, рассчитанных на самую массовую и разношерстную аудиторию (например, массовые сервисы: почтовые, поисковые, новостные и т. Второй подходит для сайтов имиджевого и промоушен назначения. Проверяем, и если требуется корректируем, каждый элемент модульной сетки, чтобы не возникало наездов/нахлестов элементов друг на друга при минимальном сжатии сайта.

Максимальная ширина сайта может быть разной, но, как правило, рекомендуется диапазон для растяжения не выше, чем в полтора- два раза от размера минимального сжатия. Это обусловлено тем, что при растягивании сайта более, чем в полтора раза композиция, обычно, рушится. Нужно определить, что произойдет со всем сайтом, при размере монитора пользователя свыше максимальной ширины. Решаем, куда он будет выравниваться. По центру? Добиваемся завершенного вида сайта и его естественного перехода в окружение при разрешении свыше максимального.

Недопустимо, чтобы сайт на большом мониторе выглядел как «обрезанный». Рисуем все иллюстрации и неповторяющиеся фоны из принципа «у кого больше монитор, тот больше увидит». Обычно, ширина иллюстраций обусловлена шириной отведенных под них блоков модульной сетки в состоянии max. Запас на рост сайта.

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

Пример «безболезненного» изменения/добавления древовидной навигации первого и второго уровня. В некоторых случаях нужно предусматривать безболезненное для внешнего вида добавление/скрытие информационных/функциональных блоков на сайте. Пример «безболезненного» перемещения,изменения/удаления блоков сайта. Учитывая экранную масштабируемость, а также добавление новых материалов на сайт, рекомендуется отдавать предпочтение текстовым заголовкам и навигации. Шрифтовая схема. Большая часть сайтов смотрится цельно и завершенно при построении дизайна на основе одного- трех шрифтов.

Базовый шрифт  — основной шрифт материалов сайта. Акцидентный — шрифт для заголовков. В некоторых случаях вводятся дополнительные шрифты для: меню и навигации; блоков выделения (важной информации, цитат, выносок); для мелкого текста, с целью повысить читабельность. Дизайнер должен спланировать единую общую схему размеров отступов/заступов для всех элементов на сайте, иерархию заголовков и навигационных элементов (например, для древовидного меню или облака тегов). Она должна быть цельной и использоваться на всех страницах сайта. Всё последующее оформление информации на сайте должно строится на базе общей схемы.

Шрифтовая схема простого корпоративного сайта. Реакция на пользователя. Дизайнер должен спланировать, что будет происходить с элементами, реагирующими на действия пользователя. Рассмотрим типичные элементы. Навигация. Фрагмент макета сайта, на котором показаны три состояния навигации: обычный вид меню, пункт меню при наведенном курсоре, выделение текущего раздела. В зависимости от типа и масштабности сайта, нужно показать ряд состояний пункта навигации.

Типичный набор: Нормальный вид. Мы навели курсор.

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

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

Что такое модульная сетка и для чего она нужна в веб- дизайне. Все, что окружает нас, имеет свои пропорции.

Еще в детстве мультик «3. Также все мы знаем о том, что рост человека равняется семи его головам, сантиметр состоит из десяти миллиметров, метр из ста сантиметров и так далее.

Таким образом, попугай из мультика, голова человека, миллиметр и сантиметр — это модули. Из всего этого мы можем понять, что модуль — это условная единица, шаг в ритме сетки. А сама сетка являет собой систему пропорций. Чем же нам поможет эта модульная сетка? Во- первых, она ускорит работу, потому что нам не придется тратить массу времени на попытки гармонично расставить все элементы. Во- вторых, с помощью сетки мы сможем понять, какой кегль нам нужно применить и каких размеров должен быть каждый блок.

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

То есть, она делает грубую разметку, разделяя площадь на блоки. Блочная сетка. 2.

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

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

Затем определяем, какие страницы будут самыми важными, с них и начнется работа. Для них мы сформируем список функциональности и рассортируем его по приоритетам. Мы должны описать каждый блок функциональности и детализировать его до мелочей. В итоге должен получиться список, в котором по уровням расписываются блоки и их элементы. Таким образом, у нас теперь есть пазлы, высыпанные из коробки, и нам осталось только собрать их в целостную картину.

Далее нам нужно сделать эскиз, в котором мы схематически изобразим все, что есть в нашем списке. Эскиз нужен для того, чтобы впоследствии мы смогли понять размеры модулей и составить сетку. Построение сетки начинаем с определения размеров рабочей области. Затем нам нужно сделать шрифтовую сетку. Для этого выбираем высоту строки, которая должна быть единой для всего макета. В элементах, которые имеют кегль отличный от кегля основного текста, междустрочный пробел должен быть кратным нашей высоте строки. Таким образом, мы получаем основание нашей будущей сетки.

На это основание будет опираться весь текст. Теперь нам нужно решить, какой ширины будет наш модуль. Здесь мы можем оттолкнуться от ширины какого- либо постоянного элемента. Если же у вас есть задача разместить по ширине страницы какие- то одинаковые элементы, то все становится еще проще, ведь вы уже знаете ее размеры. Для удобства нам нужно определить, каким будет расстояние между модулями. Оно должно быть равно минимум одной высоте строки из прошлого пункта. Есть один нюанс — нужно правильно выбрать размеры модуля, ведь если они будут слишком большими, то пропадет гибкость сетки, а если же они будут мелкими, то сетка просто потеряется.

Горизонтальное членение сделать достаточно просто. Его высота должна быть кратна высоте нашей строки. А уж сколько строк вы вставите в одно членение — это уже зависит от вашего эскиза. Теперь осталось только объединить модули в регионы и создать композицию. Конечно, модульная сетка весьма помогает в построении сайта, но если композиция будет выглядеть лучше без нее, то никто не вправе вам запретить ее «сломать».

Все таки человеческий глаз иногда воспринимает графическую информацию не такой, какой она является на самом деле. Для облегчения ваших поисков инструментов построения сеток вот вам несколько ссылок: 1. Guide Guide и Grid. Maker — плагины для Photoshop. Grid System Generator, Modular Grid Pattern и 9.

Grid System - онлайн инструменты, с помощью которых вы можете скачать уже готовую сетку нужных вам размеров. Gridpak — позволяет создать сетку для адаптивного сайта.

Hyper. Commentscomments powered by Hyper.