Разработка и дизайн Web-магазина

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

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

На данный момент в зависимости от контекста можно определить такие типы дизайна:

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

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

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

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

- "смешанные" типы - комбинация всех этих типов.

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

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

Достоинства:

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

- заполнено все пространство дисплея, отсутствует нежелательное свободное место, наличие которого часто планируется разработчиками страниц с фиксированными размерами;

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

Недостатки:

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

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

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

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

Достоинства:

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

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

Недостатки:

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

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

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

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

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

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

2.3 Правило оформления текста

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

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

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

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

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

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

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

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

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

При выборе шрифта необходимо принимать во внимание следующие рекомендации:

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

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

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

3) не следует заполнять страницы избыточным количеством графических материалов.

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

2.4 Подбор цвета

При создании сайтов важно уметь правильно подбирать цвета различных элементов web-страницы, чтобы они смотрелись цельно и гармонично.

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

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

Основанная на представлении цвета человеком, модель HSB описывает цвет тремя основными характеристиками: оттенком, насыщенностью, яркостью.

Оттенком называют лучи света, отраженные от объекта или прошедшим сквозь него. На цветовом круге выражается в градусах от 0° до 360°.

Насыщенность (Saturation) обозначает видимую яркость, или интенсивность цвета. Насыщенность определяет количество серого цвета в оттенке, измеряется в процентах от 0% (серый) до 100% (полная насыщенность).

Яркость (Brightness) зависит в основном от количества световых лучей, отраженных поверхностью данного цвета, что равно его яркости по отношению к другим цветам при данном освещении. Обычно измеряется в процентах от 0% (черный) до 100% (белый).

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

1) для привлечения внимания используются контрастные цвета, остальные цвета будут находиться в их диапазоне.

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

Использование модели RGB неудобно и приведено лишь для примера. Более простой способ подбора контрастных цветов связан с моделью HSB:

1) выбирать любой нужный цвет, например, оранжевый #FFCC33 (45, 80, 100 в HSB).

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

3) вводится значение 225 в поле оттенка (45+180) и получается новый цвет (225, 100, 80 в HSB).

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

Нюансовыми цветами называются цвета близкие по оттенку, но различающиеся по насыщенности и яркости.

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

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

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

«Здоровые», из американской психологии. Чистота, здоровье, уверенность, семья (соя, кукуруза) и т.д.

«Природные», близкие к естественным органическим, природным компонентам.

Как вариант использования цвета - «Растяжки». Обычно тональные оттенки одного цвета, и как акцент - более активный цвет.

Есть и нестандартные цветосочетания: розовый с черным, желтый и зеленый и другие. В таких случаях, важна сама идея, а также конкретное ее воплощение. При осуществлении своей идеи средствами цвета стоит довериться своим эмоциональным ощущениям.

2.5 Макет страницы

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

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

Макеты отражают только информацию; они не включают визуальный дизайн. Макет может быть простым, показывая только компоновку содержимого и навигацию по нескольким основным страницам сайта. Сложные макеты показывают тексты, некоторые функциональные возможности, ссылки, навигацию и графическое содержимое в более детальной форме. Макеты отражают больше, чем просто своё содержимое. Они могут показывать также производственные спецификации и основные функциональные возможности (DHTML, JavaScript и так далее).

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

Для облегчения задачи создания макетов используется следующий контрольный список:

- изображения/ чертежи/ иллюстрации.

- контент (общее направление содержимого или фактический текст, если он готов).

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

- функциональные возможности (описание основных функциональных возможностей страницы).

- первичные ссылки (предполагаемая навигация).

- вторичные ссылки.

- мультимедиа (если есть).

- целевой размер окна (например, 800х600; фактически очертить область и указать размеры в пикселах).

- данные для заголовка и подвала (название проекта, название страницы, номер версии, дата, авторское право).

2.6 Использование правил web-дизайна при создании Web-магазина

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

Так как на контент магазина возлагалась не очень большая смысловая нагрузка, то в его оформлении был использован «интерфейсный» и «динамический дизайн».

ЗАКЛЮЧЕНИЕ

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

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

