Основные графические элементы в дизайне сайта

Опубликовано

Обновлено

В этой статье мы с вами разберем основные элементы дизайна сайта.

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

Каждые отдельные элементы — это один небольшой кирпичик в этом доме.

Вот именно сейчас я предлагаю вам разобрать этот дом по кирпичикам.

Пространство

Итак, первый кирпичик — это пространство. Здесь понимается место, где происходят все действия. Это место, где находится вся композиция веб-дизайна.

Если сравнивать с домом, то пространство в таком случае — это участок, на котором находится дом.

Белый кирпичный дом с красной металлочерепицей

Пространство может быть двухмерное (плоская картинка) и трехмерное (объемное изображение).

Их проще всего представить на примере кинотеатра. Раньше показывали фильмы в 3D — это и есть трехмерное пространство.

А обычные кинотеатры — это пример двухмерности. Объекты в трехмерном пространстве в отличие от двухмерного имеют глубину и объем.

Это, пожалуй, основное их отличие.

Графические линии

Линия — это самый базовый элемент дизайна. Она получается из последовательно соединенных точек на поверхности.

Тут неважно чем: карандашом, кисточкой, фломастером или еще чем-то подобным.

С помощью линий мы всегда задаем очертания и контуры веб-дизайна еще на бумаге.

Разные виды черных линий на белом фоне

Виды линий:

  • прямые;
  • кривые;
  • волнистые;
  • горизонтальные;
  • вертикальные;
  • параллельные;
  • пунктирные.

Фигуры

Она образуется, когда две линии пересекаются между собой.

Фигуры существуют разные и в основном принято их делить на два вида:

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

Цвет

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

Представьте сейчас на мгновение, что если бы сейчас все сайты были черно-белыми. Думаю, вам бы это не понравилось.

Цвет очень хорошо передает эмоции.

С его помощью вы можете изначально задавать настроение посетителю. От того, какие цвета используете, будет зависеть, станет ли человеку весело или грустно.

Вы легко можете привлечь внимание с помощью цвета к какому-то определенному объекту на сайте.

Цветовой круг Иттена
Цветовой круг Иттена

Существует 3 основных цвета: 

  1. желтый; 
  2. красный; 
  3. синий. 

При смешивании этих основных цветов, получаются три вторичных: 

  1. оранжевый; 
  2. зеленый; 
  3. фиолетовый.

Также существуют и промежуточные цвета.

Они получаются путем смешивания основных и вторичных цветов. На цветовом круге мы их как раз и видим (рисунок выше).

Еще есть дополнительные цвета — это противоположные на цветовом круге, то есть зеленый и напротив его оранжевый цвет, фиолетовый и напротив его темно-желтый цвет.

Графические текстуры

Текстура передает вид, поверхность объекта в оформлении сайта. Она может быть гладкой, шероховатой, мягкой или жесткой.

На сайтах часто можно встретить текстуры бумаги, дерева, кожи или железа.

Текстура деревянной доски в качестве фона на сайте

В общем, получается, что текстура — это как бы кожа любого объекта или предмета.

На сайтах текстуры пока используют довольно редко. Но смотрится это очень красиво (если конечно правильно использовать).

Света-тень

Она создается с помощью искусственных источников освещения. Когда на объект падает свет, то образуются какие-то блики, тени или отражения.

Света-тень способна придать практически любому объекту глубину и объем. Она придает картинке наибольшую реалистичность.

Использование света-тени в веб-дизайне сайта

Сейчас многие ее используют. Так смотрится очень зрелищно и красиво.

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

Книга Секреты эффективной рекламы от Alzari

Секреты эффективной рекламы

Успей скачать, пока бесплатно! До конца моего предложения осталось:

2 ответа

  1. Аватар пользователя Маргарита
    Маргарита

    Мне так нравиться 3D рисунки и фильмы, обязательно хочу научиться рисовать такие! Так интересно, смотришь на картинку, а она такая реальная!

  2. Аватар пользователя Fyrrion
    Fyrrion

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

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

Добавить комментарий