Ключевые принципы дизайна

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

Повторение

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

1. Фотография, изображенная на странице, использует цвета (бурый, жёлто-коричневый, темно-зеленый, беловатый), которые повторяются на других частях страницы. Бурый цвет используется как фоновый цвет для области навигации, кнопок “Поиск (Search)” и “Подписаться (Subscribe)”, а также как цвет шрифта в центральной и правой колонках. Беловатый цвет – используется для текста логотипа, текста навигации, и как фоновый цвет центральной колонки. Темно-зеленый – фоновый цвет навигационной области, а также цвет заголовков раздела на центральной колонке.

2. Области “Бронировать (Reservations)” и “Новостная рассылка (Newsletter)” имеют одинаковую форму и формат, состоящий из заголовка, содержания и кнопки.

3. Использование только двух типов гарнитуры шрифта также является примером применения принципа повторения в дизайне и помогает создать целостный образ. Название сайта и заголовки разделов страницы используют шрифт Trebuchet. Остальной контент страницы использует шрифт Arial.

Рисунок 1

Контраст

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

Близость

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

Выравнивание

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

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

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