Краткая история композиции - Оде | topinup.pro - 2018

Краткая история композиции — Оде

Краткая история композиции - Оде

Перевод главы «A short history of geometric composition» с онлайн-книги «Programming Design Systems».

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

— Йозеф Мюллер-Брокманн

Эта глава посвящена принципам композиции и тому, как они могут помочь дизайнерам создавать правильно организованы и красивые макеты. Термин «композиция» охватывает ряд методов, используемых для позиционирования элементов в макете. Это может быть простое соотношение — например, правило третей, согласно которому страница делится на три равных прямоугольника, или более сложное, как модульная сетка с несколькими колонками и полосами, которые определяют выравнивание текста и других о & # 39 объектов.

Макет разделен на три части и макет, разбитый на сетку.

Прежде чем окунуться в специфические детали, д & # 39; связанные с дизайном и кодом, рассмотрим примеры из истории искусств — этот раздел мы посвятим им. Особое внимание уделим тому, как новые технологии, такие как печатный станок и комп & # 39; Компьютер, повлияли на развитие понятия о композиции.

Хочу отметить, что для понимания предмета важную роль играет идея золотого сечения. Ее проще понять, представив линию, разделенную на два отрезка, короткий и длинный. Когда отношение долгого отрезка к короткому равна отношению целой линии к длинному отрезку — это называется золотым сечением. Численное выражение золотого сечения равно 1.61803398875, и его можно использовать различными способами. Например, прямоугольник с отношением сторон, равным 1.61803398875, называется золотым прямоугольником. Отрезав квадрат от прямоугольника, построенного по принципу золотого сечения, мы получаем новый, уменьшенный прямоугольник с тем же «золотым» отношением сторон, и у исходного прямоугольника. Если мы проведем кривую через противоположные вершины полученные квадратов, мы получим золотую спираль. Золотая спираль является самой популярной визуализацией золотого сечения.

Золотое сечение, изображенное как отношение отрезков и как золотая спираль

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

Проблема заключается в том, что большая часть подобных примеров является чистой выдумкой. Хотя есть художники, которые действительно широко использовали золотое сечение в своем творчестве, часто это просто примеры рационализации, когда авторы постфактум искали золотое сечение и, естественно, находили. Это ничем не отличается от теорий заговора, когда на долларах обнаруживают скрытые символы, а на фотографиях высадки на Луну — поддельные тени. В статье под названием «Ошибки о золотом сечении», опубликованной в 1992 году, Джордж Марковски утверждает:

Хотя математические свойства золотого сечения сформулированы правильно, большинство из того, что с ним эт & # 39; связывают в искусстве, литературе, архитектуре и эстетике — ошибочно, или серьезно вводит в заблуждение. К сожалению, эти теории о золотом сечении достигли статуса общепринятого знания и широко тиражируются.

Например, нет никаких письменных свидетельств того, что афиняне знали о золотом сечении во время постройки Парфенона. Более того, чтобы привести пропорции храма к золотому сечению, придется игнорировать бы о Большую часть фундамента. Известно, что Леонардо да Винчи иллюстрировал книгу Луки Пачоли «О божественной пропорции», но нет никаких свидетельств того, что он использовал эти идеи в своем творчестве. Хотя многие исследователи нашли золотое сечение в работах да Винчи, эти открытия могут оказаться суб & # 39; объективными, или даже ошибочными. Так как мы обсуждаем системообразующие принципы в дизайне, важно отделить факты от вымысла, и для композиции это особенно актуально. Вместо того, чтобы заниматься бесплодными поисками божественных пропорций, предлагаю сфокусироваться на том, как дизайнеры использовали технологические ограничения для облегчения своей работы. По мере развития таких приемов, они превратились в методы, широко используемые современными дизайнерами для создания прочных макетов сегодня, когда уже нет о & # 39; объективных ограничений, продиктованных технологии.

Читайте также:   Подружить текст с картинкой — Оди

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

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

Страница с Готской Библии, на которой ясно видно направляющие линии

Следующее изменение методы композиции испытали, когда были изобретен механический способ книгопечатания. Сначала Би Шэн в Китае (1045 г.), а затем Иоганн Гутенберг в Германии (1450 г.) изобрели наборный шрифт. В новой технологии использовались небольшие глиняные, деревьев & # 39; деревянные или металлические блоки с буквами, которые вставлялись в раму, покрывались краской и использовались для создания множества идентичных отпечатков. Можно себе представить, как критики того времени отзывались о новом изобретении — также как и о комп & # 39; Компьютеры сегодня: будто эти новые машины ограничивают художника и делают дизайн шаблонным. Но, в случае с первыми печатными Библия Гутенберга, видно, что верно обратное. Печатный станок заставил Гутенберга обдумывать все аспекты дизайна книг по прямоугольной сетке, и креативность, которую он проявлял в н & # 39; связи с этими ограничениями — замечательная. Чтобы добиться аккуратного двухколоночном макета, каждая буква была выпущена в нескольких вариантах по ширине, благодаря чему ширину строки можно было регулировать с обоих концов. Шрифт был результатом многомесячной кропотливой работы, целью которой было создание букв, в которых рисунок готического письма соотносился с новыми технологическими ограничениями. Так, печатный станок ограничивал дизайн, но печатники создали целое креативное пространство внутри этих ограничений. По словам Стивена Фрая, Библии Гутенберга были гораздо более красивыми, чем должны были быть.

