Веб-дизайн

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

Веб-дизайн в вид графического дизайна, направленный на разработку и оформление объектов информационной среды интернета, призванный обеспечить им высокие потребительские свойства и эстетические качества. Подобная трактовка отделяет веб-дизайн от веб-программирования, подчеркивает специфику предметной деятельности веб-дизайнера, позиционирует веб-дизайн как вид графического дизайна^[1].

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

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

Веб-дизайнер в сравнительно молодая профессия, и профессиональное образование в области веб-дизайна в России пока не распространено. В связи с увеличением спроса на интернет, растет и спрос на дизайн сайтов, увеличивается количество веб-дизайнеров.

Содержание

1 Объяснение термина
2 Формулировка задачи веб-дизайна
- 2.1 Создание технического задания
3 Этапы проектирования
4 Процесс и результат
5 Примечания
6 Литература
7 См. также
8 Ссылки

[править] Объяснение термина

В настоящее время под термином веб-дизайн понимают именно проектирование структуры веб-ресурса, обеспечение удобства пользования ресурсом для пользователей. Немаловажной частью проектирования ресурса в последнее время стало приведение ресурса в соответствие стандартам W3C, что обеспечивает доступность содержания для людей с ограниченными физическими возможностями и пользователей портативных устройств ^[2], а также кроссплатформенность ^[3] вёрстки ресурса. Также непосредственно с дизайном сайтов смежны маркетинг в Интернете (интернет-маркетинг), то есть, продвижение и реклама созданного ресурса, поисковая оптимизация.

[править] Формулировка задачи веб-дизайна

[править] Создание технического задания

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

[править] Этапы проектирования

Дизайн основной и типовых страниц сайта

Начинается работа с создания дизайна, обычно в графическом редакторе. Дизайнер создает один или несколько вариантов дизайна, в соответствии с техническим заданием. При этом отдельно создаётся дизайн главной страницы, и дизайны типовых страниц (например: статьи, новости, каталог продукции). Собственно «дизайн страницы» представляет собой графический файл, слоеный рисунок, состоящий из наиболее мелких картинок-слоев элементов общего рисунка.

При этом дизайнер должен учитывать ограничения стандартов html (не создавать дизайн, который затем не сможет быть реализован стандартными средствами html). Исключение составляет Flash-дизайн.

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

HTML-верстка

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

В небольших студиях, html-кодированием занимается дизайнер, создавший макет сайта.

Программирование

Далее готовые HTML-файлы передают программисту. Программирование сайта может осуществляться как «с нуля», так и на основе CMS в системы управления сайтом. Веб-разработчики часто называют CMS «движком».

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

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

Завершающим этапом разработки сайта под ключ является конечно же тестирование.

Веб-дизайн сайта должен адекватно выглядеть в различных браузерах, особенно в браузерах Internet Explorer, Firefox, Safari, Chrome и Opera.

Упомянутый Internet Explorer (версии 6) слишком по-своему трактует HTML-стандарты в отголоски старой борьбы за лидерство с Netscape. На данное время это морально устаревший браузер, который создает много проблем для веб-дизайнера. Многие разработчики предлагали отказаться от верстки под IE 6. Однако наличие этого браузера в стандартной поставке Windows XP, а значит и его присутствие на половине пользовательских компьютеров, вынуждает веб-дизайнеров тестировать свои проекты в нём.

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

Сроки контролирует менеджер проекта. Так же на этом этапе привлекают к работе дизайнера, чтобы он провел авторский надзор.

Размещение сайта в Интернет

Файлы сайта размещают на сервере провайдера и производят нужные настройки. На этом этапе сайт пока закрыт для посетителей.

Наполнение контентом и публикация

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

Внутренняя SEO-оптимизация.

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

Внешняя SEO-оптимизация.

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

Сдача проекта

Заказчик или его доверенное лицо просматривают готовый проект и в случае, если все устраивает, то подписывают документы о сдаче проекта.

Так же на этом этапе производится обучение представителя заказчика навыкам работы в администраторской зоне сайта.

[править] Процесс и результат

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

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

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

Изображение первоначально может быть векторным или растровым, выполненным в Adobe Illustrator, Adobe Photoshop, GIMP или другом визуальном редакторе (например, Scribus или Inkscape), но для верстальщика изображение, как правило, переводится в растровый формат.

