Основная идея сетки на основе конструкций является твердое визуальное и структурное равновесие веб-sites Вы можете создать с ними.

Сложные структуры макета предлагают большую гибкость и улучшить визуальное восприятие посетителей.На самом деле, пользователи могут легко следовать последовательности страниц, в то время как разработчики могут обновить макет в хорошо продуманной, последовательной путь.Тем не менее, it’ S довольно трудно найти свой путь через все теория, лежащая в грид-систем: это isn’ T легко.Некоторые важные понятия и связанные с ними ключевые факты, чтобы научиться основам и сохранить основные методы в mind.

И это то, что эта статья все о.Вдохновленный Хой Vinn’ S и Марк Boulton’ с презентацией Сетки Good, we’ твердо решили сделать глубокий взгляд в статьях о сетке на основе конструкций.We’ читали через более чем 50 статей и выбрал некоторые из самые важные и интересные факты веб-разработчики должны знать о сетке на основе approach.Кроме того, we’ ве перечислены наиболее полезные ссылки, учебных пособий и инструментов, мы нашли – с точным описанием, что статьи about.

Примеры сетки на основе design

Но сначала несколько примеров на основе сетки проекты, чтобы сделать ясным, что статья about.

Вещи Вы наверное не знаете о сетке на основе Design

• “ сетка является наиболее ярким проявлением волиЗаказать в области графического дизайна.[...] Единиц являются основным блоком buildung сетки.They’ повторно все формы.Столбцы группировки единиц, которые создают визуальную структуру страницы.Они не являются необходимыми uniform.”[ Сетки good]
• “ сетка представляет собой последовательную систему для размещения объектов.Она работает на двух уровнях: на уровне подразделения клеток (например 20× 20 пикселей) и на уровне столбцов (например, 4 колонки) ”.[ Grid на основе Layout]
• “ сбалансированной и последовательно реализуется расчетная схема увеличит readers’ доверие вашего сайта.[...] Ваш первый шаг заключается в создании основной сетке.С помощью этого графического “ backbone” можно определить как основные блоки типа и иллюстраций будут регулярно происходить в ваших страницах.[..] Для начала, собрать репрезентативные образцы текста, наряду с некоторыми графики, сканирование или другой иллюстративный материал, и экспериментировать с различными расположения элементов на странице.[...] Ваша цель заключается в создании последовательной, логичное расположение экрана, которая позволяет “ плагина in” текст и графику без stop и переосмыслить свой подход к проектированию основных на каждом новом page.”[ Web Style Guide]
• “ Один из самых больших проблем при работе с сетками на веб-страницах, что вы часто не можете поделать вертикальных пропорций.Часто содержание является динамическим, так что лучшее, что вы можете сделать, это приблизительные.[...] Таким образом, в центре внимания, как правило, на горизонтальное расположение, что обычно означает columns.”[ Dave Shea]
• “ На веб-вертикальный ритм — расстояние и расположение текста читатель погружается страница — это способствовало три фактора: размер шрифта, высоту строк и маржи или обивки.[..] Основной единицей вертикального пространства линии height.”[ Ричард Rutter]
• “ Для того, чтобы типографские сохранение целостности, когда текст изменены пользователем мы должны использовать EMS для всех наших вертикальных measurements, в том числе высота строки, отступы и margins.”[ Ричард Rutter]
• “ Проектирование Grid Systems в области графического дизайна, 1.выяснить, размер страницы, 2.разделить его на сетке, 3.начать designing”.[Йозеф Мюллер-Брокман в "Grid Systems в области графического дизайна"]
• “ Использование канонической сетки для настройки размеров и положения элементов по строкам. Короткие элементы продлен до начинаются и заканчиваются на сетке границ, в то время как длинные элементы могут занимать несколько сетку units или сокращен до вписывается в стандартные единицы.ВТаким образом, сетка просто используются, чтобы помочь установить последовательное выравнивание отношений.[...] Для динамических макетов, определение минимального размера, которые могут быть размещены на макете, как правило, лучшее решение, чем пытаться пересчитать макет для сколь угодно малого дисплея sizes.”[Модуль и программу]
• “ Один из наиболее эффективных принципов в бланке называется Правило Thirds, также известный как золотое правило сетку.Правило Третей является методика, которая применяется деление пространства на три части, как вертикально, так и горизонтально, создавая сетку rectangles.”[ Отметить Boulton]
• “ Золотое сечение, Золотое сечение, и грандиозные Божественная пропорция все имена одного и того же; отношение 1,618.Клевал носом?Еще нет?Хорошо!Медведь со мной.Вот с математикой: Золотое сечение представляет собой отношение между двумя сегментами так, что отношение между точкой AC / BC является 1.618. ”[ Отметить Boulton].Вы можете также использовать Phiculator для вашего grids.
• “ Золотое сечение представляет собой отношение которая проявляется во всей Вселенной, как число Phi.Вы можете использовать это отношение для хорошего эффекта в дизайне, убедившись, что элементы вашей сетке соответствует этому отношение.Использование Золотое сечение может обеспечить естественное чувство правильный состав, даже если она находится в математике она будет ‘ feel’ right.”[ Все Boulton]
• “ Структуры Grid: После того как вы ответили на большинство вопросов, касающихся содержания, формата и типографии, вы должны начать набрасывать сеть структур на основе соответствующих размеров страницы и форматов.Сначала вы должны начать с определения типа районе.Тип Площадь является областью, где ваша сетка будет содержаться.Он окружен со всех сторон поля, а в некоторых случаях работают руководители и нижние колонтитулы, номера, на полях, etc.”[Типографские сетей]
• “ Главный принцип базовой сетки в том, что нижней части каждой строки текста (базовый) приходится на вертикальную сетку установить даже в increments весь путь вниз page.”[ Wilson Miner]
• “ Вы можете использовать относительные размеры, но она быстро становится намного труднее maintain как математика становится более сложной.Легко получить 12 из 18 (просто установить высоту строки 1.5em), но если вы хотите настроить размер шрифта, но сохранить ту же линию высоты, фракции начать, чтобы получить messy”.[ Wilson Miner]
• “ макеты таблицы являются большими для сетки designs. разметка сама воспроизводит конкретную сетку, и тенденция является для нас просто заполнить коробки с изображениями, тип и элементы интерфейса, которые составляют наш дизайн. ”[ Molly Holzschlag]
• “ коэффициенты лежат в основе любой хорошо продуманной сеткой системы.[..] С помощью размера бумаги в качестве ориентира можно разделить с помощью этого соотношения, чтобы начать создание сетки.Вы можете увидеть это через диаграммы 1 – 6, которые мы начать с простого разделения слоев при делении медленно наращивать grid.”[ Отметить Boulton]
• “ хорошо продуманные системы сетки может сделать ваши проекты не только более красивыми и четкими, но подробнее usable. ”[ Все Boulton]
• “ Водосточные системы являются пробелы между столбцами.Они там так текст или изображение, из разных столбцов don’ T сталкиваются друг с другом.В сетке проектирование системы sometimes, в зависимости от того, что вы читали теорию, водосточные желоба являются отдельными, чтобы columns. ”[ Отметить Boulton]
• “ Дело о разработке к сетям в том, что для того, чтобы сетка работать, вы должны последовательно выравнивания элементов по сетке lines.”[ Отметить Boulton]
• “ Один из самых полезных ‘ tools’ для создания пиксель-идеального грид-систем для сети Khoi’ с превосходным idea использования сетки, как фоновое изображение элемента на теле тега.Подведем итог: Использование сетки я разработал в фотошопе, я сохраню его, как рисунок, а затем применить это на фоне тела тега.Это дает мне, по всей сборки сайта, сетки, поэтому я могу привести все элементы содержания accordingly.”[ Отметить Boulton]
• “ В макета страницы, you’ ве, вероятно, задать поля.Эти поля часто появляются как свет твердых или пунктирными линиями на экране.Эти верхнее, нижнее, левое и правое поля создать поле в середине страницы.Остановитесь там и у вас есть единое целое grid.Далее разделить страницу на однородные части и you’ нас созданы блок с несколькими grid. ”[ Jacci Howard Bear]
• “ единиц сетки являются основной местах на странице, где вы будетеТекст место и изображений.Они определяют размещение не обязательно размере.То есть, если у вас есть графическое изображение, которое больше, чем ваши ячейки сетки, она doesn’ означает, что вы can’ т использовать его.”[ Jacci Howard Bear]
• “ сетей 1, 2, и 3 колонки являются общими.Каждый может разместить много текста, особенно длинные статьи.[..] 4 или более столбцов предлагают большую гибкость для публикации текст, фотографии и другие графические элементы и сочетания длинных и коротких статей.[..] Сетям, основанным на четное число столбцов сетки могут страдать от слишком большого симметрии, если текст и графику приурочены к отдельным или двойной сеткой колонн throughout.”[ Сита - Гибкая Options]
• “ сетка состоит из вертикальных и горизонтальных линий и является основой практически всех типов визуальных средств массовой информации.Структуры, чтобы определить содержание в пропорциях, которые приятны для eye.”[ Энн Ван Wagener]
• “ Чтобы добавить гибкости вы можете разорвать сетку вниз на 10 или 12 столбцов.Half-столбцы хорошее место, чтобы закрепить кружку выстрелы, относится и других info.”[ Энн Ван Wagener]
• “ Вы можете иметь более одного сетку.Ваша главная страница может быть основано на пять столбцов сетки, а внутри страниц с объявлениями на шесть столбцов.Существует не один правый way.”[ Энн Ван Wagener]
• “ сетки манекен и комп шаблону.[..] Использование сетки на основе дизайна привилегии предоставил мне единицах измерения, что я мог легко превратиться в дивы для стилей.Я выяснить области содержания таким же образом, я хотел бы работать с каркасным, чтобы блокировать контент и графики.Я придумал схему именования для этих блоков и превратить их в элементы CSS.Далее, я отмерить блоки содержания или графики в designer’ S комп и запись измерений для моего стиля sheet.”[ Michael Angeles]
• “ Вы можете использовать сетку, как каркасный (стр. схему), выбрав области контента и блокирования их, называя их, как вы go.”[ Michael Angeles]
• “ основных чертах на основе грид-дизайн: содержание, аудитория, иллюстрации / Фото / Иконки, Формат, Typography.”[ Чувствуя свой путь вокруг grids]

