Лабораторная работа №6 <графика> (стр. 1 )

ЛАБОРАТОРНАЯ РАБОТА №6

<ГРАФИКА>

ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ

Web-графика (типы изображений и форматы графических файлов)

Очень непросто за один урок рассказать о том, как создавать дизайн сайта. Для успешной работы 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/