веб-дизайн

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

История

Книги по веб-дизайну в магазине

1988–2001 гг.

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

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

В 1989 году во время работы в CERN Тим Бернерс-Ли предложил создать глобальный гипертекстовый проект, который позже стал известен как World Wide Web . В период с 1991 по 1993 год родилась Всемирная паутина. Страницы, содержащие только текст, можно было просматривать с помощью простого браузера построчного режима. ^[2] В 1993 году Марк Андриссен и Эрик Бина создали браузер Mosaic . В то время существовало несколько браузеров, однако большинство из них были основаны на Unix и, естественно, имели большой объем текста. Не существовало комплексного подхода к таким элементам графического дизайна, как изображения или звуки. Браузер Mosaic сломал эту форму. ^[3 ] W3Cбыла создана в октябре 1994 года, чтобы «раскрыть весь потенциал Всемирной паутины путем разработки общих протоколов, которые способствуют ее развитию и обеспечивают ее совместимость». ^[4] Это помешало какой-либо одной компании монополизировать собственный браузер и язык программирования, которые могли бы изменить влияние Всемирной паутины в целом. W3C продолжает устанавливать стандарты, которые сегодня можно увидеть в JavaScript и других языках. В 1994 году Андреессен основал Mosaic Communications Corp., которая позже стала известна как Netscape Communications ., браузер Netscape 0.9. Netscape создала свои собственные теги HTML, не обращая внимания на процесс традиционных стандартов. Например, Netscape 1.1 включал теги для изменения цвета фона и форматирования текста с таблицами на веб-страницах. В период с 1996 по 1999 год начались браузерные войны , когда Microsoft и Netscape боролись за абсолютное господство в браузерах. За это время появилось много новых технологий, в частности каскадные таблицы стилей , JavaScript и динамический HTML . В целом конкуренция браузеров привела ко многим положительным творениям и помогла быстрому развитию веб-дизайна. ^[5]

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

В 1996 году Microsoft выпустила свой первый конкурентоспособный браузер со своими собственными функциями и тегами HTML. Кроме того, это был первый браузер, поддерживающий таблицы стилей, которые в то время считались малоизвестной авторской техникой, а сегодня являются важным аспектом веб-дизайна. ^[5] Разметка HTML для таблиц изначально предназначалась для отображения табличных данных. Однако дизайнеры быстро осознали потенциал использования HTML-таблиц для создания сложных многоколоночных макетов, которые иначе были бы невозможны. В то время, когда дизайн и хорошая эстетика, казалось, имели приоритет над хорошей структурой разметки, и мало внимания уделялось семантике и веб-доступности.. HTML-сайты были ограничены в возможностях дизайна, особенно в более ранних версиях HTML. Для создания сложных дизайнов многим веб-дизайнерам приходилось использовать сложные структуры таблиц или даже использовать пустые разделители .GIF -изображений, чтобы предотвратить разрушение пустых ячеек таблицы. ^[6] CSS был представлен W3C в декабре 1996 года для поддержки представления и компоновки. Это позволило HTML -коду быть семантическим, а не одновременно семантическим и презентационным, и улучшило веб-доступность, см . Веб-дизайн без таблиц .

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

Конец первых браузерных войн

В 1998 году Netscape выпустила код Netscape Communicator под лицензией с открытым исходным кодом , что позволило тысячам разработчиков участвовать в улучшении программного обеспечения. Однако эти разработчики решили создать стандарт для Интернета с нуля, который руководил разработкой браузера с открытым исходным кодом и вскоре расширился до полной платформы приложений. ^[5] Проект веб-стандартов был сформирован и продвигал соответствие браузеров стандартам HTML и CSS . Такие программы, как Acid1 , Acid2 и Acid3были созданы для того, чтобы тестировать браузеры на соответствие веб-стандартам. В 2000 году для Mac был выпущен Internet Explorer, который стал первым браузером, полностью поддерживающим HTML 4.01 и CSS 1. Это также был первый браузер, полностью поддерживающий формат изображений PNG . ^[5] К 2001 году, после кампании Microsoft по популяризации Internet Explorer, Internet Explorer достиг 96% доли использования веб-браузеров , что означало конец первых войн браузеров, поскольку у Internet Explorer не было реальной конкуренции. ^[7]

2001–2012 гг.

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

С момента окончания войн браузеров ^{[ когда? ]} были выпущены новые браузеры. Многие из них имеют открытый исходный код , что означает, что они, как правило, имеют более быструю разработку и больше поддерживают новые стандарты. Многие считают, что новые опции ^{лучше , чем} Internet Explorer от Microsoft .