Статьи о сетке на основе дизайна Approach

• Столбцы & Grids Dave Shea говорит о сложности грид-систем в веб-страниц и компромисс columns.
• Вычитание: О Yeeaahh!– “ сетки Good” Скачать “ Сетки Good” презентации (8 МБ PDF), созданного Khoi Vinh и Марк Болтон. Слои Cake.
• Создать для вертикального RhythmВ Интернете, вертикальный ритм — расстояние и расположение текста читатель погружается страница — это способствовало три фактора: размер шрифта, высоту строк и полей или padding.Все эти факторы должны рассчитывается с осторожностью, с тем, что ритм maintained.
• Проектирование сетей для веб-pagesНикто не бланке система подходит для всех веб-страниц.Ваш первый шаг заключается в создании основной сетке.С помощью этого графического “ backbone” можно определить как основные блоки типа и иллюстраций будут регулярно происходить на ваших страницах и установить размещение и стиль руководящие принципы для основных названий экран, субтитры и навигационные ссылки или buttons.
• Разработка сетки, которая поддерживает вашу designВсего несколько месяцев назад, когда я создал ни одного дизайна, я не практиковал подвесной системе.Я не много знаю об этом, я думал, что я могу жить без него.Да, это правда.Вы можете жить без подвесной системы, но должен вас?Почему сетке важно?Я постараюсь ответить на все ваши вопросы в этом article.
• Grid-ориентированного проектирования Несколько основных правил и методов на основе сетки design.
• Типографские сетейРешетки, коэффициенты и типографии.Теории, такие как золотой пропорции (также известная как золотой середины, золотой номер, золотое сечение, золотая пропорция, божественная пропорция и раздел Aurea) возникают из натуральных моделей и их применение в визуальном и творческого поля, чтобы создать “ beauty”путем считается композиция.Золотое …
  
  Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров
  
  
  
  Главная → Вебдизайн → 14.04.2007 by Newsbot