Веб-дизайн
Веб-дизайн включает в себя множество различных навыков и дисциплин, связанных с созданием и обслуживанием веб-сайтов . Различные области веб-дизайна включают веб-графический дизайн; дизайн пользовательского интерфейса (UI-дизайн); авторская разработка, включая стандартизированный код и проприетарное программное обеспечение ; дизайн пользовательского опыта (UX-дизайн); и поисковая оптимизация . Часто многие люди работают в группах, охватывая различные аспекты процесса проектирования, хотя некоторые дизайнеры охватывают их все. [ 1 ] Термин «веб-дизайн» обычно используется для описания процесса проектирования, связанного с дизайном внешнего интерфейса (клиентской стороны) веб-сайта, включая написание разметки . Веб-дизайн частично перекрывает веб-инженерию в более широкой сфере веб-разработки . Ожидается, что веб-дизайнеры будут осведомлены об удобстве использования и будут в курсе рекомендаций по доступности веб-сайтов .
История
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 был представлен W3C в декабре 1996 года для поддержки представления и макетирования. Это позволило HTML- коду быть семантическим, а не одновременно семантическим и презентационным, а также улучшило веб-доступность (см. веб-дизайн без таблиц) .
В 1996 году был разработан Flash (первоначально известный как FutureSplash). В то время инструмент разработки Flash-контента был относительно простым по сравнению с нынешним днем, в нем использовались базовые инструменты макетирования и рисования, ограниченный предшественник ActionScript и временная шкала, но он позволял веб-дизайнерам выйти за рамки HTML, анимированных GIF-файлов и JavaScript. . Однако, поскольку для Flash требовался плагин , многие веб-разработчики избегали его использования, опасаясь ограничения своей доли на рынке из-за отсутствия совместимости. Вместо этого дизайнеры вернулись к GIF -анимации (если они вообще не отказались от использования анимированной графики ) и JavaScript для виджетов . Но преимущества Flash сделали его достаточно популярным среди конкретных целевых рынков, чтобы в конечном итоге проникнуть в подавляющее большинство браузеров, и достаточно мощным, чтобы его можно было использовать для разработки целых сайтов. [ 7 ]
Конец первых браузерных войн
В 1998 году Netscape выпустила код Netscape Communicator под лицензией с открытым исходным кодом , что позволило тысячам разработчиков участвовать в улучшении программного обеспечения. Однако эти разработчики решили создать стандарт для Интернета с нуля, который послужил основой для разработки браузера с открытым исходным кодом и вскоре расширился до полноценной платформы приложений. [ 6 ] Был создан проект веб-стандартов , который способствовал обеспечению соответствия браузеров стандартам HTML и CSS . Такие программы, как Acid1 , Acid2 и Acid3, были созданы для проверки браузеров на соответствие веб-стандартам. В 2000 году для Mac был выпущен Internet Explorer, который стал первым браузером, полностью поддерживающим 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 ), а также новые JavaScript API но индивидуальный стандарт. [ когда? ] Хотя термин 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 , включая Википедию, используют прогрессивное улучшение, поскольку они остаются пригодными для использования даже при деактивации 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.
Оба эти подхода в настоящее время для многих веб-сайтов заменены инструментами более высокого уровня, ориентированными на приложения, такими как системы управления контентом . Они основаны на платформах кодирования общего назначения и предполагают, что существует веб-сайт, предлагающий контент в соответствии с одной из нескольких общепризнанных моделей, таких как блог с временной последовательностью , тематический журнал или новостной сайт, вики или пользовательский форум. Эти инструменты делают создание такого сайта очень простым и представляют собой чисто организационную и проектную задачу, не требующую какого-либо кодирования.
Редактирование самого контента (а также страницы шаблона) может осуществляться как средствами самого сайта, так и с использованием стороннего ПО. Возможность редактирования всех страниц предоставляется только определенной категории пользователей (например, администраторам или зарегистрированным пользователям). В некоторых случаях анонимным пользователям разрешено редактировать определенный веб-контент, что встречается реже (например, на форумах – добавление сообщений). Пример сайта с анонимным изменением — Arc.Ask3.Ru .
Технические коммуникации в веб-дизайне
Авторы исследовательской работы углубляются в то, что делает техническую коммуникацию эффективной. Они вводят метод измерения, называемый коэффициентом связи, который измеряет, насколько хорошо передаются сложные технические концепции. Они конкретно излагают три философии, которые, по их мнению, ведут к хорошему техническому общению:
- Философия 1: То, как мы общаемся, влияет на то, как другие воспринимают нашу работу. Они воспринимают нашу работу как более ценную и полезную, когда мы рассказываем о ней хорошо, и менее — когда мы рассказываем о ней плохо.
- Философия 2: Люди оценивают качество общения на основе множества личных факторов, включая их опыт, предпочтения, техническое образование, лингвистическое образование и членство в профессиональных группах.
- Философия 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, хотя степень их знаний у разных веб-дизайнеров будет разной. В частности, в небольших организациях одному человеку потребуются необходимые навыки для проектирования и программирования полной веб-страницы, в то время как в более крупных организациях может быть веб-дизайнер, отвечающий только за визуальный аспект.
Дополнительные работы, которые могут быть связаны с созданием веб-сайта, включают:
- Графические дизайнеры для создания визуальных эффектов для сайта, таких как логотипы, макеты и кнопки.
- Специалисты по интернет-маркетингу помогут поддерживать присутствие в Интернете с помощью стратегических решений по привлечению зрителей на сайт, используя методы маркетинга и продвижения в Интернете.
- SEO-писатели исследуют и рекомендуют правильные слова для включения в конкретный веб-сайт и делают веб-сайт более доступным и находимым в многочисленных поисковых системах.
- Интернет-копирайтер для создания письменного контента страницы, обращенного к целевым зрителям сайта. [ 1 ]
- Дизайнер пользовательского опыта (UX) включает в себя аспекты проектирования, ориентированного на пользователя, которые включают информационную архитектуру, ориентированный на пользователя дизайн, пользовательское тестирование, дизайн взаимодействия и иногда визуальный дизайн.
См. также
Связанные дисциплины
Примечания
- ^
<table>на основе разметки и разделителей .GIF- изображения
Ссылки
- ^ Jump up to: а б Лестер, Джорджина. «Различные работы и обязанности разных людей, участвующих в создании веб-сайта» . Искусство Уэльса, Великобритания . Проверено 17 марта 2012 г.
- ^ CPBI, Райан Шелли. «История дизайна веб-сайтов: 30 лет создания Интернета [обновление 2022 г.]» . www.smamarketing.net . Проверено 12 октября 2022 г.
- ^ «Большая биография» . Проверено 16 марта 2012 г.
- ^ «Браузер мозаики» (PDF) . Архивировано из оригинала (PDF) 2 сентября 2013 г. Проверено 16 марта 2012 г.
- ^ Цвикки, Эд; Купер, С; Чепмен, Д.Б. (2000). Создание интернет-брандмауэров . США: О'Рейли и партнеры. п. 804 . ISBN 1-56592-871-7 .
- ^ Jump up to: а б с д Нидерст, Дженнифер (2006). Коротко о веб-дизайне . Соединенные Штаты Америки: О'Рейли Медиа. стр. 12–14. ISBN 0-596-00987-9 .
- ^ Jump up to: а б Чепмен, Кэмерон, Эволюция веб-дизайна , шесть редакций, заархивировано из оригинала 30 октября 2013 г.
- ^ «Мультимедиа онлайн AMO.NET Америки (предварительная версия Internet Explorer 6)» . амо.нет . Проверено 27 мая 2020 г.
- ^ Jump up to: а б «Служба проверки разметки W3C» .
- ^ W3C. «Инициатива по обеспечению доступности веб-сайтов (WAI)» .
{{cite web}}: CS1 maint: числовые имена: список авторов ( ссылка ) - ^ «Что такое веб-дизайн?» . Фонд интерактивного дизайна . Проверено 12 октября 2022 г.
- ^ ТОРЛАЦИУС, ЛИСБЕТ (2007). «Роль эстетики в веб-дизайне» . Нордиком Обзор . 28 (28): 63–76. дои : 10.1515/нор-2017-0201 . S2CID 146649056 .
- ^ «Что такое веб-дизайнер? (Руководство 2022 года)» . БрэйнСтейшн® . Проверено 28 октября 2022 г.
- ^ Кастаньеда, Х.А. Франциско; Муньос-Лейва, Теодоро Луке (2007). «Модель веб-принятия (WAM): смягчение воздействия пользовательского опыта». Информация и управление . 44 (4): 384–396. дои : 10.1016/j.im.2007.02.003 .
- ^ «Создание отказоустойчивого интерфейса с использованием прогрессивного улучшения» . GOV.UK. Проверено 27 октября 2021 г.
- ^ «Внедрение индексации с приоритетом мобильных устройств» . Официальный блог Центра веб-мастеров Google . Проверено 9 июня 2018 г.
- ^ Стоун, Джон (16 ноября 2009 г.). «20 правил эффективной веб-типографики, которые можно и чего нельзя делать» . Проверено 19 марта 2012 г.
- ^ Консорциум World Wide Web: Понимание рекомендаций по доступности веб-контента 2.2.2: Пауза, остановка, скрытие
- ^ W3C ОК. «Мой веб-сайт стандартный! А ваш?» . Проверено 21 марта 2012 г.
{{cite web}}: CS1 maint: числовые имена: список авторов ( ссылка ) - ^ Кристенсен, Матиас Бильманн (16 ноября 2015 г.). «Обзор генераторов статических веб-сайтов: Джекилл, Миддлман, Рутс, Хьюго» . Разрушительный журнал . Проверено 26 октября 2016 г.
- ^ Соуси, Кайл, ваша домашняя страница делает то, что должна? , Usable Interface, заархивировано из оригинала 8 июня 2012 г.
- ^ Нильсен, Якоб (10 ноября 2003 г.), Десять наиболее нарушаемых правил дизайна домашней страницы , Nielsen Norman Group, заархивировано из оригинала 5 октября 2013 г.
- ^ Найт, Кайла (20 августа 2009 г.), Основные советы по созданию эффективной домашней страницы , шесть редакций, заархивировано из оригинала 21 августа 2013 г.
- ^ Спул, Джаред (29 сентября 2005 г.), Актуален ли дизайн домашней страницы? , Разработка пользовательского интерфейса, заархивировано из оригинала 16 сентября 2013 г.
- ^ Чепмен, Кэмерон (15 сентября 2010 г.), 10 советов по удобству использования, основанных на научных исследованиях , шесть редакций, заархивировано из оригинала 2 сентября 2013 г.
- ^ Гоча, Золтан, Миф № 17: Домашняя страница — ваша самая важная страница , заархивировано из оригинала 2 июня 2013 г.
- ^ Макговерн, Джерри (18 апреля 2010 г.), Упадок домашней страницы , заархивировано из оригинала 24 мая 2013 г.
- ^ Портер, Джошуа (24 апреля 2006 г.), Расстановка приоритетов во времени проектирования: подход «длинного хвоста» , Разработка пользовательского интерфейса, заархивировано из оригинала 14 мая 2013 г.
- ^ Спул, Джаред (6 августа 2007 г.), Подкаст «Инструменты юзабилити: Дизайн домашней страницы» , заархивировано из оригинала 29 апреля 2013 г.
- ^ Jump up to: а б Месснер, Кэти (22 апреля 2013 г.), Карусели изображений: Получение контроля над каруселью , Usability.gov, заархивировано из оригинала 10 октября 2013 г.
- ^ Джонс, Харрисон (19 июня 2013 г.), Слайдеры домашней страницы: плохо для SEO, плохо для удобства использования , заархивировано из оригинала 22 ноября 2013 г.
- ^ Ладжа, Пип (8 июня 2019 г.), Карусели изображений и слайдеры? Не используйте их. (И вот почему.) , CXL, заархивировано из оригинала 10 декабря 2019 г.
- ^ Алексей, Уолтер (2001). Карьера в веб-дизайне . Нью-Йорк: The Rosen Publishing Group, Inc., стр. 9–11 . ISBN 978-0-8239-3191-0 .
