Что такое веб-дизайн, его основные элементы, этапы и принципы | DesigNonstop

Веб-дизайн / Теория

215592

18-01-2011

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

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

2. Этапы веб-дизайна
Давайте рассмотрим подробнее из каких этапов состоит процесс создания веб-сайта. Детальное понимание процесса создания сайта даст нам возможность определить кто чем занимается на каждом этапе и кого исходя из этого называть веб-дизайнером.

1. Техническое задание (ТЗ)
Исходя из четкого понимания цели, для которой создается сайт, объемов сайта, его функциональности задаются основные параметры визуального представления и структуры сайта. Этап заканчивается после утверждения технического задания заказчиком. Занимается менеджер проекта.

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

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

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

5. Вебмастеринг
На этой стадии осуществляются действия, способствующие распространению и эффективной доставки сайта по сети. Включает размещение на хостинге и поисковую оптимизацию. Выполняется админом, вебмастером.

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

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

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

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

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

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

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

Поэтому для начала неплохо ознакомиться с теоретической частью. Одна толковая книжка даст вам общее представление об изучаемом предмете. Мне, например, в свое время очень помогла книжка Д. Кирсанова «Веб-дизайн». Более подробно о полезных книгах можно почитать в статье «10 самых популярных и полезных книг по дизайну, которые хорошо бы прочесть«.

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

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

Современная теория и практика веб-дизайна / Хабр

Далее распологается текст первого раздела моей дипломной работы «Юзабилити в web 2.0», написанием которой я сейчас занимаюсь. В данном разделе рассказывается о зарождении web-дизайна и приходе в эту области знаний и опыта HCI (human-computer-iteraction), как следствие, появлении юзабилити. И в конце информация о тенденциях в современном развитии веба.

Cодержание

• История развития веб-дизайна от технической графики до современных сайтов
• Зарождение идей о юзабилити сайтов
• Современный этап развития веба

История развития веб-дизайна от технической графики до современных сайтов

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

Первый в мире веб-сайт появился 6 августа 1991 года. http://info.cern.ch/ Его создатель Тим Бернерс-Ли (Tim Burners-Lee) опубликовал на нём описание новой технологии World Wide Web (WWW), основанной на протоколе передачи данных HTTP, системе адресации URI и языке гипертекстовой разметки HTML. Также на сайте были описаны принципы установки и работы веб-серверов и веб-браузеров. Сайт стал и первым в мире интернет-каталогом, так как позже Тим Бернерс-Ли разместил на нём список ссылок на другие сайты.

Вспомним, какими были первые сайты. Либо – аршинные красные буквы на бирюзовом фоне (сейчас такие сайты заводят школьники на narod. ru, да и то кажется пародией), либо – очень красивые, очень тяжелые и совершенно нефункциональные ресурсы. Явно дорогие. Явно сделаны профессионалами. Но – профессионалами в какой-то совершенно иной сфере. Красота и функциональность не находили точек соприкосновения. Уродство, правда, тоже – но уродливые сайты, по крайней мере, дешевле обходились владельцам.

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

С другой стороны, развитию дизайна мешала неразвитая технология. До сих пор в Интернете принимаются новые стандарты, расширяющие свободу деятельности для web-дизайнеров. Это и html 5, и CSS 3, а также развиваются такие технологии как Adobe Flash, Adobe Air, Microsoft Silverlight. На ранних же стадиях своего развития web представлял собой очень ограниченную информационную среду. В начале же HTML был прост: HTML-теги использовались только для того, чтобы указать — это заголовок, а это — абзац, и так далее.

А потом на свет появилась штука, называемая «графическим браузером» (NCSA Mosaic). Люди начали включать графические элементы графику в свои страницы. И они хотели, чтобы их страницы выглядели лучше, привлекательней, симпатичней. Тогда,HTML был расширен, чтобы включить теги моделирования, такие, как bold, strong, italicisized.

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

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

В 1996 году была издана очень влиятельная книга Дэвида Сигэла под названием «Creating Killer Web Sites», вскоре она стала бестселлером номер 1 на Amazon – немыслимое достижение для книги по web-дизайну.

Система раскладки страниц, описываемая в этой книге, в основном базировалась на использовании таблиц HTML и однопиксельных GIF’ов. Страница раскладывалась по сетке; содержимое, будь оно текстом или графикой, помещалось в ячейки этой сетки. Чтобы предотвратить «сворачивание» пустых ячеек таблицы, использовались прозрачные GIF’ы размером 1х1 пиксель. Сигэл (и не только он) пошел дальше, и предлагал использовать однопиксельные GIF’ы как средство управления разрывами между буквами в тексте, и для того, чтобы создавать отступы.

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

Зарождение идей о юзабилити сайтов

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

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

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

Одним из основоположников юзабилити стал Якоб Нильсен (Jacob Nielsen). Именно он выпустил в 1999 году книгу Designing web usability. The practice of simplicity (Веб-дизайн: книга Якоба Нильсена), которая стала одним из первых (и наиболее значимым на тот момент) руководством по созданию юзабильных сайтов.

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

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

Однако мысль о том, что это явилось сигналом конца Интернета, была преждевременной. Те компании, которые смогли предоставить полезные и удобные сервисы, выжили. Методы юзабилити и HCI доказали свою силу в предотвращении рисков проектирования. Кроме использования методов юзабилити для веб-сервисов, они также используются в проектировании мобильных систем. С конца 90-х годов мобильные устройства расширили способы, с помощью которых мы взаимодействуем с компьютерами и друг с другом. Мобильные телефоны, PDA (personal digital appliances) и беспроводные сети дали начало новой концепции вездесущей вычислительной техники: мир, в котором технология — повсюду, но она находится в фоне. Люди перестали быть пользователями одиночных, изолированных устройств, люди стали жителями цифровых сообществ. Очевидно, что системы, которые имеют такое фундаментальное влияние на способы нашего функционирования, не могут разрабатываться при помощи старых технологий. Человеко-центрированные системы требуют человеко-центрированного проектирования и это задача для юзабилити на следующую декаду.

Современный этап развития веба

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

Существует также популярное понятие Web 2.0, обобщающее сразу несколько направлений развития Всемирной паутины.

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

• Использование открытых API успешных проектов. возможности интернет-решений растут с каждым новым стартапом. Грядет время, когда разработчикам придется выбирать, либо предоставлять пользователям современные решения, построенные на сторонних сервисах, либо пытаться успевать за инновациями рынка, рассчитывая лишь на собственные силы.
  
  Пример создания фото-галереи, используя Flickr
  Пример интеграции сервиса статистики Google Analytics и CakePHP
  Список открытых API
• Использование AJAX, javascript и различных Фреймворков (напр., Microsoft Silverlight, Adobe Flash)
• Поддержка сайтами различных мобильных устройств
• Использование медиа-информации (потоковое видео, подкасты)
• Унификация авторизационных сервисов в крупных компаниях.