Кроме этого большое количество казахстанских виртуальных магазинов (торговый портал www .kupida .kz - магазин имеет широкий перечень электронных товаров (бытовая техника, компьютеры и средства элекросвязи); Internet- маркет www.sim-sim.kz - виртуальная торговая площадка, спроектированная для сдачи виртуальных торговых площадей в аренду партнерам - офлайновым продавцам; my . shops . kz -универсальный интернет-магазин, в котором представлены более сорока категорий товаров, относящиеся к офисным компьютерам, комплектующим к ним, носители информации, ноутбуки, расходные материалы и т. п.; Bazar . kz - услуги доступа к Интернету, сотовые телефоны, аудио- и видеопродукция, компьютеры и телекоммуникационное оборудование, безалкогольные напитки, цветы, бытовая техника; Press . kz - книжный магазин; витрина www .vitrina .kz - виртуальный магазин с довольно небольшим выбором лицензионной аудио и видео продукции; Intershop . kz - торгует цифровыми товарами с мгновенной доставкой: PIN -кодами для доступа к услугам операторов мобильной связи, IP -телефонии; и др.) на данный момент являются лишь каталогами: при оформлении покупки они высылают пользователю счет, который нужно самостоятельно оплатить, придя в банк. При этом теряется одно из главных достоинств электронной коммерции - возможность купить какой-либо товар не выходя из дома. Среди них существуют и компании, которые сумеют правильно организовать свой интернет-магазин и получать реальную прибыль. За рубежом же действует еще большее количество интернет-магазинов.

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

Правовое положение Интернет- и сервис-провайдеров регулируется законом «О связи» который вводит ряд важных понятий (сети электросвязи, сети связи общего пользования, оператор связи), а также устанавливает критерии построения сетей связи общего пользования, качества услуг связи, вводит институт тайны связи , основания ответственности при осуществлении деятельности в области связи , порядок предъявления претензий и исков. Также законом «Об информации, информатизации и защите информации» (в части функционирования информационных систем и защиты информации) и Законом «О сертификации продукции и услуг» (в части сертификации услуг, предусмотренным предыдущим законом). К тому же деятельность Интернет- и сервис-провайдеров является обеспечивающей совершение сделок, поскольку без них теряется сама основа электронного бизнеса - Интернет.

Ключевыми правовыми вопросами являются статус электронного документа (его юридическая и доказательственная сила), порядок использования электронной цифровой подписи, условия обеспечения безопасности обмена, а также ряд других. До недавнего времени, законодательные нормы по данному вопросу были разрознены и не обеспечивали должным образом электронный документооборот. Но вступление в законную силу с середины 2003 г. «Закона об электронной подписи и электронном документообороте» должно благотворно отразиться на развитии казахстанского рынка торговли через Интернет.

Другими словами, интернет-магазины, а также другие виды проявления электронной коммерции должны занять свое место в 21 веке. Эта технология придет на смену многим современным видам коммерции. Это подтверждает и исследование, проведенное европейской исследовательской компанией Datamaster (Лондон), там отмечается, что к 2005 г. 70% всех домашних покупок будет совершаться через Интернет.

В данной дипломной работе рассмотрены актуальные вопросы разработки и создания современного Web-сайта.

При этом мною были решены следующие задачи:

- ознакомление с современными Интернет-технологиями и их использование в настоящей разработке;

- изучение программного инструментария, применяемого для разработки и создания Web-сайтов;

- выявление и учет методов и способов представления на Web-страницах различных видов информации, не препятствующих их доступности;

- ознакомление с основными правилами и рекомендациями по разработке и созданию дизайна Web-магазинов и неукоснительное следование им на практике;

- определение макета Web-магазина;

- выбор стратегии разработки и создания Web-магазина.

СПИСОК ЛИТЕРАТУРЫ

1 Завалеев В.И. Курс ЦИТ «Internet-технологии в проектах с пластиковыми карточками»/ В.И. Завалеев. М.:Центр, 1998. - 956 с.

2 Крылов И.А. Информационные Технологии: Теория и практика рекламы в России/ И.А. Крылов. М.:Центр, 1996. - 654 с.

3 Леонтьев А.А «Web-дизайн. Руководство пользователя.»/ А.А. Леонтьев.М.:Центр, 2000. - 586 с.

4 Н.Джерк «Разработка приложений для электронной коммерции.»/ Н.Джерк. Санкт-Петербург:Питер Бук, 2001. - 506 с.

5 К.Гото, Э.Котлер «Web-дизайн.»/ К.Гото, Э.Котлер. Санкт-Петербург: Символ Плюс, 2003. - 372

6 Информация с Веб-сайта «Электронные платежные системы», http://www.emoney.ru

7 Информация с Веб-сайта «Reksoft. Электронная коммерция», http://www/reksoft.ru