Сетка 1440 12 колонок

Модульные сетки

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

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

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

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

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

Ниже на примере слева мы видим сайт со скролом, а справа без.

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

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

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

Разрешение экрана — это размер видимого изображения измеряемое в пикселях. Например, 1920х1080px, 1280x1024px, 1024x768px, 768х1024px, 320х480px и т.д. Разрешение зависит от технических характеристик экрана устройства. Важно! У изображения есть еще один параметр dpi. Для веба используется 72dpi. Об этом мы поговорим в следующих уроках.

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

В 90% проектов используется сетка на 12 колонок. Это связано с тем, что число 12 делится на: 12, 6, 4, 3, 2, 1, делая сетку гибкой, позволяя органично вписывать в нее блоки практически любого количества или ширины. Давайте рассмотрим пример сеток для устройств с разными экранами.

На изображениях ниже мы рассмотрим два подхода к построению сеток. Первое, когда меняется количество колонок, а ширина колонки и межколонного расстояния сохраняется. И второе, когда сетка сохраняет 12 колоночную структуру, а меняется ширина колонки и межколонного расстояния.

Источник

1440px Grid Template

A wide 1440px grid system for all your webdesign needs.

Nowadays the basic 960px or 1200px grid systems are a bit too small for some design prototypes. The next optimal number is 1440px, as it still would fit into an old 1600px wide monitor and is dividable by 2, 3, 4, 5, 6, 8, 9, 10, 12, 15, 16, 18, 20, 24, 30, 32, 36, 40, 45, 48, 60, 72, 80, 90, 96, 120, 144, 160, 180, 240, 288, 360, 480. This makes it totally flexible and easy to work with.

The 1440px Grid System is based on the «1200px Grid System» by Fly Webservices and the «960 Grid System» by Nathan Smith.

8, 9 and 12 Columns PSD/PNG/CSS Templates.

Just download the package, which fits your needs. Each package includes a PSD, PNG and a CSS template file. If you want the full fun, just grab the full package, which includes 8-, 9-, and 12-column layouts.

Why should I work with a grid system?

Responsive Design ermöglicht, das Aussehen einer Website optimal auf alle Endgeräte anzupassen. Webseiten mit responsiven Code sind bezüglich Rahmen und Layout flexibel, sodass Elemente wie Navigation, Seitenspalten und Texte je nach Auflösung und Endgerät reagieren und die passende Darstellung der Website aufgerufen wird. Mit reaktionsfähigem Design kann Ihre Seite also immer optimal abgebildet werden. Egal ob das Endgerät ein Smartphone, Tablet, PC, Laptop, E-Book-Reader oder TV ist.

Die Basis von Responsive Design stellen HTML5 und CSS3 dar. Wer auf die Website zugreift, übermittelt automatisch die Eigenschaften und Fähigkeiten des Endgeräts mittels Media Queries. Darauf passen sich Layout und Funktionen der Seite an. Bilder und Schriftgrößen werden beispielweise entsprechend skaliert. Die Website behält somit die Benutzerfreundlichkeit unabhängig vom Endgerät bei.

Die immer weiter steigende Nutzung von mobilen Endgeräten wie Smartphones oder Tablets fordert auch eine Anpassung des Webdesigns. Responsive Webdesign überträgt die Usability einer Seite auch auf mobile Endgeräte und wirkt sich somit positiv auf das Besuchserlebnis des Users aus. Responsive Design verringert den Zeitaufwand der Content-Pflege im Vergleich zu getrennt programmierten Mobil- und Desktop-Versionen, da nur eine Version für alle Endgeräte berücksichtigt werden muss. Das gilt auch für zukünftige, neue Endgeräte.

Responsive Design kann im Prinzip von jedem Webdesigner erstellt werden. Hierzu werden viele Schulungen und Tutorials im Internet angeboten. Für eine professionelle Umsetzung von umfangreichen Projekten empfiehlt es sich jedoch, eine Agentur, die die Technik des Responsive Designs beherrscht, auszuwählen. So kann auf den reichhaltigen Erfahrungsschatz der Profis zurückgegriffen und Kosten und Zeit gespart werden. Diese Agenturen helfen natürlich auch dabei, ganz neue Ideenansätze für die Umsetzung von Problemen zu finden. Das Team von Conexco aus München ist auf diesem Gebiet Spezialist und zeigt gerne, wie individuelles Responsive Design eine Website optimieren kann.

Endkunden ärgern sich sehr schnell über eine Seite, die in Sachen Benutzerfreundlichkeit nicht den aktuellen Standards entspricht. Das Vertrauen in die Leistungsfähigkeit sinkt und im schlimmsten Fall ist der Kunde für immer verschwunden. Gerade im E-Commerce ist die korrekte, einfache und trotzdem ansprechende Darstellung einer Website sehr wichtig. Ein Responsive Online Shop kann helfen, diese Darstellung auf einen Schlag für alle Endgeräte zu optimieren, und stellt somit für die Kunden einen echten Mehrwert dar, was zwangsläufig zu einer Steigerung der Conversion Rate führt.

