stringtranslate.com

Веб-дизайн

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

История

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

1988–2001

Хотя веб-дизайн имеет довольно недавнюю историю, его можно связать с другими областями, такими как графический дизайн, пользовательский опыт и мультимедийное искусство, но более уместно рассматривать его с технологической точки зрения. Он стал большой частью повседневной жизни людей. Трудно представить себе Интернет без анимированной графики, различных стилей типографики , фонов, видео и музыки. Интернет был анонсирован 6 августа 1991 года; в ноябре 1992 года ЦЕРН стал первым веб-сайтом, запущенным во Всемирной паутине. В этот период веб-сайты структурировались с помощью тега <table>, который создавал числа на веб-сайте. Со временем веб-дизайнеры смогли найти свой путь, чтобы создать больше структур и форматов. В ранней истории структура веб-сайтов была хрупкой и сложной для содержания, поэтому их стало очень трудно использовать. В ноябре 1993 года ALIWEB стала первой в истории поисковой системой, которая была создана (Archie Like Indexing for the WEB). [2]

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

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

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

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

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

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

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

2001–2012

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

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

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

2012 и позже

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

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

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

UX-дизайн

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

Навыки и приемы

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

Маркетинговый и коммуникационный дизайн на веб-сайте может определить, что работает для его целевого рынка. Это может быть возрастная группа или определенное течение культуры; таким образом, дизайнер может понимать тенденции своей аудитории. Дизайнеры также могут понимать тип веб-сайта, который они проектируют, что означает, например, что соображения по дизайну веб-сайта B2B ( бизнес для бизнеса ) могут сильно отличаться от веб-сайта, ориентированного на потребителя, такого как сайт розничной торговли или развлечений. Тщательное рассмотрение может быть сделано, чтобы гарантировать, что эстетика или общий дизайн сайта не конфликтуют с ясностью и точностью контента или простотой веб-навигации , [12] особенно на веб-сайте B2B. Дизайнеры также могут учитывать репутацию владельца или бизнеса, который представляет сайт, чтобы убедиться, что они представлены в выгодном свете. Веб-дизайнеры обычно контролируют все веб-сайты, которые создаются, на предмет того, как они работают или оперируют вещами. Они постоянно обновляют и меняют все на веб-сайтах за кулисами. Все элементы, которые они делают, — это текст, фотографии, графика и макет веб-сайта. Перед началом работы над сайтом веб-дизайнеры обычно назначают встречу со своими клиентами, чтобы обсудить макет, цвет, графику и дизайн. Веб-дизайнеры тратят большую часть своего времени на проектирование сайтов и обеспечение правильной скорости. Веб-дизайнеры обычно занимаются тестированием и работой, маркетингом и общением с другими дизайнерами по поводу макета сайтов и поиска правильных элементов для сайтов. [13]

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

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

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

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

Порядок прогрессивного улучшения

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

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

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

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

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

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

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

Типографика

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Философия 1: То, как мы общаемся, влияет на то, как другие воспринимают нашу работу. Они воспринимают нашу работу как более ценную и полезную, когда мы хорошо ее передаем, и менее ценную, когда мы плохо ее передаем.
  2. Философия 2: Люди оценивают качество коммуникации на основе множества личных факторов, включая свой опыт, предпочтения, техническую подготовку, языковую подготовку и членство в профессиональных группах.
  3. Философия 3: Коммуникация важна в разной степени во всех межличностных взаимодействиях.

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

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

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

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

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

Профессии

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

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

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

Смежные дисциплины

Примечания

  1. Разметка на основе ^ и разделители .GIF- изображения<table>

