Введение

Создание и поддержка веб-сайтов

Веб-дизайн охватывает множество различных навыков и дисциплин в создании и поддержке веб-сайтов. Различные области веб-дизайна включают веб-графический дизайн; дизайн пользовательского интерфейса (UI-дизайн); разработку контента, включая стандартизированный код и проприетарное программное обеспечение; дизайн пользовательского опыта (UX-дизайн); и поисковую оптимизацию. Зачастую над разными аспектами процесса проектирования работают команды специалистов, хотя некоторые дизайнеры могут охватывать все области. Термин "веб-дизайн" обычно используется для описания процесса проектирования, относящегося к дизайну клиентской части веб-сайта, включая написание разметки. Веб-дизайн частично пересекается с веб-разработкой в более широком контексте веб-инженерии. От веб-дизайнеров ожидается понимание принципов удобства использования и знание руководств по веб-доступности.

1988 - 2001 гг.

Хотя веб-дизайн имеет относительно недавнюю историю, его можно связать с другими областями, такими как графический дизайн, пользовательский опыт и мультимедийное искусство, но более правильно рассматривать его с технологической точки зрения. Он стал неотъемлемой частью повседневной жизни людей. Сложно представить себе Интернет без анимированной графики, различных стилей типографики, фоновых изображений, видео и музыки. Веб был представлен 6 августа 1991 года, а в ноябре 1992 года CERN стал первым веб-сайтом, запущенным в World Wide Web. В этот период структура веб-сайтов создавалась с использованием тега `<table>`, который формировал табличное представление данных. В конечном итоге веб-дизайнеры научились обходить эти ограничения, чтобы создавать более сложные структуры и форматирование. На ранних этапах структура веб-сайтов была непрочной и сложной в управлении, что затрудняло их использование. В ноябре 1993 года ALIWEB стала первой в истории поисковой системой (Archie Like Indexing for the WEB).

Начало веб-дизайна

В 1989 году, работая в ЦЕРН, Тим Бернерс-Ли предложил создать глобальный гипертекстовый проект, который позже стал известен как Всемирная паутина. С 1991 по 1993 год Всемирная паутина обрела форму. Текстовые HTML-страницы можно было просматривать с помощью простого веб-браузера в текстовом режиме. В 1993 году Марк Андрессен и Эрик Бина создали браузер Mosaic. В то время существовало множество браузеров, однако большинство из них были основаны на Unix и, соответственно, ориентированы на текст. Не существовало единого подхода к элементам графического дизайна, таким как изображения или звуки. Браузер Mosaic разрушил этот шаблон. В октябре 1994 года был создан W3C с целью "раскрыть весь потенциал Всемирной паутины путем разработки общих протоколов, способствующих ее развитию и обеспечивающих ее совместимость". Это не позволило какой-либо одной компании монополизировать проприетарный браузер и язык программирования, что могло бы изменить влияние Всемирной паутины в целом. W3C продолжает устанавливать стандарты, что сегодня можно увидеть на примере JavaScript и других языков. В 1994 году Андрессен основал Mosaic Communications Corp., которая позже стала известна как Netscape Communications, и браузер Netscape 0.9. Netscape создал собственные HTML-теги, не придерживаясь традиционного процесса стандартизации. Например, Netscape 1.1 включал теги для изменения цветов фона и форматирования текста с помощью таблиц на веб-страницах. С 1996 по 1999 год развернулись браузерные войны, в ходе которых Microsoft и Netscape боролись за доминирование на рынке браузеров. В этот период появилось множество новых технологий, в частности, каскадные таблицы стилей (CSS), JavaScript и динамический HTML. В целом, конкуренция между браузерами привела ко многим положительным результатам и способствовала быстрому развитию веб-дизайна.

Эволюция веб-дизайна