Other helpful links & tools

Impressum

Information in accordance with section 5 TMG:

FUTRIZE | digital brand communication
Owner: Sebastian Wiercinski
Maria-Goeppert-Straße 1
23562 Lübeck

Commercial Register: 150#823410
Registry court: District Court Lübeck

Contact

Telephone: 0151 610 275 72
E-Mail: hi [et] futrize [dot] com

Tax ID

Value added tax ID according to §27a Umsatzsteuergesetz:
DE320405008

Disclaimer

Accountability for content

The contents of our pages have been created with the utmost care. However, we cannot guarantee the contents’ accuracy, completeness or topicality. According to statutory provisions, we are furthermore responsible for our own content on these web pages. In this context, please note that we are accordingly not obliged to monitor merely the transmitted or saved information of third parties, or investigate circumstances pointing to illegal activity. Our obligations to remove or block the use of information under generally applicable laws remain unaffected by this as per §§ 8 to 10 of the Telemedia Act (TMG).

Accountability for links

Responsibility for the content of external links (to web pages of third parties) lies solely with the operators of the linked pages. No violations were evident to us at the time of linking. Should any legal infringement become known to us, we will remove the respective link immediately.

Copyright

Our web pages and their contents are subject to German copyright law. Unless expressly permitted by law (§ 44a et seq. of the copyright law), every form of utilizing, reproducing or processing works subject to copyright protection on our web pages requires the prior consent of the respective owner of the rights. Individual reproductions of a work are allowed only for private use, so must not serve either directly or indirectly for earnings. Unauthorized utilization of copyrighted works is punishable (§ 106 of the copyright law).

Источник

Сетки для адаптивного дизайна

Мы собрали наиболее частые темы, связанные с сеткой в адаптивном дизайне, чтобы «повысить резкость» термина как такового и систематизировать практические знания: как настраивать сетку в дизайн-макете, по каким параметрам делать расчет, какие особенности адаптивной среды учитывать и на какие детали обращать внимание.

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

Прежде чем создавать сетку, нужно «исследовать рабоче поле» — сделать черновой макет страницы, найти ограничения и критические области, которые обязательно проявят себя на этапе детального проектирования. Это помогает свести абстрактное понимание задачи к конкретным целям. После этого можно приступать к настройке рабочей сетки в макете. Для этого нужно создать структуру из трех типов сеток — базовой, колоночной и дизайнерской.

Базовая сетка

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

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

Базовая сетка должна сочетаться с колоночной. Дефолтные настройки Photoshop предлагают дизайнеру сетку с шагом в 10 px, что соответствует смещению объекта по горячей клавише shift, но не соответствует ни кеглю шрифта, ни логике построения колонок и отступов. 10 px — целое число, но не более того. В настройках сеток для мобильных платформ хорошим шагом можно считать 4 или 8 px. Здесь же шаг сетки должен ровно укладываться в высоту строки основного текста и не быть слишком мелким.

Колоночная сетка

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

В адаптивном дизайне нужно сохранять структуру макета и аккуратность подачи информации для всех разрешений, поэтому макеты следует делать для всех контрольных точек. При этом колонки сетки остаются статичными и добавляются по мере увеличения ширины экрана, а элементы меняют свое положение, подчиняясь колоночному ритму и точкам перехода, breakpoints. За таковые можно принять 640, 768, 960, 1024, 1280 и 1440. И для каждого разрешения экрана соответственно будет разное количество колонок.

Сколько колонок выбрать для сетки?
Колоночная сетка отвечает за горизонтальный ритм, и чтобы таковой возник, нужно выбрать соотношение ширины колонки и отступа, которое позволит легко менять положении более крупных блоков. Это возможно, когда в крупный блок помещается несколько колонок, например 3-4. Отступ в данном случае, это воздушное поле, в котором не следует размещать элементы. Это важно в том смысле, что отступ — это не еще одна направляющая, по которой можно выравнивать элементы.

Соответственно, при выборе количества колонок нужно держать в уме, сколько прямоугольных модулей будет использоваться на странице. Например, будет галерея из шести фотографий с текстовыми описаниями, два крупных графика и три абзаца текста. Тогда число колонок должно быть кратно 2, 3 и 6. Подойдет число 12. Деление рабочей области в 960 px на 12 колонок с шириной отступов в 10, 12, 16, 15 и 20 px даст ширину колонок в 60, 64, 65, 68, 70 px. Таким образом получится несколько вариантов сетки, например сетка в 12 колонок с шириной колонки в 64 px и отступом в 16 px.

