Ключевые принципы дизайна
Существуют четыре основных принципа визуального дизайна, которые могут применяться для разработки дизайна всего что угодно. Это повторение, контрастность, близость и выравнивание. Разрабатываете ли Вы дизайн web-страницы, кнопки, логотипа, DVD-обложки или интерфейса программы, следование данным принципам дизайна поможет Вам создать привлекательный образ продукта и наладить коммуникацию с потребителями.
Повторение
При применении этого принципа, web-дизайнер повторяет один или более компонентов несколько раз на странице. И этот аспект делает дизайн единым и связанным. На рисунке 1 изображена домашняя страница хостела. Дизайн данной страницы показывает использование принципа повторения в различных компонентах страницы, включая цвет, шрифт, формы элементов и картинки.
-
Фотография, изображенная на странице, использует цвета (бурый, жёлто-коричневый, темно-зеленый, беловатый), которые повторяются на других частях страницы. Бурый цвет используется как фоновый цвет для области навигации, кнопок “Поиск (Search)” и “Подписаться (Subscribe)”, а также как цвет шрифта в центральной и правой колонках. Беловатый цвет – используется для текста логотипа, текста навигации, и как фоновый цвет центральной колонки. Темно-зеленый – фоновый цвет навигационной области, а также цвет заголовков раздела на центральной колонке.
-
Области “Бронировать (Reservations)” и “Новостная рассылка (Newsletter)” имеют одинаковую форму и формат, состоящий из заголовка, содержания и кнопки.
-
Использование только двух типов гарнитуры шрифта также является примером применения принципа повторения в дизайне и помогает создать целостный образ. Название сайта и заголовки разделов страницы используют шрифт Trebuchet. Остальной контент страницы использует шрифт Arial.
Рисунок 1
Контраст
При применении этого принципа, необходимо уделить особое внимание разнице между элементами страницы, для того, чтобы сделать дизайн интересным и привлекательным. Поэтому между фоновым цветом страницы и цветом шрифта должен существовать хороший контраст, иначе, будет трудно прочесть текст. Обратите внимание, как навигационная область в верхнем правом углу на рисунке 1, использует текст, цвет которого хорошо контрастирует с темным фоном. В левой колонке содержится затемненный фон, прекрасно контрастирующий со светлым беловатым текстом. В центральной колонке содержится темный текст на светловатом фоне для того, чтобы обеспечить хороший визуальный контраст и легкое чтение. В подвале страницы, темный текст контрастирует со светловатым фоном.
Близость
Когда дизайнеры применяют принцип близости, взаимосвязанные элементы располагаются физически близко друг к другу. Несвязанные элементы, наоборот, должны иметь разделяющее их пространство. Например, на рисунке 1, расположение элементов формы бронирования (“Reservations”) рядом друг с другом, дает визуальную подсказку о логической взаимосвязанности данных элементов. Ссылки в горизонтальной навигации в верхнем правом углу, также расположены в непосредственной близости друг от друга, что создает визуальную группу на странице и делает навигацию по сайту проще.
Выравнивание
Это последний рассматриваемый в данной статье принцип, помогающий сделать дизайн сайта однородным и связанным. При его применении, страница организуется таким образом, что каждый элемент располагается в некотором положении (вертикальном или горизонтальном) по отношению к другому элементу. Страница из рисунка 1 явно следует этому принципу. Обратите внимание как выравнены и расположены компоненты в колонках одинаковой высоты.
Таким образом, повторение, контрастность, близость, и выравнивание – четыре базовых принципа дизайна, которые могут сильно улучшить дизайн страниц. Поэтому, если Вы будете применять эти принципы эффективно, страницы, сверстанные Вами, будут выглядеть более профессионально, и будут выражать идеи сайтов, созданных Вами более ясно.
Кстати, в дополнении к данной статье я хотел бы порекомендовать вам мой видеокурс "Вёрстка сайта с нуля", с помощью которого можно на практике закрепить знания, полученные, в частности, из данной статьи. В этом курсе уже есть все необходимое, чтобы начать верстать сайты, включая и весь необходимый комплект программного обеспечения.
-
- Михаил Русаков
Комментарии (1):
Михаил,ваши партнерки кругом,и желающий заработать впадает в низшую касту размещая их у cебя.Есть также при условии зарегестрироватся , получить курс.Имея рынок сбыта,магазин "купят"
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.