В 1996 году Microsoft выпустила свой первый конкурентоспособный браузер, который был оснащен собственными функциями и HTML-тегами. Он также стал первым браузером, поддерживающим таблицы стилей, которые в то время считались малоизвестной технологией разработки, а сегодня являются важным аспектом веб-дизайна. В декабре 1996 года W3C представила CSS для поддержки оформления и компоновки. Это позволило HTML-коду быть семантически значимым, а не сочетать семантику и оформление, а также повысило доступность веб-сайтов, см. веб-дизайн без использования таблиц. В 1996 году был разработан Flash (первоначально известный как FutureSplash). В то время инструмент разработки контента для Flash был относительно простым по сравнению с современным, с базовыми инструментами компоновки и рисования, ограниченным предшественником ActionScript и временной шкалой, но он позволил веб-дизайнерам выйти за рамки возможностей HTML, анимированных GIF-файлов и JavaScript. Однако, поскольку для работы Flash требовался плагин, многие веб-разработчики избегали его использования, опасаясь снижения охвата аудитории из-за проблем с совместимостью. Вместо этого дизайнеры возвращались к GIF-анимации (или вовсе отказывались от использования динамической графики) и JavaScript для виджетов. Но преимущества Flash сделали его достаточно популярным среди определенных целевых аудиторий, чтобы в конечном итоге он стал поддерживаться большинством браузеров, и достаточно мощным для разработки целых сайтов.

2001 - 2012 годы

С начала XXI века веб все глубже проникает в жизнь людей. По мере этого развития технологии веба также претерпевали изменения. Значительно изменились и способы использования и доступа к вебу, что повлияло на дизайн сайтов. После окончания браузерных войн появились новые браузеры. Многие из них имеют открытый исходный код, что обычно обеспечивает более быструю разработку и лучшую поддержку новых стандартов. Многие считают эти новые варианты превосходящими Internet Explorer от Microsoft. W3C опубликовал новые стандарты для HTML (HTML5) и CSS (CSS3), а также новые JavaScript API, каждый из которых является отдельным стандартом. Хотя термин HTML5 используется строго для обозначения новой версии HTML и некоторых JavaScript API, его часто применяют ко всему комплексу новых стандартов (HTML5, CSS3 и JavaScript).

2012 и позже

С улучшением покрытия сетей 3G и LTE значительная часть трафика веб-сайтов стала поступать с мобильных устройств. Это оказало влияние на индустрию веб-дизайна, сместив ее в сторону минималистичного, облегченного и упрощенного стиля. В частности, возник подход "mobile first", который предполагает первоочередную разработку дизайна веб-сайта для мобильных устройств с последующей адаптацией к экранам большего размера.

Инструменты и технологии

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

Дизайн пользовательского интерфейса

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

Маркетинг и коммуникационный дизайн

Маркетинговый и коммуникационный дизайн веб-сайта позволяет определить, что эффективно для его целевой аудитории. Это может быть определенная возрастная группа или культурная среда, что позволяет дизайнеру понимать предпочтения и тенденции своей аудитории. Дизайнеры также учитывают тип разрабатываемого веб-сайта: например, требования к дизайну (B2B) – веб-сайта для бизнеса, ориентированного на другие компании – значительно отличаются от требований к веб-сайту, ориентированному на конечного потребителя, такому как интернет-магазин или развлекательный портал. Важно тщательно продумать, чтобы эстетика и общий дизайн сайта не мешали ясности и точности контента, а также удобству навигации, особенно на B2B-сайтах. Дизайнеры также учитывают репутацию владельца или компании, которую представляет сайт, чтобы обеспечить благоприятное представление. Веб-дизайнеры обычно осуществляют контроль над функционированием всех создаваемых ими веб-сайтов, постоянно обновляя и изменяя их элементы – текст, фотографии, графику и макет. Перед началом работы над сайтом веб-дизайнеры обычно проводят встречу с клиентом для обсуждения макета, цветовой схемы, графики и общего дизайна. Большая часть времени веб-дизайнера уходит на разработку веб-сайтов и оптимизацию скорости их загрузки. Как правило, они занимаются тестированием, маркетингом, взаимодействием с другими дизайнерами для разработки макетов и подбора подходящих элементов для веб-сайтов.

Дизайн пользовательского интерфейса и интерактивный дизайн

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

Постепенное улучшение

Прогрессивное улучшение — это стратегия в веб-дизайне, которая ставит во главу угла веб-контент, обеспечивая доступ к базовому контенту и функциональности веб-страницы всем пользователям, в то время как пользователи с расширенными возможностями браузера или более быстрым интернет-соединением получают улучшенную версию. На практике это означает подачу контента через HTML и применение стилей и анимации с помощью CSS в максимально возможной технической степени, а затем дальнейшее улучшение с помощью JavaScript. Текст страниц загружается немедленно из исходного кода HTML, а не требует ожидания инициализации и последующей загрузки контента JavaScript, что обеспечивает читаемость контента с минимальным временем загрузки и использованием пропускной способности, а также доступ через текстовые браузеры и максимальную обратную совместимость. В качестве примера, сайты на базе MediaWiki, включая Википедию, используют прогрессивное улучшение, поскольку они остаются работоспособными даже при отключенном JavaScript и CSS, так как контент страниц содержится в исходном коде HTML. В отличие от этого, Everipedia полагается на JavaScript для последующей загрузки контента страниц; при отключенном JavaScript отображается пустая страница.

