Веб-дизайн

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

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

Содержание
  • 1 История
    • 1.1 1988–2001
      • 1.1.1 Начало веб-дизайна и веб-дизайна
      • 1.1.2 Эволюция веб-дизайна
      • 1.1.3 Конец первого войны браузеров
    • 1.2 2001–2012
  • 2 Инструменты и технологии
  • 3 Навыки и методы
    • 3.1 Маркетинговый и коммуникационный дизайн
    • 3.2 Дизайн взаимодействия с пользователем и интерактивный дизайн
    • 3.3 Верстка страницы
    • 3.4 Типографика
    • 3.5 Анимированная графика
    • 3.6 Качество кода
    • 3.7 Генерируемый контент
      • 3.7.1 Статические веб-сайты
      • 3.7.2 Динамические веб-сайты
  • 4 Дизайн домашней страницы
  • 5 Профессии
  • 6 См. Также
    • 6.1 См. Также
    • 6.2 Связанные дисциплины
  • 7 Примечания
  • 8 Внешние ссылки
История
Книги по веб-дизайну в магазине

1988–2001

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

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

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

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

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

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

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

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

2001–2012 гг.

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

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

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

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

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

Навыки и методы

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

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

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

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

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

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

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

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

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

Typography

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

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

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

Анимированная графика

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Эксперты по юзабилити, включая Якоба Нильсена и Кайла Суси, часто подчеркивали дизайн домашней страницы для успеха сайта и утверждал, что домашняя страница - самая важная страница на веб-сайте. Нильсен, Якоб; Тахир, Мари (октябрь 2001 г.), Юзабилити домашней страницы: 50 разобранных сайтов, New Riders Publishing, ISBN 978-0735711020 Однако практикующие в 2000-е начал обнаруживать, что все большее количество посетителей веб-сайтов шло в обход домашней страницы, переходя непосредственно на страницы с внутренним содержанием через поисковые системы, электронные информационные бюллетени и RSS-каналы. Это заставляет многих практиков утверждать, что домашние страницы менее важны, чем думает большинство людей. В 2007 году Джаред Спул утверждал, что главная страница сайта была наименее важной страницей на сайте.

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

Профессии

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

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

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

См. также

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

Примечания
Внешние ссылки
Последняя правка сделана 2021-06-20 10:29:24
Содержание доступно по лицензии CC BY-SA 3.0 (если не указано иное).
Обратная связь: support@alphapedia.ru
Соглашение
О проекте