Первый в мире сайт, опубликованный в 1991 году, представлял собой несколько абзацев текста на однородном фоне с командной строкой вместо ссылок.

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

Что такое веб дизайн?

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

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

• Чтобы сделать сайт функциональным, веб-дизайнеры тщательно продумывают структуру страниц, разрабатывают навигацию, наполняют разделы информативным и актуальным контентом и добавляют дополнительные элементы: например, опросы, форму подписки, виджеты с социальными сетями, интерактивные карты и многое другое.

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

Конкретный набор инструментов, используемый при создании той или иной страницы напрямую зависит от конечной цели сайта. Например:

• 

  Сайт портфолио
  демонстрирует работы и привлекает клиентов или работодателей.

• Магазин онлайн игр, одежды или электроники продает товары.

• Бизнес сайт формирует лояльную клиентскую базу вокруг бренда.

• Блог делится информацией и повышает ваш авторитет в индустрии.

• Сайт ресторана принимает заказы

• Сайт услуг бронированиями и оплатой.

В руководстве мы затронем самую важную информацию о веб-дизайне. А именно:

1. Чем отличается веб дизайн от веб разработки

2. Принципы веб дизайна

3. Компоновка страниц

4. Функциональные компоненты веб дизайна

5. Визуальные элементы веб дизайна

6. Обслуживание сайта

7. Источники вдохновения для начинающих веб дизайнеров

1. Чем отличается веб дизайн от веб разработки

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

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

Веб-разработчики часто используют следующие инструменты:

HTML (HyperText Markup Language — «язык гипертекстовой разметки») это язык программирования, который используют для создания разметки сайтов. Именно HTML позволяет просматривать сайты в браузерах вроде Google Chrome и Safari.

CSS (Cascading Style Sheets — «каскадные таблицы стилей») — вспомогательный язык программирования, который используется для определения внешнего вида страницы. В отличие от HTML, который отвечает в основном за структуру страницы, CSS позволяет поменять цвет текста, увеличить отступы и добавить анимацию — в общем, делает сайт более эстетичным и приятным для читателя. .

CMS (Content management system) — это система управления контентом сайта. То есть платформа, на которой можно создать сайт даже без знания программирования. Wix — одна из таких систем: с помощью нашей платформы уже более 200 миллионов человек создали свой сайт.

2. Принципы веб дизайна

Чем же отличается хороший дизайн от плохого? Хороший дизайн соответствует базовым принципам, которые сформировались за 30 лет создания сайтов. Конечно, опытный дизайнер может создать хороший продукт и без этих правил — однако если вы только учитесь веб-дизайну, следование базовым принципам веб дизайна поможет избежать распространенных ошибок. Базовые принципы веб дизайна:

1. Баланс

2. Контраст

3. Акцент

4. Движение

5. Ритм

6. Иерархия

7. «Воздух»

8. Последовательность

Баланс

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

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

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

На картинке ниже — пример симметричного баланса (слева) и ассиметричного баланса (справа).

Контраст

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

Акцент

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

На картинке ниже — пример структуры с акцентом (слева) и структуры без акцента (справа).

Движение

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

Ритм

Элементы на странице должны «рифмоваться» друг с другом — то есть, обладать схожими характеристиками вроде брендовых цветов и фирменного шрифта. Это поможет укрепить идентичность бренда и повысить онлайн присутствие. На картинке ниже — пример хорошего ритма (слева) и плохого ритма (справа). На примере справа собраны элементы с разными характеристиками, которые не сочетаются между собой и разрушают цельность структуры.

Иерархия

Одна из самых грубых ошибок в веб-дизайне — расположение важной информации в нижней части страницы. Таким образом ее заметят только те пользователи, которые не покинули сайт в первую минуту и решили прокрутить вниз — и таких людей будет немного. Поэтому запомните простое правило: чем важнее информация, тем выше на сайте нужно ее расположить. На картинке ниже — пример хорошей иерархии (слева) и плохой иерархии (справа). На примере слева элементы расположены в порядке убывания важности, что помогает читателю быстро расставить приоритеты.

«Воздух»

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

На картинке ниже — пример правильного использования «воздуха» (слева) и неправильного использования «воздуха» (справа). На примере справа элементы располагаются слишком близко друг к другу, что создает визуальный шум и смотрится слишком громоздко.

Последовательность

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

3. Разметка сайта

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

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

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

Пользователи Wix могут использовать шаблоны сайтов с уже готовыми разметками.

4. Функциональные компоненты веб дизайна

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

Навигация

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

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

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

• Плавающее меню. Меню, которое закреплено в определенной части экрана, и остается в поле зрения пользователя даже когда он прокручивает сайт вниз.

• «Гамбургер». Иконка, состоящая из трех горизонтальных линий (что является устоявшимся символом меню). При нажатии на иконку она раскрывается в полноценное меню. Обычно располагается в левом или правом верхнем углу сайта.

• Выпадающее меню. Меню с дополнительными частями, которые отображаются только тогда, когда пользователь нажимает или наводит на определенное место в основной части.

• Боковое меню. Меню, которое располагается по краям в левой или правой части экрана.

Скорость

Никому не нравятся медленные сайты. Согласно исследованию, на сайтах, которые загружаются более 3 секунд, показатель отказов возрастает на 38%. Неважно, насколько красиво выглядит страница — если она не отображается корректно и заставляет пользователя ждать, он с большой вероятностью закроет ее через несколько секунд. На производительность сайта может влиять множество факторов: от количества элементов на странице до сторонних приложений. Мы написали подробное руководство о том, как ускорить работу сайта.

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

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

Пользователи Wix могут воспользоваться Wix SEO, чтобы автоматизировать часть задач по оптимизации.

UX

UX (user experience — «пользовательский опыт) — это дисциплина веб-дизайна, которая изучает логику действий пользователей, чтобы обеспечить для них наиболее комфортное взаимодействие с сайтом. UX дизайнеры помогают сделать так, чтобы сайт положительно влиял на клиентский опыт. Для этого страницы должны отвечать следующим характеристикам:

• Польза;

• Удобство использования;

• Легкость в поиске;

• Доверие;

• Желанность;

• Доступность;

• Ценность.

Адаптивный дизайн и респонсивный (отзывчивый) дизайн.

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

Респонсивный (отзывчивый) дизайн означает создание одной «гибкой» версии сайта, которая меняется в зависимости от размера экрана или даже от положения смартфона в пространстве.

5. Визуальные элементы веб дизайна

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

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

Футер

Футер (или «подвам») — самая нижняя часть сайта. Обычно на ней присутствует меню с ссылками на все важные страницы, а также адрес, номер мобильного телефона и другую контактную информацию. Также в футере располагаются ссылки на социальные сети.

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

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

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

Фон сайта

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

Изображения

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

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

Анимированные элементы

Анимация поможет выделить сайт на фоне конкурентов и управлять вниманием пользователя. Вот, как ее можно использовать:

• Добавить на кнопку с призывом к действию,

• Добавить в навигацию анимированные стрелки, чтобы пользователь не потерялся

• Добавить полоску загрузки

6. Обслуживание сайта

Веб дизайн постоянно меняется — и ваш сайт должен эволюционировать вместе с ним. Устаревшие элементы могут отпугнуть пользователей, а вместе с этим снизить трафик и продажи. Следите за свежими трендами веб-дизайна, редактируйте и добавляйте контент, продолжайте оптимизировать SEO и проверяйте время от времени, насколько быстро загружаются страницы.