W3C выпустил новые стандарты для HTML ( HTML5 ) и CSS ( CSS3 ), а также новые API JavaScript , каждый из которых является новым, но отдельным стандартом. ^{[ когда? ]} Хотя термин HTML5 используется только для обозначения новой версии HTML и некоторых API-интерфейсов JavaScript, стало обычным использовать его для обозначения всего набора новых стандартов (HTML5, CSS3 и JavaScript).

2012 и позже

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

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

Веб-дизайнеры используют множество различных инструментов в зависимости от того, в какой части производственного процесса они участвуют. Эти инструменты со временем обновляются новыми стандартами и программным обеспечением, но принципы, лежащие в их основе, остаются прежними. Веб-дизайнеры используют редакторы векторной и растровой графики для создания изображений в веб-формате или прототипов дизайна. Технологии, используемые для создания веб-сайтов, включают стандарты W3C, такие как HTML и CSS, которые можно кодировать вручную или создавать с помощью программного обеспечения для редактирования WYSIWYG . Другие инструменты, которые могут использовать веб-дизайнеры, включают валидаторы разметки ^[8] и другие инструменты тестирования на удобство использования и доступность, чтобы убедиться, что их веб-сайты соответствуют рекомендациям по доступности в Интернете. ^[9]

Навыки и техники

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

Маркетинговый и коммуникационный дизайн на веб-сайте может определить, что работает для его целевого рынка. Это может быть возрастная группа или определенная ветвь культуры; таким образом дизайнер может понять тенденции своей аудитории. Дизайнеры также могут понимать тип веб-сайта, который они разрабатывают, а это означает, например, что соображения дизайна веб-сайта для бизнеса (B2B) могут сильно отличаться от ориентированного на потребителя веб-сайта, такого как розничный или развлекательный веб-сайт. Следует тщательно продумать, чтобы эстетика или общий дизайн сайта не противоречили ясности и точности содержания или простоте веб-навигации [ ^{10] .}особенно на сайте B2B. Дизайнеры также могут учитывать репутацию владельца или компании, которую представляет сайт, чтобы обеспечить их благоприятное изображение.

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

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

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

Прогрессивное улучшение

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

На практике это означает предоставление контента через HTML и применение стилей и анимации через CSS в технически возможной степени, а затем применение дополнительных улучшений через JavaScript . Текст страниц загружается сразу через исходный код HTML, а не ждет, пока JavaScript инициирует и загрузит содержимое впоследствии, что позволяет читать содержимое с минимальным временем загрузки и пропускной способностью, а также через текстовые браузеры и обеспечивает максимальную обратную совместимость. . ^[12]

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

Макет страницы

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

Популярность гибких макетов возросла примерно в 2000 году, чтобы позволить браузеру вносить пользовательские настройки в гибкие макеты на основе деталей экрана читателя (размер окна, размер шрифта относительно окна и т. д.). Они выросли как альтернатива макетам на основе HTML-таблиц и дизайну на основе сетки как в принципе дизайна макета страницы, так и в технике кодирования, но внедрялись очень медленно. ^{[примечание 1]} Это произошло из-за соображений устройств чтения с экрана и различных размеров окон, которые дизайнеры не могут контролировать. Соответственно, дизайн может быть разбит на блоки (боковые панели, блоки контента, встроенная реклама ).области, области навигации), которые отправляются в браузер и которые браузер встраивает в окно дисплея, насколько это возможно. Хотя такое отображение часто может изменить относительное положение основных единиц контента, боковые панели могут быть смещены ниже основного текста , а не сбоку от него. Это более гибкое отображение, чем жестко заданный макет на основе сетки, который не подходит для окна устройства. В частности, относительное положение блоков содержимого может измениться, при этом содержание внутри блока останется неизменным. Это также минимизирует потребность пользователя в горизонтальной прокрутке страницы.

Адаптивный веб-дизайн — это более новый подход, основанный на CSS3 и более глубоком уровне спецификации для каждого устройства в таблице стилей страницы за счет расширенного использования @mediaправила CSS. В марте 2018 года Google объявила о развертывании мобильной индексации. ^[13] Сайты, использующие адаптивный дизайн, лучше всего подходят для того, чтобы соответствовать этому новому подходу.

Типография

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

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

Большинство макетов сайта включают пустое пространство, чтобы разбить текст на абзацы, а также избежать выравнивания текста по центру. ^[14]

Графики движения

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

Анимация, которая не инициируется посетителем сайта, может вызвать проблемы с доступностью. Стандарты доступности консорциума World Wide Web требуют, чтобы посетители сайта могли отключать анимацию. ^[15]

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