Для демонстрации клиенту изображение обычно переводится в простой однослойный и привычный формат изображений.

[править] Примечания

в‘ Бородаев Д. В. Веб-сайт как объект графического дизайна. Монография. в Х.: «Септима ЛТД», 2006. в 288 с. в Библиогр.: с. 262в286
в‘ см. юзабилити («удобство использования»)
в‘ В данном случае в т. н. кросс-браузерность

[править] Литература

Якоб Нильсен, Кара Перниче Веб-дизайн: анализ удобства использования веб-сайтов по движению глаз = Eyetracking Web Usability. в М.: «Вильямс», 2010. в С. 480. в ISBN 978-5-8459-1652-5
Якоб Нильсен Веб-дизайн. в СПб.: Символ-Плюс, 2003. в 512 с. в ISBN 5-93286-004-9
Якоб Нильсен, Хоа Лоранжер Web-дизайн: удобство использования Web-сайтов = Prioritizing Web Usability. в М.: «Вильямс», 2007. в С. 368. в ISBN 0-321-35031-6
Роббинс Д. Web-дизайн. Справочник. в "КУДИЦ-ПРЕСС", 2008. в С. 816. в ISBN 978-5-91136-039-9
Гончаров А. Ю. Web-дизайн: HTML, JavaScript и CSS. Карманный справочник. в "КУДИЦ-ПРЕСС", 2007. в С. 320. в ISBN 978-5-91136-024-5
Бородаев Д. В. Веб-сайт как объект графического дизайна. Монография. в Х.: "Септима ЛТД", 2006. в С. 288. в ISBN 996-674-026-5

[править] См. также

[править] Ссылки

W3C в Web Standards (англ.)
Веб-дизайн в каталоге ссылок Open Directory Project (dmoz).

.

[0] в‘ Бородаев Д. В. Веб-сайт как объект графического дизайна. Монография. в Х.: «Септима ЛТД», 2006. в 288 с. в Библиогр.: с. 262в286

[1] в‘ см. юзабилити («удобство использования»)

[2] в‘ В данном случае в т. н. кросс-браузерность

[1]

[2]

[3]

Веб и веб-сайты
Глобально	Всемирная паутина (Веб 1.0 Веб 2.0 Web 3.0) Семантическая паутина Рунет
Локально	Сайт Портал Страница Служба Кольцо
Виды сайтов и сервисов	Виртуальный атлас Баннерная сеть Блог (платформа) Видеохостинг Энцикло (хостинг список движков список сайтов) Сайт-визитка Вопрос-ответ Закладки Службы знакомств Каталог ресурсов Интернет-магазин Микроблог Тамблелог Новостной сайт Поисковая система (список) Порносайт Социальная сеть BitTorrent-трекер Файлообменник Форум (Сервис Имиджборд) Фотохостинг Чат
Создание и обслуживание	Разработка Мастер Дизайн Вёрстка Программирование Юзабилити Модератор Системный администратор Поисковая оптимизация (SEO) Продвижение сайта Опыт взаимодействия Регистрация пользователя
Типы макетов, страниц, сайтов	Статический Динамический Фиксированный Резиновый Динамично эластичный
Техническое	Веб-сервер (сравнение) Браузер (список сравнение) CMF (список) CMS (список) HTTP (ответы заголовки) SPDY CGI HTML XHTML CSS JavaScript DHTML DOM XML AJAX JSON Flash RSS Atom Микроформат favicon.ico robots.txt Sitemaps Карта сайта .htaccess
Маркетинг	Интернет-маркетинг Интернет-реклама Баннер Контекстная реклама
Социум и культура	Блогосфера Интернет-сообщество (районное) Сетевая литература

Веб-дизайн

Содержание

[править] Объяснение термина

[править] Формулировка задачи веб-дизайна

[править] Создание технического задания

[править] Этапы проектирования

[править] Процесс и результат

[править] Примечания

[править] Литература

[править] См. также

[править] Ссылки

Личные инструменты

Пространства имён

Варианты

Просмотры

Действия

Поиск

Навигация

Участие

Печать/экспорт

Инструменты

На других языках