Почему число в 12 колонок привычно? Все современные мониторы работают в разрешениях начиная, как минимум, с 1024×768. Разбиение рабочей области 960 px на 12 колонок подходит более всего, так как хорошо делится на колонки и отступы, кратные 2. Исходя из этого можно выбирать число колонок и для других разрешений — 10 колонок для 768 px, 16 колонок для 1280 px и 20 колонок для 1440 px и более. По сути колонки прибавляются либо убавляются для каждого разрешения.

Если же отталкиваться от задачи построить сетку под баннерную рекламу, то нужно найти оптимальную ширину отступа и колонки, исходя из деления ширины баннера в 300 и 240 px. Из всех вариантов деления подходящими (совпадающими) размерами будут 10, 12, 15, 20. Баннерная реклама, как таковая, проходит через большинство сайтов, почти как полоса общественного транспорта, и мы мало можем влиять на нее. Но можно рассчитать колонки иначе и допустить незначительный выход баннера за пределы одной колонки по правому краю, но тогда сама сетка будет строиться на других модулях (например, на карточках товаров или видео-роликов). В этом случае следует на этапе дизайна лейаута продумать где на странице будет фиксированное положение баннеров, и какие элементы должны сопровождать эти баннеры, чтобы вместе создавать модуль, подчиняющийся сетке.

Дизайнерская сетка

Дизайнеру нужно создать лейаут, который будет учитывать не только баннерную рекламу, но и другие не менее значимые элементы и типы контента: вертикальные постеры фильмов, квадратные музыкальные обложки, крупные фотографии, видео, статьи по десять штук в одном ряду и так далее. Лейаут может складываться из двух узких колонок по бокам и одной широкой по центру. Может из одинаковых колонок с широкими отступами, а может даже состоять из «плавающих» колонок (когда две, когда пять), но так, чтобы это становилось видимым за счет повторения компоновки материалов и вложение «меньшего в большее».

Небольшая цитата из совет о якорных объектах Артема Горбунова

Прямоугольник — базовая фигура модульной вёрстки

Хорошая крепкая сетка строится на прямоугольных модулях. Композиция удалась, если всё, что вы нарисовали, можно обвести пропорциональными прямоугольниками, и они помещаются на странице, не налезая друг на друга и подчиняясь горизонтальному и вертикальному ритму.

Что именно это значит на практике? Пример из физического мира — модульная сетка в стене с отверстиями Kerf Wall, на которой можно расположить ящики и полки в любом порядке. Вы можете даже велик повесить на такую стену — главное, чтобы объекты не мешали друг другу, иначе они свалятся. Тоже самое и с крепкой сеткой.

Отдельно о Сетке базовых линий (baselinegrid)

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

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

Пример вертикального ритма на WebTuts+:

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

В совете о работе с межстрочным расстоянием в блоках с разным размером текста Артем Горбунов говорит о том, что сетка базовых линий скорее вредна, и что высоту строки текста и отступов лучше настраивать вручную. Интерлиньяж текста следует подбирать в зависимости от формата (модуля, плашки, текстового блока). Если строки в текстовом блоке короткие, то интерлиньяж можно сделать меньше. Если текстовый блок достаточно широкий и строки в нем длинные, то интерлиньяж следует сделать больше, иначе текст потеряет удобство чтения.

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

Существует множество фреймворков, CSS-сеток, и многие из них предлагают создавать высоты строки примерно в полтора раза большую, чем размер шрифта и вписывать в получившуюся линию все остальные строки текста. Например UnitGridSystem. Некоторые предлагают определять интервальное число и выставлять интрильяж для всех текстов кратный этому числу. Но в этом случае от части шрифтов придется отказаться. В качестве компромисса подойдет инструмент Grilover. Он отличается от других тем, что не просто регулирует высоту базовой строки шрифта, но и компенсирует слипание/расползание строк параметром Scale factor.

Использование сетки при передаче макетов в верстку

Сетку полезно передавать верстальщикам в виде отдельной спецификации. Вы можете не только приложить к основному джипегу дополнительный джипег с сеткой, но прописать на нем основные размеры — например шаг, отступ, ширину колонки, размеры шрифтов. Тогда соответствие вашего макета и верстки станет более точным, и контроль над разработкой и синхронизацией повысится с обеих сторон. Точно также как в мобильных интерфейсах существуют независимые пиксели (dp), так и в вебе это единицы rem. Вы можете создать разметку в пикселях или прописать ключевые элементы и расстояния в rem. Удобно когда шаг вашей сетки и rem кратен одному и тому же числу. Например, если шаг сетки 8 px, базовый шрифт — 16 px и rem равен 16 px, то размеры элементов и расстояния при кратности 4 будут становиться на сетку и иметь целое значение в rem. Это позволяет сразу видеть расстояния между элементами по шагам на сетке. Такие цельные значения без долгих расчетов можно получить наглядно, если воспользоваться Rem Калькулятором.

Источник