Все о сайтостроении
  • Главная
  • →  
  • Дизайн
  • →  
  • Основы веб-дизайна
  • →  
  • Основные элементы дизайна
  • Основные элементы дизайна

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

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

    В веб-дизайне имеется восемь общепринятых элементов, а именно:

    1. Цвет;
    2. Яркость (тон);
    3. Текстура;
    4. Фигура;
    5. Форма;
    6. Пространство;
    7. Линии;
    8. Шрифт.

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

    Цвет

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

    Основной палитрой признана палитра из семи цветов (основных и вторичных) - красный, оранжевый, желтый, зеленый, голубой, синий и фиолетовый. Думаю всем известна поговорка: Каждый Охотник Желает Знать, Где Сидит Фазан Каждая. Каждое слово данной поговорки начинается с буквы цвета по порядку 7-ми цветовой палитры.

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

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

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

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

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

    • Красный - страсть;
    • Оранжевый - энергия;
    • Желтый - счастье;
    • Зеленый - гармония;
    • Синий - спокойствие;
    • Фиолетовый - роскошь;
    • Черный - власть, сила;
    • Белый - чистота;
    • Коричневый - дружелюбие.

     

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

    Яркость (тон)

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

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

    Использование градиента в дизайне - дает иллюзию глубины и объема. Так же иллюзию глубины и объема придают тени и свечение (внутреннее или внешнее).

    Текстура

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

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

    Фигура

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

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

    Форма

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

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

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

    Линии

    Линии в веб-дизайне применяются для визуального разделения объектов и акцентировании внимания на каком-то из них. Так же линии применяются для определения границ (блоков) и организации информации в целом.

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

    Шрифты

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

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

    Комментарии ()

      213