Правильное расположение композиции в веб комиксе. Композиция в веб-дизайне: на что обратить внимание. Выбираем правильные цвета

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

Bulk Resize Photos

Этот сайт позволяет загрузить сразу много изображений и в один клик изменить их размеры. Для удобства пользователей имеется несколько шаблонов, позволяющих сделать картинки одинаковой ширины или длины. Существует также возможность изменения формата файла (JPG, PNG) и уровня компрессии.

BIRME

Аббревиатура BIRME расшифровывается как Batch Image Resizing Made Easy. Это действительно очень простой и чрезвычайно быстрый онлайновый ресайзер картинок. Он позволяет изменять размеры изображений с сохранением пропорций и без, сжимать файлы с заданным уровнем компрессии и добавлять к картинкам простую рамку.

Resize Pic Online

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

PicGhost

С помощью этого сервиса вы сможете не только изменить размер изображений, но и нанести на них свой водяной знак. Может пригодиться, если вы опасаетесь несанкционированного использования выложенных вами в Cеть фотографий. Кроме загрузки файлов с жёсткого диска (до 40 штук одновременно), PicGhost может обработать фотографии, хранящиеся в Facebook или Flickr.

TinyPNG

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

Optimizilla

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

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

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

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

Итак, в сравнении участвуют три сервиса:

По каким критериям будем сравнивать:

Удобство пользования:
- Наличие Drag-and-Drop.
- Возможность массового добавления и сохранения изображений.
- Поддержка изображений с названиями на русском языке.
- Название изображения при сохранении.
Поддерживаемые форматы.
Максимальный размер изображений.
Дополнительные функции или недостатки.
Оффлайн клиенты, плагины и расширения.
Собственно, самое главное: на сколько удалось уменьшить вес изображения.

На чем будем тестировать:

Четыре JPG картинки весом в 9.43Мб, 3.93Мб, 54.3Кб и 24.9Кб.
Три PNG картинки весом в 8.18Мб, 4.6Мб и 592Кб.
Четыре PNG картинки с прозрачностью или с полупрозрачными областями весом в 1.08Мб, 0.98Мб, 311Кб и 21.4Кб.
Три PNG картинки с текстом весом в 728Кб, 82.8Кб и 21.3Кб.

Приступим!

1. Удобство использования.

Все три сервиса поддерживают Drag-and-Drop (то есть можно просто перетащить изображение в браузер), но JPEGMini (без регистрации) и Compressor не поддерживают массовой загрузки изображений. К тому же, сначала на этих сайтах, в отличии от TinyPNG, нужно нажать на ссылочку «Try it» и только затем заливать изображения. И перед каждым новым изображением старое нужно сохранить. TinyPNG же даёт возможность загрузить одновременно до 20 изображений, чтобы сохранить их придётся покликать по ссылкам «Download», но проблемы это не представляет, потому что ссылки находятся аккурат друг под другом.
Если же зарегистрироваться, то возможность массовой загрузки и сохранения появится и в JPEGMini.
После оптимизации изображений с названием на русском языке JPEGMini выдает на сохранение файл с кракозябрами и без расширения. То есть вам нужно написать нормальное название и добавить самому расширение.jpg или.png. Compressor же и вовсе после оптимизации не даёт сохранить картинку. С TinyPNG всё работает как надо.
После обработки TinyPNG выдаёт файл с оригинальным названием, JPEGMini добавляет в конце _mini, а Compressor — -compressor.

Иногда, почему-то, сравнение фотографий не отображается

Панда довольна!

2. Поддерживаемые форматы.

JPEGMini обрабатывает только jpg, TinyPNG работает как с jpg, так и с png, а Compressor умеет сжимать jpg, png, gif и svg.

3. Максимальный размер изображений.

Хоть на JPEGMini и не удалось найти упоминания максимального размера загружаемого файла, но методом тыка получилось выяснить, что он, как и у Compressor, составляет 10 мегабайт. У TinyPNG возможности чуть скромнее — 5 мегабайт.