Расположение страницы

На часть дизайна пользовательского интерфейса влияет качество макета страницы. Например, дизайнер может учитывать, должен ли макет страницы сайта оставаться единообразным на разных страницах при его разработке. Ширина страницы в пикселях также может считаться важной для выравнивания объектов в дизайне макета. Наиболее популярные сайты с фиксированной шириной обычно имеют заданную ширину, соответствующую наиболее распространенному размеру окна браузера при наиболее популярном разрешении экрана и размере монитора. Большинство страниц также выравниваются по центру для улучшения эстетики на больших экранах. Гибкие макеты стали набирать популярность примерно в 2000 году, позволяя браузеру вносить пользовательские корректировки в макет на основе характеристик экрана пользователя (размер окна, относительный размер шрифта и т.д.). Они появились как альтернатива макетам на основе таблиц HTML и макетам, основанным на сетке, как в принципах дизайна макетов страниц, так и в методах кодирования, но внедрялись довольно медленно. Это было связано с необходимостью учитывать устройства для чтения с экрана и различные размеры окон, которые не поддаются контролю со стороны дизайнеров. Соответственно, дизайн может быть разбит на отдельные блоки (боковые панели, контентные блоки, области встроенной рекламы, навигационные области), которые отправляются в браузер и подстраиваются под окно отображения браузером, насколько это возможно. Такой подход может часто изменять относительное положение основных контентных блоков, например, боковые панели могут перемещаться под основной текст вместо того, чтобы располагаться сбоку. Это более гибкое отображение, чем жестко закодированный макет на основе сетки, который не адаптируется к размеру устройства. В частности, относительное положение контентных блоков может меняться, при этом содержимое внутри блоков остается неизменным. Это также минимизирует необходимость горизонтальной прокрутки страницы. Адаптивный веб-дизайн – это более новый подход, основанный на CSS3, и более детальная спецификация для каждого устройства в таблице стилей страницы за счет расширенного использования правила CSS @media. В марте 2018 года Google объявил о внедрении мобильной индексации. Сайты, использующие адаптивный дизайн, хорошо подготовлены к соответствию этому новому подходу.

Типография

Веб-дизайнеры могут ограничить разнообразие шрифтов на веб-сайтах несколькими, выдержанными в едином стиле, вместо использования широкого спектра шрифтов или их начертаний. Большинство браузеров распознают определенное количество безопасных шрифтов, которые дизайнеры в основном используют, чтобы избежать проблем с отображением. Загрузка шрифтов была позднее включена в модуль шрифтов CSS3 и с тех пор реализована в Safari 3.1, Opera 10 и Mozilla Firefox 3.5. Это впоследствии повысило интерес к веб-типографике и к использованию загружаемых шрифтов. В большинстве макетов сайтов используется отрицательное пространство для разделения текста на абзацы, а также для избежания выравнивания текста по центру.

Движущаяся графика

На оформление страницы и пользовательский интерфейс также может повлиять использование динамической графики. Решение об использовании или неиспользовании динамической графики может зависеть от целевой аудитории веб-сайта. Динамическая графика может быть ожидаемой или, по крайней мере, лучше воспринятой на веб-сайтах, ориентированных на развлечения. Однако целевая аудитория сайта с более серьезными или формальными интересами (например, бизнес, общественные организации или государственные учреждения) может посчитать анимацию ненужной и отвлекающей, если она используется исключительно для развлечения или декоративных целей. Это не означает, что серьезный контент нельзя улучшить с помощью анимированных или видеопрезентаций, имеющих отношение к содержанию. В любом случае, дизайн динамической графики может определить, будут ли визуальные элементы более эффективными или отвлекающими. Динамическая графика, не инициированная посетителем сайта, может создавать проблемы с доступностью. Стандарты доступности консорциума World Wide Web требуют, чтобы посетители сайта имели возможность отключать анимацию.

Качество кода

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

Создаваемый контент

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

Статические веб-сайты

