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

Как отличить веб-дизайн от графического или UX/UI-дизайна

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

Графический дизайн	UX/UI-дизайн
Некоторые графические дизайнеры могут создавать макеты сайтов, так как у них есть для этого необходимые навыки и знание программ. Но обычно кроме сайтов они берут и другие задачи — работают с айдентикой, полиграфией или дизайном упаковки.	UX/UI-дизайнеры тоже создают сайты и лендинги. Можно даже сказать, что веб-дизайн — это часть дизайна интерфейсов. Сейчас под UX/UI-дизайном чаще подразумевается разработка приложений, но для сайтов интерфейс не менее важен.

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

Веб-дизайн включает в себя:

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

Когда появился веб-дизайн и как выглядел первый сайт

У первого сайта в интернете не было дизайна в привычном для нас понимании, он состоял из текста на белом фоне. Это был сайт Тима Бернерса-Ли, который считается одним из основателей World Wide Web (Всемирной паутины), которую сейчас мы называем просто «интернет».

Страница появилась 6 августа 1991 года. Она описывала, как создавать другие веб-страницы и объясняла, что такое гипертекст. Некоторые фразы были выделены синим цветом. Это и были уже привычные нам гиперссылки, которые до сих пор выглядят примерно так же.

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

Например, так выглядел сайт Yahoo! в 1994 году:

Уже в 1997 году сайты стали ярче. Так выглядела страница американского журнала Trouser Press, сверстанная в это время:

Примеры современного веб-дизайна

Для создания современных сайтов используется гораздо больше приемов и стилей, чем в начале 1990-х годов. Даже если сайт стилизован под ретро, в дизайне может использоваться современная анимация и необычные шрифты. По версии Adobe, самыми интересными примерами современного веб-дизайна можно считать:

Сайт проекта «90 years of style» бренда Lacoste, в котором активно используются старые фото, приглушенные, зернистые фоны, шрифты, имитирующие ретро и рисовка от руки:

Сайт Unseen Studio, который в котором используются такие трендовые решения, как минимализм, эстетические шрифты и пастельные оттенки, но они необычно сочетаются с анимацией, имитирующей круги на воде:

Сайт Curious & Company в викторианском стиле. Он использует масонскую символику и светящийся курсор, который позволяет постепенно исследовать экран:

Читайте также:

главные тренды веб-дизайна в 2023 году

Типы сайтов в веб-дизайне

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

Корпоративный сайт

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

Самые известные корпоративные сайты принадлежат крупным компаниям, таким как Apple, Google, Яндекс или Сбер.

Сайт-визитка

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

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

Лендинг

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

Блог

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

Интернет-магазин

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

Сайт-витрина

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

Сервис

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

Основные блоки сайта или лендинга

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

Главная страница сайта 

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

Шапка сайта

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

Меню сайта

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

Подвал сайта или футер

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

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

Читайте также:

10 терминов, которые нужно запомнить начинающему веб-дизайнеру

Элементы веб-дизайна

Изображения

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

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

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

В интернет-магазинах самые важные изображения — это фотографии товаров, которые продаются на площадке.

Шрифты

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

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

Анимация

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

Кнопки 

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

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

Читайте также:

инструкция: как сделать кнопку в Figma

Этапы создания сайта

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

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

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

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

5. Согласование и правки. Готовый прототип отправляется на согласование с заказчиком. Если есть замечания или правки, дизайнер вносит изменения и отправляет новый прототип на повторное согласование.

В каких программах создают макеты сайтов

Figma

Это популярная программа, которую используют графические, UX/UI- и веб-дизайнеры для создания макетов. Она предлагает широкий набор инструментов для работы с векторной графикой и текстом, дает возможность сохранять пресеты и стили, чтобы делать разные макеты в одинаковой стилистике. 

Также в Figma можно собирать полностью кликабельные прототипы с анимацией, которые имитируют открытие новых страниц или форм при нажатии на кнопки.

Adobe XD

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

Sketch

Эта программа специализируется на создании макетов интерфейсов. Sketch предлагает мощные инструменты для работы со слоями, векторной графикой и прототипированием. Веб-дизайнеры часто используют Sketch для создания макетов и прототипов, которые затем экспортируются в другие программы, такие как Adobe Photoshop или Illustrator.

Основные принципы дизайна сайтов

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

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

• Единообразие и согласованность. Элементы интерфейса должны быть выполнены в едином стиле и гармонично сочетаться друг с другом.

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

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

Профессии в веб-дизайне и возможности для профессионального развития

В сфере веб-дизайна есть много других профессий, кроме дизайнера. Вот некоторые из них:

• Контент-менеджер — отвечает за наполнение сайта контентом, его редактирование и удаление.

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

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

• Тестировщик — проверяет работоспособность сайта, выявляет ошибки и предлагает способы их устранения.

• Аналитик — проводит анализ поведения пользователей на сайте, выявляет слабые места и предлагает решения по улучшению пользовательского опыта.

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

• Tilda
• Readymag 
• uCoz
• Wix

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

Гайд по UX-исследованиям для дизайнеров

Как проводить юзабилити-тестирование

В чем разница между CX- и UX-исследованиями