Наборный шрифт в раме и одна из 49 сохранившихся копий Библии Гутенберга

В начале 1900-х годов новые технологии, рожденные промышленной революцией, стали доступны для художников и дизайнеров, и многие художники и политические движения с удовольствием стали их использовать. В центре многих европейских художественных движений (футуризм в Италии, дадаизм во Франции, Баухаус в Германии), и марксистских движений в России и Китае — использование печатного станка как символа протеста против изобразительного искусства. Итальянские футуристы, вдохновленные идеями урбанизма и машиностроения, экспериментировали с устоявшейся сеткой печатного станка. Если целью Гутенберга было заключить дизайн в прямоугольную сетку, то футуристы видели свою миссию в ее преодолении.

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

— Умбро Аполлонио

Этот дизайн Арденго софитов показывает намеренном разрушении прямоугольной сетки. Для современного глаза эти эксперименты могут показаться не такими уж шокирующими, но в свое время они оказали сильное влияние на графический дизайн. Вместе с развитием графического дизайна от ремесла наборщика в 1920-х годах в процветающей профессии в 1950-х, развивались и методы композиции. В 1928 году Чихольд выпустил «Новую типографику», строгий модернистский манифест, который утверждал использование шрифтов без засечек и равномерные, выровненные по левому краю сетки. Хотя Чихольд и не использовал слово «сетка» и не определял ее использования, многие современные техники были им продемонстрированы: разделение страницы на мелкие равномерные прямоугольники, организуют текст.

Читайте также:   10 полезных находок о том, как люди смотрят сайты — Оди

Примеры распределения страницы из «Новой типографики» Чихольда

Эти идеи быстро распространились по всей Европе, и, движимые европейской эмиграцией, вызванной Второй мировой войной, попали в США . Здесь использование модульной сетки подхватили дизайнеры «Золотого века рекламы» 1950-х и 60-х годов, такие как Пол Рэнд и Сол Басс, которые использовали выразительные формы и типографике, организованную в рамках сети. Когда мы смотрим на этот дизайн сегодня, он выделяется как пример великолепной двойственности: художественная игривость, организованная строгими геометрическими принципами.

Логотип Colorforms Пола Рэнда и постер Головокружение Сола Басса, 1959

Модернистские идеи Чихольда хорошо заметны в одной из самых известных рекламных кампаний послевоенной эпохи — Think Small (Мысли скромнее) от Volkswagen. Скромный Жук, первоначально разработанный Фердинандом Порше для немцев, выглядел комично на американском рынке, где покупатели предпочитали большие автомобили. Благодаря грамотным текстов и модернистского дизайна, рекламная кампания сделала «Жука» самым продаваемым импортным автомобилем в США.

Рекламная кампания Think Small

Новое направление в дизайне, называемое швейцарским стилем, с & # 39; появилось в 60-х годах двадцатого века, когда дизайнеры стали увлекаться еще больше систематизированным и математическим подходом. Две книги считаются основными для этого направления: «Модульные системы в графическом дизайне» Йозефа Мюллера-Брокманом и «Программы в дизайне» Карла Герстнера. Мюллер-Брокманн утверждал, что придерживается минимализма и использовал сетку для организации элементов в строгую визуальную иерархию.

Диаграмма из книги Йозефа Мюллера-Брокманом «Модульные системы в графическом дизайне», что показывает, как выравнивать текст по сетке

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

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

Постеры Йозефа Мюллера-Брокманом

Концепция модульной системы до сих пор была обусловлена ​​двумя причинами. Во-первых, это был побочный результат технических процессов при производстве дизайна. Печатный станок печатает с помощью небольших прямоугольных блоков букв на пластине, следовательно, дизайнер вынужден оперировать понятием сетки при создании дизайна. В этом случае сетка — буквальное ограничения, с которым дизайнеру приходится работать. Во-вторых, модульные сетки представляют метод, с помощью которого дизайнеры создают организованные макеты, даже в тех случаях, когда технические ограничения отсутствуют. Обе эти причины обеспечили популярность модульной сетки в веб-дизайне в середине нулевых. С одной стороны, речь html оперирует прямоугольными элементами, которые при отображении в браузере двигают следующие элементы вниз по странице. Получается, что столбец является натуральным контейнером, по которому контент может двигаться вертикально, не нарушая дизайн. С другой стороны, комп & # 39; Компьютеры не страдают такими ограничениями, как механические устройства, поэтому использование сетки сегодня это всего лишь удобный способ организации макета, не зависит от ограничений среды. Короткий взгляд на развитие одного из самых популярных сайтов в интернете, NYTimes.com в течение первого десятилетия своего существования, позволит хорошо проиллюстрировать этот момент.

