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

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

7.1. Особенности дизайна сайта

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

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

Дизайнер думает, что его творение будут смотреть вот так
Рис. 37. Дизайнер думает, что его творение будут смотреть вот так (а),
пользователь поступает иначе (б).

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

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

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

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

Какие е же принципы необходимо помнить при создании вашего дизайн-макета?

7.2. Основы навигации

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

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

Перемещаясь по сайту мы можем построить карту, в которой каждой странице будет соответствовать прямоугольник, а стрелки показывать взаимосвязь отдельных страниц. Таким образом мы можем увидеть топологию сайта. По типу топологии можно разделить сайты на несколько групп (рисунок 38):

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

Топология сайтов
Рис. 38. Топология сайтов.

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

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

Главное меню
Рис. 39. Главное меню. Обратите внимание, как выделен раздел,
в котором мы находимся в данный момент.

Вспомогательное меню может состоять уже из достаточно большого числа объектов. Если ссылок много - группируйте их по какому-нибудь значимому признаку. На рисунке 40 показаны разные варианты вспомогательного меню: (1) - вспомогательное меню раздела «О компании». (2) - пример группы ссылок, они не только взяты в рамку, но и еще озаглавлены. (3) - еще одна группа, все ссылки снабжены маркерами, которые облегчают визуальное разделение отдельных объектов. При наведении мыши, ссылка меняет цвет.

Обратите также внимание, что все ссылки внутри документа выглядят единообразно. Посетитель не должен задумываться о том, где он может щелкнуть мышью, а где нет.


Вспомогательные меню
Рис. 40. Вспомогательные меню (они взяты из разных фрагментов сайта).

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

Строка с кнопками интерактивных сервисов
Рис. 41. Строка с кнопками интерактивных сервисов.

Термин «хлебные крошки» пришел к нам из сказки, в которой девочка давала брату мешочек с камнями. В мешке была небольшая дырка и камешки высыпались на землю. По этим камням девочка легко находила брата. Но вот в один прекрасный день вместо камней оказались хлебные крошки, птицы склевали их.
Под этим термином в интернете понимается путь, показывающий, как человек попал на данную внутреннюю страницу (рисуно 51)

Хлебные крошки
Рис. 42. Хлебные крошки показывают, что мы находимся на странице посвященной жидкокристаллическим телевизорам и позволяют быстро перейти на верхние уровни сайта.

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

7.3. Основы композиции

Большинство интернет-страниц состоят из четырех областей:

  • шапка - здесь располагается название компании логотип, название страницы, визуал;
  • главное меню;
  • контентная область - место, где собственно располагается информация;
  • подвал - место, где дублируется главное меню (в виде текстовых гиперссылок), контактная информация.

Можно выделить несколько способов для размещения этих объектов на странице (рисунок 52), каждый из которых, в свою очередь порождает бесчисленное количество вариантов.

Варианты расположения объектов на странице
Рис. 43. Варианты расположения объектов на странице.

Размышляя над размещением вашей информации на странице можно найти много шаблонов, размещенных в сети Интернет (Например, на сайте http://www.templatebest.ru/ или http://www.cityindex.ru). Многие из них бесплатны, но все же постарайтесь уйти от шаблонов. И дело не в том, что представленные варианты плохи, многие из них выполнены вполне профессионально (рисунок 53).

 Шаблон интернет-страницы
Рис. 44. Шаблон интернет-страницы, взятый с сайта www.templatebest.ru/

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

Попробуйте создать свою композицию.

  • Разместите на холсте вашего графического редактора основные объекты: логотип, название, заголовок, меню, фрагменты текста настоящего или выдуманного), фотографии.
  • Сделайте так, чтобы страница правая часть страницы не «перевешивала» левую.
  • Продумайте цветовое решение. Выберите основной цвет, который будет главным на вашей странице. -вет фона, ссылок, разделительных полос должен сочетаться с выбранным цветом. Для подбора цвета можно использовать очень удобную утилиту ColorImpact или миксер цветов, встроенный в программу CorelDRAW
  • Не бойтесь пустого пространства, пусть у вас останутся поля. Такую информацию легче воспринимать, а страница окажется более легкой, воздушной.
  • Продумайте «визуал» - то есть главное изображение, которое будет нести основную идею страницы. Не стоит брать изображение из бесплатных коллекций. С распространением цифровых фотоаппаратов сделать нужное изображение, а после обработать его в графическом редакторе совсем не сложно.
  • Старайтесь уходить от шапки, с фотографией, повторяющейся на каждой странице. Едва ли посетителю сайта доставит удовольствие смотреть на нее постоянно.
  • Продумайте графические объекты, которые не располагаются в отведенных для них прямоугольниках, а органически вписываются в вашу страницу. Это сделает ваш макет более живым, интересным.

Создав макет проверьте его «на прочность»:

  • Предложите вашему знакомому взглянуть на него, куда он бросит взгляд в первую очередь, куда он захочет щелкнуть мышкой?
  • Попробуйте вставить в ваш макем текст большего объема наполненный графической информацией или наоборот, текст совсем без графики. Изменилось ли восприятие, стало ли труднее читать выделять главное.
  • Что произойдет с вашим макетом, если посмотреть не него на компьютере с другим разрешением монитора, будет ли он «тянуться»?

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

7.4. Настройка графических программ

Создавая дизайн-макет в CorelDraw выполните несколько простых действий:
Настройте параметры страницы (меню Layout - Page Setup) установите

  • разрешение вашей страницы 96 dpi;
  • единицу измерения - пиксель;
  • размер страницы 1000 пикселей по ширине, 610 пикселей по высоте (это примерный размер области видимой в окне браузера при разрешении 1024 на 768 пикселей);
  • нажмите кнопку «Добавить рамку страницы» (вам легче будет выравнивать объекты на вашем холсте, к тому же рамку можно использовать в качестве фона вашей страницы);

 Настройка параметров страниц в CorelDRAW
Рис. 45. Настройка параметров страниц в CorelDRAW 12.

Настройте направляющие

  • включите видимость линеек (меню View - Rulers);
  • измените точку отсчета (перетащите точку из левого верхнего угла линеек в левый верхний угол вашего холста. В результате левый верхний угол получит координаты 0х0, вам будет легче отмерять расстояния на вашей странице);
  • включите привязку к направляющим (меню View - Snap to Guidelines);
  • Создайте направляющие на станице. Для этого зацепите мышкой за вертикальную линейку, и тащите ее влево. Вслед за мышью будет двигаться пунктирная линия - это направляющая. Она будет не видна при печати, но к ней будут выравниваться объекты на странице. С помощью таких вертикальных и горизонтальных направляющих удобно делать опорную сетку вашей страницы.

 Настройка направляющих в CorelDRAW
Рис. 46. Настройка направляющих в CorelDRAW 12.

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

Практические задания:

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

Вопросы для самоконтроля:

  1. В чем отличие восприятия информации на интернет-странице и в глянцевом журнале?
  2. Для каких сайтов характерна линейная топология?
  3. Что означает термин «юзабилити»?
  4. Почему нежелательно пользоваться бесплатными шаблонами, представленными в сети интернет?
  5. Какие размеры страницы нужно выставлять в графических программах при проектировании дизайна сайта?
  6. В каком формате необходимо сохранять дизайн-макет?