4. Дополнительные функции или недостатки.

JPEGMini и Compressor после обработки изображения показывает сравнение изображений, на котором можно убедиться, что никаких видимых изменений в картинках не произошло.
После обработки Compressor даёт возможность сохранить файл в Dropbox или Google Drive, TinyPNG — только в Dropbox, у JPEGMini такой возможности нет.
После пары обработанных фото JPEGMini требует ввода капчи.
После завершения сжатия изображений на странице TinyPNG можно узнать общий объём сэкономленного места.
После регистрации на JPEGMini появляется возможность массово загрузить изображения в свой альбом и, через некоторое время (необязательно держать вкладку браузера открытой), получить их обратно в виде архива.

5. Оффлайн клиенты, плагины и расширения.

Разработчики JPEGMini предлагают к сайту ещё и оффлайн версию для WIndows и MAC (если купить PRO-версию, то можно получить ещё и расширение для Adobe Lightroom), а также серверное решение для сайта.
Команда TinyPNG предлагает плагины на WordPress, Magento, Adobe Photoshop, а также доступ к API.

6. Ну и в конце давайте сравним всё это в таблице, а также посмотрим кто и сколько места смог сэкономить.

Сравнение результатов сжатия изображений

	JPEGMini		Compressor
JPG, 9.43Мб	5.11Мб	—	4.9Мб
JPG, 3.93Мб	3.69Мб	2.76Мб	3.09Мб
JPG, 54.3Кб	42.7Кб	51.2Кб	35.6Кб
JPG, 24.9Кб	16.8Кб	24.9Кб	12.8Кб
PNG, 8.18Мб	—	—	2.6Мб
PNG, 4.6Мб	—	1.32Мб	1.4Мб
PNG, 592Кб	—	160Кб	165Кб
PNG с прозрачностью, 1.08Мб	—	411Кб	203Кб
PNG с прозрачностью, 980Кб	—	239Кб	262Кб
PNG с прозрачностью, 311Кб	—	103Кб	42.2Кб
PNG с прозрачностью, 21.4Кб	—	21.4Кб	362Кб
PNG с текстом, 728Кб	—	319Кб	268Кб
PNG с текстом, 82.8Кб	—	30Кб	19.4Кб
PNG с текстом, 21.3Кб	—	18.3Кб	29.1Кб

Итак, что в итоге?

В плане удобства TinyPNG бесспорный лидер. Можно за раз сжимать до 20 фотографий и быстренько их сохранять. При этом данный сервис поддерживает кириллицу в имени и сохраняет файлы с таким же именем.

Но, к сожалению, максимальный размер файла ограничен пятью мегабайтами. Если вам нужно сжать файлы, которые весят больше — стоит воспользоваться Compressor. Его эффективность выше, чем у JPEGMini, хоть и в двух случаях произошло что-то странное и сервис не сжал изображение, а, наоборот, увеличил его размер. К сожалению, сервис не поддерживает мультизагрузку и его использование в случае, если вам нужно сжать большое количество фотографий, затруднительно. Для такого случая же придется зарегистрироваться на JPEGMini и загрузить файлы в свой альбом. Если же фотографий ну ооочень много — стоит скачать оффлайн версию JPEGMini, благо, она имеет пробную версию.

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

В период развития Веб-дизайна проектированием Веб-сайтов занимались люди в основном технических специальностей. Они создавали Веб-страницы, не задумываясь над ее эстетическим и художественным содержанием, делая упор на информацию в том виде, какая она есть. Как правило, это был только текст. Чуть позже, с ростом и популяризации сети Интернет появились первые попытки оформить Веб-страницы не только в вербальных знаках (синтактике) – тексте, но и в изобразительных знаках (семантике) – картинках. Отсутствие у разработчиков Веб-страниц знаний по композиции приводит к повсеместной дилетантской подаче визуальной информации, воспринять которую бывает крайне затруднительно.

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