Газета Нью-Йорк Таймс запустила свой новостной сайт в январе 1996 года, всего через несколько лет после того, как интернет с частной сети академических учреждений превратился в публичную коммерческую среду. Хотя многие из веб-технологий, которые мы используем сегодня, уже существовали тогда в той или иной форме, веб-дизайнеры при создании сайтов сталкивались с некоторыми ограничениями. Первая версия nytimes.com состояла из одного изображения, размерами 575 на 300 пикселей, разделенного на интерактивные области. Так как изображение тогда были единственным способом создания дизайна в браузере, эта техника, которая называется картами изображений, использовалась во времена становления интернета повсеместно. Дизайн nytimes.com был основан на печатной версии газеты, с центрированы логотипом, полосой дать со слоганом «У нас все новости, которые можно напечатать», что звучит иронично в данном случае, и трехколоночной макетом. Учитывая, что картинка создавалась вручную, а не программно, многие принципы, которые мы знаем сегодня, отсутствовали: колонки не были основаны на едином модуле, а контент НЕ прокручивался ниже области экрана. Как часто бывает, ранние веб-страницы копировали форму существующих технологий, поэтому дизайн явно напоминал газетную сетку.

Читайте также:   Лекция «Как стать сильным» — Оди

Сайт Нью-Йорк Таймс в ноябре 1996 года

В конце 1998 года NYT заменила статическое изображение отдельными элементами html, что позволяло контента обновляться индивидуально в течение дня. В этом макете представлены многие технологии, характерные для сегодняшнего интернета. Боковая панель-меню с вложенными элементами навигации, статьи, расположенные в вертикальных полосах с вертикальной прокруткой, теги для категоризации контента. Однако, эта широкая трехколоночной компоновка не соответствовала принципу равномерных размеров сетки, а методы презентации контента отличались от страницы к странице.

Сайт Нью-Йорк Таймс в феврале 1999 года

В этой версии для формирования дизайна использовались html атрибуты, а не общий CSS файл. Это означает, что каждая страница имела свой стиль, и вариации в размерах сетки могут быть объяснены тем, что дизайнеры Нью-Йорк Таймс ни были обязательства & # 39; связанные сопоставлять свои макеты. Распространение CSS в последующие годы заставило дизайнеров договориться об использовании единой модернисткой сетки.

Первый результат в Google по запросу «CSS grid system» — статья Дага Фолби под названием «Гибкие макеты с CSS-позиционированием» от 2002 года. В статье Фолби говорит об универсальной гибкой системе, способной адаптироваться к размеру браузера. В 2004 году директор по дизайну New York Times Online, Хой Винь, Опубликовал заметку в блоге с названием Grid Computing … and Design, где он высказывался за использование единых блоков в веб-дизайне:

Новый макет употребляет восемь колонок и четыре суперколонкы, структурирующие весь контент […] Каждая колонка шириной 95 пикселей отделений 10-ти пиксельными пропуском, а значит, я могу создавать любую графику из расчета шага в 95 пикселей.

Это первая онлайн-ссылка, в которой явно описывается методика для веб дизайна, повторяющая принципы из Брокманновской книги «Модульные сетки в графическом дизайне». В последствии Винь развил эти идеи в совместной с Марком Болтоном презентации «Сетки это хорошо» на конференции South by Southwest в 2008 году. Также в 2008, популярные CSS библиотеки, такие как 960 Grid System и Blueprint CSS, реализовали эту строгую систему сеток, фундаментально не поменявшуюся и сегодня.

Сайт Нью-Йорк Таймс в октябре 2006 года

В 2006 году многие эти принципы были воплощены на сайте NYT в новой 970-пиксельной сетке. Хоть и не идеально точный, дизайн в целом представляет сетку из 11-ти колонок по 82 пикселя, заметно более строгую, чем прошлая. Этот формат использовался вплоть до крупного редизайна в 2013 году.

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

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

The post Краткая история композиции appeared first on Оди.

Опубликовано topinup / Февраль 12, 2018
Рубрики: Web-дизайн
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...


Заказ сайта на WordPress

Заполните форму, и наши специалисты свяжутся с вами в ближайшее время для создания сайта на выбранной теме WordPress.

Будьте в курсе последних новостей.

Подписывайтесь на наши страницы в соцсетях и на канал в Telegram.

Заказ бесплатной консультации

Ваше имя (обязательно)

Ваш телефон (обязательно)

Ваш e-mail (обязательно)