Веб-дизайн (от англ. web design) — отрасль и разновидность дизайна, в задачи которой входит проектирование пользовательских (веб-интерфейсов) для сайтов или веб-приложений.
Веб-дизайнеры:
- проектируют логическую структуру веб-страниц;
- продумывают (наиболее удобные) решения подачи информации;
- занимаются (художественным оформлением) веб-проекта.
В результате пересечения двух отраслей человеческой деятельности грамотный веб-дизайнер должен быть знаком с новейшими веб-технологиями и обладать соответствующими художественными качествами. Большая часть специалистов, работающих в области дизайна, обычно концентрирует в себе такое творческое образование, как студия дизайна.
Веб-дизайнер — сравнительно молодая профессия, и профессиональное образование в области веб-дизайна в России пока не распространено. В связи с увеличением спроса на представительство в Сети растёт и спрос на дизайн сайтов, увеличивается количество веб-дизайнеров. В настоящее время услуги веб-дизайна предоставляют как веб-студии, так и частные лица ((веб-дизайнеры), являющиеся фрилансерами).
Объяснение термина
Веб-дизайн — вид графического дизайна, направленный на разработку и оформление объектов информационной среды Интернета, призванный обеспечить им высокие потребительские свойства и эстетические качества. Подобная трактовка отделяет веб-дизайн от (веб-программирования), подчёркивает специфику предметной деятельности веб-дизайнера, позиционирует веб-дизайн как вид графического дизайна.
В настоящее время под термином веб-дизайн понимают именно проектирование структуры веб-ресурса, обеспечение (удобства пользования) ресурсом для пользователей.
Немаловажной частью проектирования ресурса в последнее время стало приведение ресурса в соответствие стандартам (W3C), что обеспечивает доступность содержания для инвалидов и пользователей портативных устройств (смотри (юзабилити) — «удобство использования»), а также кроссплатформенность (в данном случае — так называемая (кросс-браузерность)) вёрстки ресурса. Также непосредственно с дизайном сайтов смежны маркетинг в Интернете ((интернет-маркетинг)), то есть продвижение и реклама созданного ресурса, поисковая оптимизация.
Процесс и результат
Уникальный дизайн стоит дороже, но и предполагает отрисовку с нуля, полностью уникальную разработку под конкретный заказ. В зависимости от профессионализма и/или политики компании веб-дизайнер либо разрабатывает идею и концепцию дизайна полностью самостоятельно, либо получает ряд требований (цвет, стиль и тому подобное), ожиданий и идей от заказчика или (творческого директора) (арт-директора) и старается держаться этого направления при разработке макета. Большинство заказчиков ошибочно отождествляют веб-дизайнера и веб-мастера, поручая ему и публикацию сайта.
Иногда дизайнер может предложить дизайн-решение на основе (шаблонов) (своих или даже чужих), это ускоряет работу и обойдётся заказчику дешевле. Некоторые дизайнеры даже специализируются на изготовлении дизайн-макетов для продажи в качестве готовых шаблонов, которые затем могут быть куплены и использоваться менее опытными дизайнерами или (веб-мастерами) для изготовления типовых сайтов (по сути, без уникального дизайна). Иной раз разработкой веб-дизайна называют небольшую перекомпоновку и адаптацию такого шаблона под конкретный заказ.
Конечным продуктом работы веб-дизайнера является дизайн-макет: картинка, представляющая предполагаемый будущий внешний вид страниц сайта. Картинка эта является многослойной, где, на усмотрение дизайнера, почти каждая деталь — отдельный слой, приложенный к другим слоям-картинкам, за счёт чего может легко выполняться доработка, замена, перекомпоновка и другие задачи. В зависимости от идеи и целей макет может включать фотографии, сложные коллажи, иллюстрации, текстовые слои, уникальные (иконки). Для главной страницы и внутренних иногда рисуются отдельные макеты с дополнениями или изменениями в соответствии с тематикой страницы.
Изображение первоначально может быть (векторным) или растровым, выполненным в (Adobe Illustrator), (Adobe Photoshop), (GIMP) или другом (визуальном редакторе) (например, (Scribus) или Inkscape), но для верстальщика изображение, как правило, переводится в растровый формат).
К 2021 году устоялась несколько изменённая парадигма, в которой конечным продуктом веб-дизайнера является дизайн-макет не в виде изображения, а в виде интерактивного поля, с преимущественно векторной графикой, которая управляется дизайнером как в графическом редакторе. В то же время все манипуляции элементов интерактивного поля описываются в виде каскадных таблиц со стилями CSS, которые используются верстальщиками. Таким образом работают например (Figma), (Sketch) и др).
Для демонстрации клиенту так же подходит единая ссылка из указанного выше приложения, где кроме статичного отображения, дизайн может быть представлен в виде интерактивного прототипа.
Дизайн домашней страницы
Эксперты по юзабилити, в том числе (Якоб Нильсен) и Кайл Суси, часто подчёркивали важность дизайна домашней страницы для успеха веб-сайта и утверждали, что домашняя страница является самой важной страницей на веб-сайте. Однако практики в 2000-е годы начали обнаруживать, что всё большее количество посетителей веб-сайтов шло в обход домашней страницы, переходя непосредственно на страницы со внутренним содержанием через поисковые системы, электронные информационные бюллетени и RSS-каналы. Это заставляет многих практиков утверждать, что домашние страницы менее важны, чем думает большинство людей. В 2007 году Джаред Спул утверждал, что главная страница сайта на самом деле является наименее важной страницей на сайте.
В 2012 и 2013 годах карусели (также называемые «слайдерами» и «вращающимися баннерами») стали чрезвычайно популярным элементом дизайна на домашних страницах, часто используемым для демонстрации избранного или недавнего контента в ограниченном пространстве. Многие практики утверждают, что карусели являются неэффективным элементом дизайна и наносят ущерб поисковой оптимизации и удобству использования веб-сайта.
Инструменты и технологии
Веб-дизайнеры используют множество различных инструментов в зависимости от того, в какой части производственного процесса они участвуют. Эти инструменты со временем обновляются новыми стандартами и программным обеспечением, но принципы, лежащие в их основе, остаются прежними. Веб-дизайнеры используют редакторы векторной и растровой графики для создания изображений в веб-формате или прототипов дизайна. Технологии, используемые для создания веб-сайтов, включают стандарты W3C, такие как HTML и CSS, которые можно закодировать вручную или сгенерировать с помощью программного обеспечения для редактирования WYSIWYG. Другие инструменты, которые могут использовать веб-дизайнеры, включают валидаторы разметки и другие инструменты тестирования на удобство использования и доступность, чтобы убедиться, что их веб-сайты соответствуют рекомендациям по доступности в Интернете.
См. также
- Вёрстка веб-страниц
- Веб-разработка
- Графический дизайн
- (Адаптивный веб-дизайн)
- (Юзабилити)
Примечания
- Бородаев Д. В. Веб-сайт как объект графического дизайна. Монография. — Х.: «Септима ЛТД», 2006. — 288 с. — Библиогр.: с. 262—286
- Soucy, Kyle, Is Your Homepage Doing What It Should?, Usable Interface, 8 июня 2012 . Дата обращения: 5 января 2022. Архивировано 8 июня 2012 года.
- Spool, Jared (2005-09-29), Is Home Page Design Relevant Anymore?, User Interface Engineering, 16 сентября 2013 оригинала 16 сентября 2013 года. . Дата обращения: 5 января 2022. Архивировано из
- Chapman, Cameron (2010-09-15), 10 Usability Tips Based on Research Studies, Six Revisions, 2 сентября 2013 . Дата обращения: 5 января 2022. Архивировано 2 сентября 2013 года.
- Myth #17: The homepage is your most important page, 2013-06-02, 29 декабря 2021, Дата обращения: 5 января 2022 . Дата обращения: 5 января 2022. Архивировано 29 декабря 2021 года.
- McGovern, Gerry (2010-04-18), The decline of the homepage, 24 мая 2013 . Дата обращения: 5 января 2022. Архивировано 24 мая 2013 года.
- Spool, Jared (2007-08-06), Usability Tools Podcast: Home Page Design, 29 апреля 2013 оригинала 29 апреля 2013 года. . Дата обращения: 5 января 2022. Архивировано из
- Messner, Katie (2013-04-22), Image Carousels: Getting Control of the Merry-Go-Round, Usability.gov, 10 октября 2013 . Дата обращения: 5 января 2022. Архивировано 10 октября 2013 года.
- Jones, Harrison (2013-06-19), Homepage Sliders: Bad For SEO, Bad For Usability, 22 ноября 2013 . Дата обращения: 5 января 2022. Архивировано 22 ноября 2013 года.
- The W3C Markup Validation Service . validator.w3.org. Дата обращения: 5 апреля 2022. 22 февраля 2011 года.
- W3C Web Accessibility Initiative (WAI). Home (англ.). Web Accessibility Initiative (WAI). Дата обращения: 5 апреля 2022. 5 апреля 2022 года.
Литература
- П. Макнейл. Веб-дизайн. Идеи, секреты, советы = The Web Designer's Idea Book, Vol. 2: More of the Best Themes, Trends and Styles in Website Design. — П.: «Питер», 2011. — С. 272. — .
- Дж. Берд. Веб-дизайн. Руководство разработчика = The Principles of Beautiful Web Design, 2nd Edition. — П.: «Питер», 2012. — С. 224. — .
- (Якоб Нильсен), Кара Перниче. Веб-дизайн: анализ удобства использования веб-сайтов по движению глаз = Eyetracking Web Usability. — М.: «Вильямс», 2010. — С. 480. — .
- (Якоб Нильсен). Веб-дизайн. — СПб.: Символ-Плюс, 2003. — 512 с. — .
- (Якоб Нильсен), Хоа Лоранжер. Web-дизайн: удобство использования Web-сайтов = Prioritizing Web Usability. — М.: «Вильямс», 2007. — С. 368. — .
- Роббинс Д. Web-дизайн. Справочник. — "КУДИЦ-ПРЕСС", 2008. — С. 816. — .
- Гончаров А. Ю. Web-дизайн: HTML, JavaScript и CSS. Карманный справочник. — "КУДИЦ-ПРЕСС", 2007. — С. 320. — .
- Бородаев Д. В. Веб-сайт как объект графического дизайна. Монография. — Х.: "Септима ЛТД", 2006. — С. 288. — .
Ссылки
- World Wide Web Consortium (W3C) (англ.)
- Webdesign Köln
- Веб-дизайн в каталоге ссылок Curlie (dmoz)
Википедия, чтение, книга, библиотека, поиск, нажмите, истории, книги, статьи, wikipedia, учить, информация, история, скачать, скачать бесплатно, mp3, видео, mp4, 3gp, jpg, jpeg, gif, png, картинка, музыка, песня, фильм, игра, игры, мобильный, телефон, Android, iOS, apple, мобильный телефон, Samsung, iphone, xiomi, xiaomi, redmi, honor, oppo, nokia, sonya, mi, ПК, web, Сеть, компьютер