Такое положение композиции требует более подробного рассмотрения. В современном справочнике мы можем встретить следующее определение композиции:
«Композиция (от лат. compositio – сочинение, составление, соединение) в дизайне – построение (структура) произведения дизайнерского искусства, расположение и связь его частей, обусловленные их компоновкой, отвечающие назначению и технической идее этого произведения и его художественному (образному) замыслу, отражающему эмоционально-чувственные ожидания потребителя дизайнерского продукта.

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

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

Характер композиции в дизайне во многом зависит от вида дизайна, диктующего выбор способа реализации замысла автора. В графическом дизайне композиция в дизайне ограничена сопоставлением различного рода изображений, шрифтов, цветовых пятен на плоскости, в промышленном – линии, тон и цвет дополняют пластику объемной формы и фактуру ее элементов, в средовых решениях произведения промышленного и графического дизайна образуют пространственные комбинации, взаимодействующие с характеристиками (размер, конфигурация и пр.) архитектурной основы проекта.»

Композицию условно в искусстве принято делить на следующие виды:

фронтальная;
объемная;
глубинно-пространственная.

В Веб-дизайне используются все три вида, но присуща ему фронтальная композиция.

Фронтальная композиция в свою очередь, как и объемная и глубинно-пространственная, может классифицироваться как:

сюжетная;
формальная.

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

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

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

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

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

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

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

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

При организации композиционного центра следует учитывать закономерности визуального восприятия плоскости. Как правило, он располагается в активной, центральной ее части. Смещение относительно геометрического центра придает порой произведению большую внутреннюю напряженность и пластическую выразительность в раскрытии художественного образа и темы. Выявив основные свойства формы и закономерности ее гармонизации, нам необходимо выяснить, что еще как принцип применяется при создании композиции в Веб-проектировании. Большинство учебных пособий, описывающих процесс разработки Веб-сайтов, делают упор на изучение технической стороны вопроса (в частности на технологию верстки при помощи HTML или изучении интерфейса WYSIWYG-редакторов), совершенно не касаясь вопросов композиции, либо упоминая их вскользь.

Вот как Якоб Нильсен рассматривает процесс создания дизайна Веб-сайта:

«Юзабилити в некотором роде это тоже проверка на соответствие реалиям. И делается это двумя способами:

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

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

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

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

Так же Чернышев О.В. указывает:
«Учитывая сложность психологии художественного творчества в целом и психологии художественно проектного творчества дизайнера в особенности, педагог должен последовательно, от задания к заданию внедрять в сознание и учебно-практическую деятельность студентов ее основные принципы и, таким образом, развивать потенциал их творческого мышления и художественно композиционного мастерства.

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

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

Этого, в свою очередь, придерживается Файола Э. Так же Файола Э. указывает, что: «Правильно подобранная сетка дает возможность сохранять преемственность с предыдущими просмотрами, так что пользователи будут легко ориентироваться на Web-сайте и смогут быстро находить то, что их интересует.» В данном случае речь идет о поддержке сквозного дизайна страниц.

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

Более детально к вопросу композиции в Веб-дизайне подходит Кирсанов Д. В вопросе о связях в двумерных композициях с текстом и изображениями, он указывает, что часть информации между элементами может передаваться не последовательностью их расположения или какими-нибудь видимыми стрелками или рамками, а менее очевидными визуальными средствами – выравниванием, цветовыми перекличками, контрастом. Так же он указывает, что если композиция создавалась изначально в графической среде, автор, возможно, просто не осознает некоторые из этих связей и, соответственно, не сможет «вербализовать» их при выделении структурной основы композиции. С другой стороны, некоторые фрагменты текста относятся не к содержательной основе, а к оформительской надстройке документа: например, номер главы и само слово «Глава» в заголовке, постоянная часть перекрестных ссылок (т.е. сокращения типа «стр.» или «гл.»), любые повторяющиеся элементы, такие как колонтитулы на странице книги или панель навигации на Веб-странице. Вынеся все это из текстовой основы документа в стилевые спецификации, можно не только упростить процедуру глобального изменения этих элементов во всем документе, но и приблизить к искомому идеалу ортогональности: ведь все, что при внимательном рассмотрении не принадлежит к уникальной информации документа, а лишь помогает воспринимать ее, правильнее отнести к аспекту представления, а не содержания.

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

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

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

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