Дизайнеры веб-сайтов могут посчитать хорошей практикой соблюдение стандартов. Обычно это делается с помощью описания, указывающего, что делает элемент. Несоблюдение стандартов не может сделать веб-сайт непригодным для использования или подверженным ошибкам, но стандарты могут относиться к правильному расположению страниц для удобства чтения, а также к обеспечению надлежащего закрытия закодированных элементов. Сюда входят ошибки в коде, более организованная компоновка кода и обеспечение правильной идентификации идентификаторов и классов. Плохо закодированные страницы иногда в просторечии называют супом тегов . Проверка через W3C ^[8]может быть выполнено только при правильном объявлении DOCTYPE, которое используется для выделения ошибок в коде. Система выявляет ошибки и области, не соответствующие стандартам веб-дизайна. Затем эта информация может быть исправлена ​​пользователем. ^[16]

Сгенерированный контент

Существует два способа создания веб-сайтов: статический или динамический.

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

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

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

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

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

Динамические веб-сайты создаются «на лету» и используют серверную технологию для создания веб-страниц. Обычно они извлекают свой контент из одной или нескольких серверных баз данных: некоторые из них представляют собой запросы к базе данных в реляционной базе данных для запроса каталога или для обобщения числовой информации, другие могут использовать базу данных документов , такую ​​как MongoDB или NoSQL , для хранения более крупных единиц контента. например, сообщения в блогах или статьи вики.

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

Когда динамические веб-страницы впервые разрабатывались, они обычно кодировались непосредственно на таких языках, как Perl , PHP или ASP . Некоторые из них, особенно PHP и ASP, использовали «шаблонный» подход, когда страница на стороне сервера напоминала структуру завершенной страницы на стороне клиента, а данные вставлялись в места, определенные «тегами». Это был более быстрый способ разработки, чем кодирование на чисто процедурном языке программирования, таком как Perl.

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

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

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

Эксперты по юзабилити, в том числе Джейкоб Нильсен и Кайл Суси, часто подчеркивали, что дизайн домашней страницы является залогом успеха веб-сайта, и утверждали, что домашняя страница является самой важной страницей на веб-сайте. ^[18] Нильсен, Якоб; Тахир, Мари (октябрь 2001 г.), Удобство использования домашней страницы: разрушено 50 веб-сайтов , New Riders Publishing, ISBN 978-0735711020^{[19] [20]} Однако специалисты-практики в 2000-х годах начали обнаруживать, что растущее число посетителей веб-сайтов миновало домашнюю страницу и направлялось непосредственно на внутренние страницы контента через поисковые системы, электронные информационные бюллетени и RSS-каналы. ^[21] Это заставляет многих практиков утверждать, что домашние страницы менее важны, чем думает большинство людей. ^{[22] [23] [24] [25]} Джаред Спул утверждал в 2007 году, что домашняя страница сайта на самом деле является наименее важной страницей на веб-сайте. ^[26]

В 2012 и 2013 годах карусели (также называемые «слайдерами» и «вращающимися баннерами») стали чрезвычайно популярным элементом дизайна на домашних страницах, часто используемым для демонстрации рекомендуемого или недавнего контента в ограниченном пространстве. ^{[27] [28]} Многие специалисты утверждают, что карусели являются неэффективным элементом дизайна и вредят поисковой оптимизации и удобству использования веб-сайта. ^{[28] [29] [30]}

Профессии

В создании веб-сайта участвуют две основные профессии: веб-дизайнер и веб-разработчик , которые часто тесно сотрудничают над веб-сайтом. ^[31] Веб-дизайнеры несут ответственность за визуальный аспект, который включает в себя макет, цвет и типографику веб-страницы. Веб-дизайнеры также должны иметь практические знания языков разметки, таких как HTML и CSS, хотя степень их знаний будет отличаться от одного веб-дизайнера к другому. В частности, в небольших организациях одному человеку потребуются необходимые навыки для проектирования и программирования всей веб-страницы, в то время как в более крупных организациях может быть веб-дизайнер, отвечающий только за визуальный аспект.

Другие работы, которые могут быть связаны с созданием веб-сайта, включают:

• Графические дизайнеры для создания визуальных элементов для сайта, таких как логотипы, макеты и кнопки.
• Специалисты по интернет-маркетингу, которые помогают поддерживать присутствие в Интернете с помощью стратегических решений по нацеливанию зрителей на сайт с использованием методов маркетинга и продвижения в Интернете.
• SEO-писатели исследуют и рекомендуют правильные слова для включения в конкретный веб-сайт и делают веб-сайт более доступным и доступным в многочисленных поисковых системах.
• Интернет-копирайтер для создания письменного контента страницы для обращения к целевым зрителям сайта ^[1]
• Дизайнер пользовательского опыта (UX) включает в себя аспекты проектирования, ориентированного на пользователя, которые включают информационную архитектуру, дизайн, ориентированный на пользователя, пользовательское тестирование, дизайн взаимодействия и иногда визуальный дизайн.

Смотрите также

Смотрите также

Связанные дисциплины

Примечания

Внешние ссылки

• Консорциум W3C по веб-стандартам
• Веб-дизайн и разработка в Curlie