Ссылки

  1. ^ ab Лестер, Джорджина. "Различные работы и обязанности разных людей, участвующих в создании веб-сайта". Arts Wales UK . Получено 17.03.2012 .
  2. ^ CPBI, Райан Шелли. «История веб-дизайна: 30 лет создания Интернета [обновление 2022 г.]». www.smamarketing.net . Получено 12 октября 2022 г.
  3. ^ "Более длинная биография" . Получено 2012-03-16 .
  4. ^ "Mosaic Browser" (PDF) . Архивировано из оригинала (PDF) 2013-09-02 . Получено 2012-03-16 .
  5. ^ Цвикки, Э.Д.; Купер, С.; Чепмен, Д.Б. (2000). Создание межсетевых экранов Интернета. США: O'Reily & Associates. стр. 804. ISBN 1-56592-871-7.
  6. ^ abcd Нидерст, Дженнифер (2006). Веб-дизайн в двух словах. Соединенные Штаты Америки: O'Reilly Media. С. 12–14. ISBN 0-596-00987-9.
  7. ^ ab Chapman, Cameron, The Evolution of Web Design, Six Revisions, архивировано из оригинала 30 октября 2013 г.
  8. ^ "AMO.NET America's Multimedia Online (ПРЕДВАРИТЕЛЬНАЯ ПРОСМОТР Internet Explorer 6)". amo.net . Получено 2020-05-27 .
  9. ^ ab «Служба проверки разметки W3C».
  10. ^ W3C. «Инициатива по обеспечению доступности веб-сайтов (WAI)».{{cite web}}: CS1 maint: числовые имена: список авторов ( ссылка )
  11. ^ "Что такое веб-дизайн?". The Interaction Design Foundation . Получено 12 октября 2022 г.
  12. ^ THORLACIUS, LISBETH (2007). «Роль эстетики в веб-дизайне». Nordicom Review . 28 (28): 63–76. doi : 10.1515/nor-2017-0201 . S2CID  146649056.
  13. ^ "Кто такой веб-дизайнер? (Руководство 2022 г.)". BrainStation® . Получено 28.10.2022 .
  14. ^ Кастаньеда, Х. А. Франциско; Муньос-Лейва, Теодоро Луке (2007). «Модель веб-принятия (WAM): смягчение влияния пользовательского опыта». Информация и управление . 44 (4): 384–396. дои : 10.1016/j.im.2007.02.003.
  15. ^ "Создание устойчивого интерфейса с использованием прогрессивного улучшения". GOV.UK. Получено 27 октября 2021 г.
  16. ^ "Развертывание индексации с приоритетом для мобильных устройств". Официальный блог Google Webmaster Central . Получено 2018-06-09 .
  17. ^ Стоун, Джон (16.11.2009). "20 правил эффективной веб-типографики" . Получено 19.03.2012 .
  18. ^ Консорциум Всемирной паутины: Понимание принципов доступности веб-контента 2.2.2: Пауза, Остановка, Скрытие
  19. ^ W3C QA. "Мой веб-сайт стандартный! А ваш?" . Получено 21.03.2012 .{{cite web}}: CS1 maint: числовые имена: список авторов ( ссылка )
  20. ^ Кристенсен, Матиас Бильман (16.11.2015). «Обзор статических генераторов веб-сайтов: Джекилл, Миддлмен, Рутс, Хьюго». Журнал Smashing Magazine . Получено 26.10.2016 .
  21. ^ Соуси, Кайл, «Ваша домашняя страница делает то, что должна?», «Удобный интерфейс», архивировано из оригинала 8 июня 2012 г.
  22. Нильсен, Якоб (10 ноября 2003 г.), Десять наиболее нарушаемых правил дизайна домашних страниц, Nielsen Norman Group, архивировано из оригинала 5 октября 2013 г.
  23. Найт, Кайла (20 августа 2009 г.), Основные советы по разработке эффективной домашней страницы, шесть редакций, архивировано из оригинала 21 августа 2013 г.
  24. Спул, Джаред (29 сентября 2005 г.), Is Home Page Design Relevant Anymore?, User Interface Engineering, архивировано из оригинала 16 сентября 2013 г.
  25. Чапман, Кэмерон (15 сентября 2010 г.), 10 советов по удобству использования, основанных на исследованиях, шесть редакций, архивировано из оригинала 2 сентября 2013 г.
  26. ^ Гоца, Золтан, Миф № 17: Домашняя страница — самая важная страница, архивировано из оригинала 2 июня 2013 г.
  27. Макговерн, Джерри (18 апреля 2010 г.), Упадок домашней страницы, архивировано из оригинала 24 мая 2013 г.
  28. Портер, Джошуа (24 апреля 2006 г.), Приоритет времени проектирования: подход «длинного хвоста», проектирование пользовательского интерфейса, архивировано из оригинала 14 мая 2013 г.
  29. Спул, Джаред (6 августа 2007 г.), Подкаст «Инструменты удобства использования: дизайн домашней страницы», заархивировано из оригинала 29 апреля 2013 г.
  30. ^ ab Messner, Katie (22 апреля 2013 г.), Карусели изображений: получение контроля над каруселью, Usability.gov, заархивировано из оригинала 10 октября 2013 г.
  31. Джонс, Харрисон (19 июня 2013 г.), Слайдеры на домашней странице: плохо для SEO, плохо для удобства использования, архивировано из оригинала 22 ноября 2013 г.
  32. ^ Laja, Peep (8 июня 2019 г.), Карусели и слайдеры изображений? Не используйте их. (Вот почему.), CXL, архивировано из оригинала 10 декабря 2019 г.
  33. ^ Олекси, Уолтер (2001). Карьера в веб-дизайне . Нью-Йорк: The Rosen Publishing Group, Inc. стр. 9–11. ISBN 978-0-8239-3191-0.

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