Хотя в некоторых случаях допустимы и другие приемы: например принцип игры – хаотическое расположение форм на определенном участке визуального материала.Кирсанов Д. так же указывает на необходимость чувства меры:

«Самый важный, на мой взгляд, принцип, с которого я хотел бы начать, – это принцип единства, целостности и экономии средств. Формулировки этого принципа многочисленны и разнообразны: тут и «талант – это прежде всего чувство меры», и «не вводи лишних сущностей», и даже «висящее на стене ружье должно выстрелить». Все это – об одном и том же: всегда старайтесь пользоваться только тем, что уже введено в вашу композицию, экономьте, одергивайте себя и никогда не старайтесь добавить украшений по принципу «чтобы повеселее смотрелось». Коротко говоря, "если можешь не писать – не пиши».

Объясняется это следующим: «Введение в композицию нового элемента в подавляющем большинстве случаев требует не «украшения», т. е. усложнения его, а, наоборот, упрощения, «обтесывания», отбрасывания лишнего, приведения к общему знаменателю.» Т.е. соподчинение всех элементов единому стилю, единому образу.

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

Бандуристый Ф.Ф. Семиотические системы как средство образовательного и воспитательного процесса в изобразительном искусстве и дизайне / Ф.Ф. Бандуристый // Современное искусство: проблемы, тенденции, перспективы, (в рамках второго Международного фестиваля современного искусства "Увидеть невидимое"): сб. статей / под ред. Л. В. Блинова. - Хабаровск: Издательство ДВГГУ, 2011. С. 23-33.
Блуднов Г.П. Веб-дизайн как средство специальной подготовки студентов художественно-графических факультетов: диссертация … канд. пед. наук / Г. П. Блуднов. – М., 2004. – 186 с.
Бородаев Д.В. Веб-сайт как объект графического дизайна. Монография. – Х.: «Септима ЛТД», 2006. – 288 с.
Голубева О.Л. Основы композиции: Учеб. пособие. – 2-е изд. – М.: Изд. дом «Искусство», 2004. – 120 с.
Дизайн. Иллюстрированный словарь-справочник / Г.Б. Минервин, В.Т. Шимко, А.В. Ефимов и др.: Под общей редакцией Г.Б. Минервина и В.Т. Шимко. – М.: «Архитектура-С», 2004. – 288 с.
Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова. – СПб.: Символ-Плюс, 2004. – 376 с.
Кринский В.Ф. Элементы архитектурно-пространственной композиции / В.Ф. Кринский, И.В. Ламцов, М.А. Туркус. – М.: Издательство литературы по строительству, 1968. – 168 с.
Нильсен Я. Юзабилити: наука или идеология? URL: http://www.webmascon.com (Usability: Empiricism or Ideology? (June 27, 2005), перевод: Александр Качанов, 20.12.2005 г.). Дата обращения: 19.10.2010 г.
Файола Э. Шрифты для печати и Web-дизайна. – СПб.: БХВ-Петербург, 2003. – 288 с.
Чернышев О. В. Формальная композиция. Творческий практикум. Мн.: Харвест, 1999. – 312 с.
Краткий словарь по эстетике / под ред. М. Фовеянникова. – М.: Изд-во Просвещение, 1983. – с. 152-153.

Филенко Р. Е. Композиция в Web / Р. Е. Филенко // Современное искусство: проблемы, тенденции, перспективы, (в рамках второго Международного фестиваля современного искусства "Увидеть невидимое"): сб. статей / под ред. Л. В. Блинова. - Хабаровск: Издательство ДВГГУ, 2011. - С. 258-266.