GetInfo.Ru – Компьютерная библиотека
Последние поступления
Как выбрать систему управления базы данных
Базы данных03/09/14
Этапы загрузки UNIX (в схеме)
Unix27/03/12
Gatewall Antispam: тотальный контроль электронной почты
Спам21/04/11
Мастер-класс: создаем Интернет-магазин (Часть 1)
Обзоры ПО20/04/11
CorelDRAW Graphics Suite X5: Что нового?
Обзоры ПО20/07/10
Добавить статью
Самые читаемые материалы
Подбор гармоничных цветов(39232)
Колористика(22039)
Основы веб-дизайна(17525)
Шрифт. История шрифта(15909)
Пиктограммы для сайта - это просто!(15494)
Всего статей: 793Всего авторов: 364Подразделов: 47Добавлено за сутки: 0
Статьи  СТАТЬИ Форум  ФОРУМ Рейтинг  РЕЙТИНГ Поиск  ПОИСК Контакты  КОНТАКТЫ
» Главная » Основы дизайна » Основы веб-дизайна

Основы веб-дизайна


Татьяна Вукс
nundesign@ukr.net
http://www.nundesign.com/

Страницы: [ 1 ] [ 2 ]

С чего начинается веб-дизайн?
На днях барышня-сотрудница обратилась ко мне со скромной просьбой - научить ее web-дизайну. И, хотя мой опыт работы в этой отрасли исчисляется годами, причем не только в дизайне, но и в предоставлении информации о нем... - я растерялась. Я не знаю, с чего начать. Порекомендовала прочесть ряд полезных книг, в частности - "Веб-дизайн" Дмитрия Кирсанова - книга, полезная как начинающим, так и имеющим опыт разработчикам, "HTML в Web-дизайне" Алексея Петюшкина (подробнее об этой книге вы можете узнать на сайте автора - http://www.alpet.spb.ru/books.shtml), несколько интересных учебников по работе с графикой...

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

С чего начинался мой опыт? С четвертого Adobe PhotoShop и CorelDraw, с 32Mb оперативной памяти, с рекламы и полиграфии, впрочем, как и у многих в тех уже далеких *95-96 годах. Визитки, рекламные буклеты, обложки на кассеты, позже - на компакт-диски, далее - скины и интерфейсы для локальных программ, иконки и 16-цветные кнопочки - волшебный простор для фантазии. Заказ на первый сайт.

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

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

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

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

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

В дальнейшем мы подробнее рассмотрим все вопросы, которые касаются непосредственно разработки и сборки страниц. Язык html/shtml, браузеры, их особенности и отличия в интерфейсе и визуализации web-документов, языки и кодировки, инструменты для верстки и обработки графики, языки и кодировки, элементы программирования, оптимизации и раскрутки сайтов. Это все - технологические проблемы. Однако разработка дизайна сайта никогда не начинается с верстки документов. А начинается она...

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

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

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

  • Презентационные
  • корпоративные
  • информационные
  • электронные магазины

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

После того, как вы определили тип будущего проекта (в нашем случае это домашняя страница, или - Авторский Сайт, и, следовательно, ЦА такого проекта - это ваши родственники, друзья и знакомые) следует тщательно проанализировать содержание (и объемы содержания) проекта. Вся информация, которая будет представлена на сайте, обязательно должна быть структурирована до того, как вы нарисуете эскиз первой кнопки. Разделы, подразделы, дополнительные разделы - сформируйте дерево вашей информационной структуры, определите вложенности документов, оцените степень сложности переходов. Карандашом на бумаге или в документе word, где вам будет удобнее - вы должны увидеть эскиз информационной модели вашего проекта. Как может в не очень сложном случае такая модель выглядеть - мы писали еще году эдак в 2001 в материале Эмоции 1. РАЗРАБОТКА СТРУКТУРЫ САЙТА.

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

Модульные сетки
Итак, первый урок с ученицей был проведен вполне успешно, мы рассмотрели вопросы "что же это такое - сайт?" и какие типы сайтов вообще бывают в зависимости от его целей, задач, объема информации и его целевой аудитории.

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

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

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

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

 
25.02.2005
Версия для печати Версия для печати Запомнить ссылку Запомнить ссылку
Ваша оценка:  1   2   3   4   5     

 О проектеПерепечаткаАвторамПартнерыО нас пишут
Наверх
©2003—2007. GETINFO.RU. ВСЕ ПРАВА ЗАЩИЩЕНЫ.