Статический веб-сайт хранит уникальный файл для каждой страницы. Каждый раз при запросе этой страницы возвращается одно и то же содержимое. Этот контент создается один раз, в процессе разработки веб-сайта. Обычно он создается вручную, хотя некоторые сайты используют автоматизированный процесс создания, подобный динамическому веб-сайту, результаты которого сохраняются на длительный срок в виде готовых страниц. Автоматически генерируемые статические сайты стали более популярными примерно с 2015 года, благодаря таким генераторам, как Jekyll и Adobe Muse. Преимущества статического веб-сайта заключаются в простоте хостинга, поскольку серверу требуется только отдавать статический контент, а не выполнять серверные скрипты. Это снижает требования к администрированию сервера и уменьшает вероятность возникновения уязвимостей в системе безопасности. Кроме того, такие сайты могут загружаться быстрее, используя недорогое серверное оборудование. Это преимущество стало менее значимым, поскольку дешевый веб-хостинг начал предлагать и динамические функции, а виртуальные серверы обеспечивают высокую производительность на короткие периоды времени по низкой цене. Практически любой веб-сайт содержит некоторое статическое содержимое, поскольку вспомогательные элементы, такие как изображения и таблицы стилей, обычно являются статичными, даже на сайтах с высокодинамичными страницами.

Динамические веб-сайты

Динамические веб-сайты генерируются на лету и используют серверные технологии для создания веб-страниц. Обычно они извлекают контент из одной или нескольких баз данных: некоторые выполняют запросы к реляционной базе данных для получения каталога или обобщения числовой информации, а другие могут использовать документоориентированную базу данных, такую как MongoDB или NoSQL, для хранения больших объемов контента, например, записей в блогах или статей в вики. В процессе проектирования динамические страницы часто прототипируют или создают каркасы, используя статические страницы. Навыки, необходимые для разработки динамических веб-страниц, значительно шире, чем для статических, и включают программирование на стороне сервера и баз данных, а также проектирование клиентского интерфейса. Даже проекты среднего размера в области динамических сайтов почти всегда требуют командной работы. Когда динамические веб-страницы только начали разрабатываться, их обычно кодировали непосредственно на языках, таких как Perl, PHP или ASP. Некоторые из них, особенно PHP и ASP, использовали подход с использованием "шаблонов", когда серверная страница по структуре напоминала готовую клиентскую страницу, а данные вставлялись в места, обозначенные "тегами". Это был более быстрый способ разработки, чем кодирование на чисто процедурном языке программирования, таком как Perl. Оба этих подхода для многих веб-сайтов теперь уступили место более высокоуровневым инструментам, ориентированным на приложения, таким как системы управления контентом. Они создаются на основе универсальных платформ программирования и предполагают, что веб-сайт существует для предоставления контента в соответствии с одной из нескольких общепринятых моделей, таких как блог с хронологической лентой, тематический журнал или новостной сайт, вики или пользовательский форум. Эти инструменты значительно упрощают реализацию такого сайта, превращая ее в задачу, связанную в основном с организацией и дизайном, не требующую программирования. Редактирование самого контента (а также шаблона страницы) можно осуществлять как через сам сайт, так и с помощью стороннего программного обеспечения. Возможность редактировать все страницы предоставляется только определенной категории пользователей (например, администраторам или зарегистрированным пользователям). В некоторых случаях анонимным пользователям разрешается редактировать определенный веб-контент, что встречается реже (например, добавление сообщений на форумах). Примером сайта, допускающего анонимное редактирование, является Википедия.

Техническая коммуникация в веб-дизайне

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

Дизайн домашней страницы

Эксперты по юзабилити, включая Якоба Нильсена и Кайла Суси, часто подчеркивали важность дизайна главной страницы для успеха веб-сайта и утверждали, что главная страница – самая важная страница на сайте. Однако уже в 2000-х годах специалисты стали замечать, что все больший трафик обходит главную страницу, переходя напрямую на внутренние страницы контента через поисковые системы, email-рассылки и RSS-каналы. Это привело многих к выводу, что главные страницы менее важны, чем принято считать. Джаред Спул в 2007 году утверждал, что главная страница сайта на самом деле является наименее важной страницей. В 2012 и 2013 годах карусели (также известные как "слайдеры" и "динамические баннеры") стали чрезвычайно популярным элементом дизайна главных страниц, часто используемым для демонстрации избранного или недавнего контента в ограниченном пространстве. Многие специалисты считают, что карусели – неэффективный элемент дизайна, негативно влияющий на поисковую оптимизацию и юзабилити сайта.