Веб-дизайн – это разработка внешнего оформления страниц сайтов и веб-приложений. Задача дизайнера в этом случае – грамотно оформить страницу с точки зрения художественной привлекательности, вместе с тем соблюдая логическую структуру подачи материала. Соответственно, профессия веб-дизайнера предполагает как знаний в области информационных технологий, так и художественных способностей, так как включает в себя не только визуальное оформление сайтов, но и их техническую разработку. Поэтому веб-дизайнер, как правило, это специалист широкого профиля, который способен самостоятельно создать и запустить сайт.
Создание ресурса начинается с проектирования. При этом внешнее оформление преследует не только эстетические цели. Профессиональный веб-дизайнер учитывает принципы юзабилити – удобства для пользователя. Стиль и композиция площадки при этом направлены на то, чтобы облегчить восприятие страницы и повысить узнаваемость. Задача дизайнера – сделать сайт не просто красивым, но в первую очередь удобным для пользователя.
Какие знания нужны для веб-дизайна сайта?
Веб-дизайнер – это немного программист и немного художник – специалист, решающий несколько задач одновременно. Для этого потребуются определенные знания:
- умение создавать прототипы страниц;
- знание графических редакторов — Adobe Illustrator, Adobe Photoshop, CorelDraw и др.;
- знание языков HTML и CSS;
- понимание принципов юзабилити;
- понимание принципов пользовательского взаимодействия с сайтом;
- художественно-эстетические навыки – сочетание шрифтов, теория цвета, основы композиции.
Современные системы управления контентом позволяют проектировать структуру сайта и его графическое оформление независимо друг от друга. Благодаря этому можно вносить изменения в содержание сайта, не меняя при этом дизайна, и наоборот.
Непосредственный дизайн площадки начинается после утверждения технического задания. Вначале создается модульная сетка, которая описывает расположение элементов на странице ресурса. Таким образом создается прототип будущей площадки. Как правило, модульная сетка состоит из основного блока и блока меню. При необходимости сетка разбивается на дополнительные блоки, например, «подвал» («footer») и «хедер» («header», вверху страницы).
После разработки модульной сетки осуществляется непосредственный художественно-графический дизайн сайта. Чтобы разграничить визуальное оформление и содержание сайта, используются шаблоны – готовые наборы связанных между собой элементов. Шаблоны создаются в графических редакторах, после чего переводятся в html-файл.
Элементы веб-дизайна
Веб-дизайн предполагает гармоничное сочетание всех элементов оформления сайта, основными из которых являются цвет, шрифт, форма, линия, размер и т.д. Правильное сочетание этих составляющих и определяет стиль ресурса.
Рассмотрим основные элементы веб-дизайна:
- Типографика.
Наполнение сайта – это в первую очередь текст, оформляемый с помощью слов. Для того, чтобы облечь слова в привлекательную форму, важно правильно подобрать шрифт. Определяющее значение здесь имеет не столько внешняя привлекательность, сколько удобство в использовании, читаемость, умение правильно комбинировать типы, стили и размеры шрифтов. Есть много бесплатных шрифтов, веб-дизайнеры берут их из Google Web Fonts, WebDesignerDepot, Fonts-online и других сайтов. Там же есть и готовые комбинации шрифтов. Для создания собственных комбинаций можно воспользоваться специальным инструментом – комбинатором веб-шрифтов.
Случается, что разные браузеры отображают одни и те же шрифты по-разному, поэтому рекомендуется использовать безопасные шрифты, которые все браузеры показывают корректно.
При дизайне сайта рекомендуется применять одновременно минимальное количество шрифтов, обычно достаточно двух-трех типов для одного проекта. С помощью комбинирования их характеристик – гарнитура (написание), кегль (размер букв), цвет и др. – можно добиться хорошего эффекта. Базовый шрифт используется для основных материалов сайта. Он должен быть простым, легко читаемым, с межстрочным интервалом примерно в полтора раза выше символов. Акцидентный – шрифт для заголовков, его можно выделить размером и цветом. Дополнительным шрифтом обычно прописывают важную информацию, цитаты, логотип меню.
- Пространство.
Это основа всего композиционного построения ресурса. Вся структура элементов веб-дизайна сайта выстраивается в определенном пространстве, которое может иметь разный формат: двухмерный или трехмерный, плоская картинка или объемное изображение.
Нельзя однозначно утверждать, какой формат пространства лучше использовать. Все зависит от вкуса веб-дизайнера, предпочтений целевой аудитории и пожеланий заказчика.
- Линии.
Они являются основным элементом любого сайта. Строятся линии про помощи соединенных между собой точек. Благодаря линиям элементы сайта обретают контуры, структурируются, их становится легче воспринимать визуально.
- Фигуры.
Они образуются при пересечении линий и бывают геометрическими (квадрат, круг и др.) и органическими (очертания реальных предметов).
- Цвет.
Цветовое решение влияет на восприятие сайта в целом. При подборе цветов ориентируйтесь на тематику сайта: стилистика делового ресурса будет отличаться от цветового оформления развлекательной площадки. Цвет позволяет выделить отдельные элементы сайта относительно фона.
При выборе цвета веб-дизайнеры часто используют цветовой круг, а также таблицу безопасных цветов, которые не искажаются, отображаясь в любом браузере.
- Форма.
Она образуется путем соединения нескольких фигур — это трехмерный объект с определенной шириной, глубиной и высотой.
- Текстура.
Поверхность объекта оформляется с помощью текстуры. Она бывает шероховатой, гладкой, жесткой или мягкой. Выделяют также реалистичную текстуру, напоминающую дерево, металл, бумагу, ткань, кожу и др. При использовании этого элемента важно не переборщить – текстура не должна мешать восприятию сайта.
- Размер.
Этот элемент относится ко всем составляющим веб-дизайна. При помощи размера можно выделить нужную информацию, привлечь внимание или создать контраст.
Основы композиции сайта
Веб-дизайн ресурса не возможен без знаний основ композиции. Навыки в этой сфере позволяют грамотно расположить структурные элементы и блоки портала. Основные принципы композиции следующие:
- Правило третей.
Это упрощенный вариант принципа «золотого сечения» — пропорции, которая присутствует во многих элементах жизни (завитки раковины, строение костей человека и т.д.). Правило третей заключается в том, что определенная область делится на девять равных частей с помощью двух горизонтальных и двух вертикальных линий. Считается, что в точках пересечения этих линий в первую очередь фокусируется взгляд человека. Именно в этих местах стоит располагать значимые объекты.
- Фокальная точка.
Она привлекает внимание к наиболее важному элементу сайта, хотя сама занимает небольшое место. Выделить фокальную точку можно с помощью цвета или размера шрифта. Выбирая место для размещения этого элемента, не забывайте о правиле третей.
- Пустое пространство.
Оставляя пустое пространство между элементами сайта, вы избавляете ресурс от перегруженности и позволяете посетителям увидеть все его детали.
Теория цвета в веб-дизайне
Цвет – это первое, на что обращают внимание посетители сайта. В дизайне веб-ресурсов выбор цветового решения играет основополагающую роль, так как от этого зависит эффективность площадки. Грамотно комбинируя цвета в зависимости от задач сайта, можно увеличить посещаемость и конверсию площадки.
Наука, изучающая влияние цвета на эмоциональное состояние человека, называется теорией цвета. На цветовосприятие каждого конкретного человека влияют разные факторы – индивидуальные особенности, принадлежность к определенной культуре и др. Не стоит забывать и о дальтониках – людях, не различающих какие-либо цвета. Эти аспекты нужно учитывать, если вы хотите сделать сайт доступным для всех пользователей.
Существуют общие принципы теории цвета. Их следует знать, чтобы создать красивые и эффективные цветовые комбинации при дизайне веб-ресурса.
В основе теории лежит цветовой круг. С его помощью можно выбрать цвета, которые гармонично смотрятся вместе.
В зависимости от количества цветов и оттенков в цветовой круг могут входить от шести до двадцати четырех секторов.
Цвета можно поделить на теплые (красный, желтый и оранжевый) и холодные (синий, зеленый, фиолетовый). Выбор теплой или холодной цветовой гаммы зависит от того, какого эффекта вы хотите достичь. Теплые цвета считаются более жизнерадостными и веселыми, холодные – спокойными и строгими.
Основные цветовые схемы
- Аналоговая.
При этой схеме берутся три расположенных рядом цвета. Они будут хорошо сочетаться между собой вследствие последовательного расположения на цветовом круге. Эта схема позволяет выделить определенное качество и усилить его эмоциональное воздействие.
- Комплементарная.
При ней сочетаются расположенные напротив друг друга цвета. К ним могут добавляться нейтральные цвета – черный, белый, серый, бежевый. Использование противоположных цветов обеспечивает контраст и увеличивает доступность дизайна.
- Триада.
Три равноудаленных друг от друга цвета соединяются в треугольник. При этом получается контрастное и вместе с тем гармонирующее между собой сочетание. Обычно при использовании подобной схемы один цвет делается основным, а два других – дополнительными. Основной цвет используется для фона, дополнительные – для контента и панели навигации. Это позволяет достигнуть цветового баланса и избежать сложных контрастов.
- Раздельная комплементарная схема.
Выбираются два противоположных на круге цвета, при этом одни из них дополняется двумя другими находящимися рядом цветами. При соединении этих цветов получается равнобедренный треугольник.
- Четвертичная (двойная) комплементарная схема.
Соединяются пары комплементарных цветов (два основных и два дополнительных), на круге при этом получается прямоугольник.
- Монохромная схема.
Соединяются оттенки одного цвета.
Правильный выбор цветовой схемы позволяет не только воздействовать на эмоции человека, но и сделает сайт легким для восприятия. Используйте контрастные цвета – это облегчит читаемость текста. Соблюдайте баланс: выбирайте необходимое количество цветов, чтобы ресурс был не слишком пестрым, но и не бесцветно-серым. Ориентируйтесь на задачи сайта: интенсивные теплые цвета активизируют, холодные оттенки успокаивают.
Воздействие цвета на пользователя часто происходит подсознательно. У посетителя возникают эмоции, заставляющие совершать (или не совершать) те ли иные действия – оставаться на сайте, просматривать страницы, нажимать на кнопки заказа и др. Так при помощи цвета можно не только сформировать положительный образ ресурса, но и увеличить конверсию.