Разработка дизайн-проекта ресурса интернет для вегетарианского кафе "Брокколи"

Размещено на http://www.allbest.ru

Размещено на http://www.allbest.ru

Министерство образования и науки РФ

Государственное образовательное учреждение

высшего профессионального образования

«Омский государственный технический университет»

Кафедра «Дизайн и технологии медиаиндустрии»

курсовая работа

по дисциплине

«ИТ в сфере визуальных коммуникаций»

на тему:

«Разработка дизайн-проекта ресурса Интернет для вегетарианского кафе «Брокколи»»

Студенки группы ДН-319

Лапиной Ю.А.

Руководитель курсовой работы

к. филос. н., доцент О.Н. Ткаченко

Омск 2012



ВВЕДЕНИЕ

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

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

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

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

1. Выяснить, что представляет собой веб-сайт.

2. Рассмотреть возможные варианты веб-сайты вегетарианских ресторанов.

3. Изучить особенности дизайна корпоративных сайтов вегетарианских ресторанов на примере других сайтов.

4. Разработать собственный дизайн проект веб-сайта.

5. Структурировать полученный материал.

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

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



ГЛАВА 1. ТЕОРЕТИЧЕСКИЕ АСПЕКТЫ РАЗРАБОТКИ ДИЗАЙН - ПРОЕКТА РЕСУРСА ИНТЕРНЕТ

1.1 Понятие и виды веб-сайта

Сайт (от англ. website: web -- «паутина, сеть» и site -- «место», буквально «место, сегмент, часть в сети») -- совокупность электронных документов (файлов) частного лица или организации в компьютерной сети, объединённых под одним адресом (доменным именем или IP-адресом).

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

История сайтов

Создание первого сайта относится к 1990 году. Его создателем явился Тим Бернерс-Ли, основоположник главных веб-технологий -- HTTP, URI/и HTML. В основе проекта разработчика лежала идея о том, что гипертекст может стать основой для сетей обмена данными. Первый сайт также стал и первым в мире интернет-каталогом, поскольку впоследствии Тим Бернерс-Ли разместил на нем ссылки на многие другие сайты.

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

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

Виды и функции сайтов

Сайты делятся на несколько категорий по различным признакам.

1. Один из основных признаков -- природа содержимого сайта.. Согласно этому признаку, сайты делятся на статические и динамические.

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

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

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

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

Среди коммерческих сайтов (веб-представительств) выделяют следующие основные виды сайтов:

Тип сайта	Назначение	Функционал
Сайт-визитка	Веб-представительство компании (бюджетный вариант)	Кол-во страниц от 1 до 5, главная страница, контакты, прайс-лист, возможность расширения до корпоративного сайта
Корпоративный сайт	Полнофункциональное веб-представительство (информационные и коммерческие функции)	Неограниченное количество страниц, блоки новостей и статей, возможность размещения портфолио, галереи, каталогов продукции, возможность расширения функционала
Интернет-магазин	Электронная площадка для купли-продажи товаров и услуг	Размещение неограниченного количества товаров, специальные сервисы для осуществления сделок
Портал	Информационно-коммерческая многофункциональная площадка	Информационная и административная части, возможность расширения функций, размещение текстового, видео-и аудио-контента
Промо-сайт	Может быть «филиалом» корпоративного сайта, специализируется на отдельном продукте или акции, функция привлечения внимания, продвижение товара, увеличение продаж	Небольшое количество страниц, возможно размещение презентаций, видеороликов, галереи изображений товара
Уникальный сайт	Ресурс, полностью адаптированный под потребности и задачи конкретной компании или индивидуального лица	По согласованию с заказчиком

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

Составляющие сайта

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

Современные сайты представляют собой многофункциональные ресурсы, с помощью современных технологий (Flash, HTML5, 3D) возможна реализация самых смелых идей разработчиков и веб-дизайнеров. Благодаря развитию интернет - технологий, сайты могут удовлетворять самые разнообразные потребности своих владельцев: от рекламы и продажи различных товаров и услуг до обеспечения полноценной коммуникационной среды -- для досуга, общения и обмена различными материалами.

Доменное имя

Для удобства нахождения сайтов в Сети, каждый из них обладает своим уникальным доменным именем. Домен сайта также называют его адресом в Интернете. Домены имеющие общее окончание (.ru, .su .com., .org) относятся к одной и той же доменной зоне, которая указывает либо на графическую локализацию владельцев сайта (.ru, рф -- Россия, .su - страны бывшего Союза) либо его назначение (.com -коммерческий ресурс, .net - тематика сайта связана с Интернетом), и т. д.

1.2 Структура сайта

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

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

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

Можно выделить три основных типа структуры сайтов:

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

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



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

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

Навигация сайта

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

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

Существует несколько типов навигации:

меню

выпадающее меню (вертушка)

поиск

перебор страниц

пиктографическая система

индексы

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

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

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

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

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

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

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

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

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

1.3 Теория создание сайта

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

В настоящее время сайты создаются как профессиональными веб-студиями, так и индивидуальными разработчиками. Создание сайта включает в себя следующие основные этапы [11]:

Разработка дизайна

Верстка страницами

Веб-программирование

Наполнение контентом

Тестирование

Размещение (хостинг)

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

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

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

Далее возникает не менее важный вопрос-- размещение сайта (хостинг)

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

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



ГЛАВА 2 РАЗРАБОТКА ДИЗАЙН ПРОЕКТА РЕСУРСА ИНТЕРНЕТ ДЛЯ ВЕГ-КАФЕ «БРОККОЛИ»

2.1 Понятие и виды вегетарианства

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

Само слово вегетарианство произошло от латинских слов vegetabilis (растительный) и vegetare (развиваться, расти). По латыни vegetus значит "цветущий, здоровый", а vegetarius -- вегетарианец [24].

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

Некоторые вегетарианцы, кроме определённой пищи, также исключают:

одежду и другую продукцию, части которой изготовлены из меха, кожи и т. д.

продукцию, в состав которой входят компоненты животного происхождения (такие как глицерин, желатин)

продукцию, прошедшую тестирование на животных

Несколько причин быть вегетарианцем

В последние годы число адептов вегетарианства увеличивается. Этому способствуют:

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

ЭКОНОМИЯ: вегетарианство оказалось более экономичным для людей. Ученые высчитали, что один гектар обрабатываемой земли способен дать пищу для 7 вегетарианцев, а для пропитания 1 человека-мясоеда нужны 2 гектара земли (сюда включаются поле, сад и луг). Экономия особенно важна теперь, в период мирового финансово-экономического кризиса, связанного с падением доходов и жизненного уровня людей.

ЭТИКА: этическое отношение к животным. Лев Толстой писал:

«Десять лет кормила корова тебя и твоих детей, одевала и грела тебя овца своей шерстью. Какая же им за это награда? Перерезать горло и съесть?».

Способы убоя животных чрезвычайно жестоки, хотя ученые уверены, что животные ощущают боль так же сильно, как люди.

Виды продуктов питания, допускаемых в различных направлениях вегетарианства

	Мясо (включая рыбу и морепродукты	Яйца	Молоко	Мед
Лакто-ово-вегетарианство	нет	да	да	да
Лакто-вегетарианство	нет	нет	да	да
Ово-вегетарианство	нет	да	нет	да
Веганство	нет	нет	нет	нет

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

Следующие диеты не являются вегетарианскими по определению, так как допускают убойную пищу:

Пескетарианство -- отказ от поедания плоти сухопутных животных;

Поллотарианство -- употребление в пищу плоти только птиц;

Флекситарианство -- умеренное или крайне редкое употребление в пищу плоти.

2.2 Анализ существующих дизайн-проектов веб-сайтов вегетарианских кафе

В России вегетарианство-явление не распространенное. Поэтому рестораторы считают не рентабельным открывать вегетарианские кафе и рестораны. Однако таковые все же встречаются, правда, в основном в крупных городах.

Во всемирной сети Интернет легко можно найти корпоративные сайты таких ресторанов. На этих сайтах можно оценить ассортимент, ценовое поле ресторана, а также посмотреть статьи и галереи соответствующие данному заведению.

Перед разработкой собственного проекта был проведен сбор нформации и анализ аналогичных проектов. Далее рассмотрим некоторые варианты корпоративных сайтов вегетарианских ресторанов.

LovingHut.(Рис.1)Москва.

Это единственный в России веганский фаст-фуд того же сетевого бренда "LovingHut", представленного в мире на всех континентах: в 60 городах Соединенных Штатах Америки, в Австралии, странах Европы и Азии. На сайте ресторана простая и удобная навигация. Здесь можно получить информацию об акциях, меню ресторана. Также на сайте можно узнать о вакансиях ресторана и мнение СМИ о нем. Еще здесь можно оформить доставку блюд. Каждой теме на сайте есть соответствующее меню.Сайт представлен в светлой гамме.



Рис.1

Троицкий мост (Рис.2) Санкт-Петербург

Вегетарианский ресторан. На сайте ресторана так же представлены основные услуги корпоративного сайта: новости ресторана, меню, вакансии, галерея блюд и интерьера, можно сделать заказ на банкет. Каждой теме соответствует отдельное меню. Навигация легкая и интуитивно-понятная. Цветовая гамма сайта светлая, теплая, преобладание зеленых оттенков.

Рис.2

Живая еда (Рис.3)Москва

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



Рис.3

Таблица 1

Название С айта Критерии	LovingHut	Троицкий мост	Живая еда
Тип навигации	меню	меню	меню
Простота навигации	простая, интуитивно понятная	простая, интуитивно понятная	простая, интуитивно понятная, однако осложнена дополнительным программным условием
Функциональность	8 страниц	11 страниц	5 страниц
Цветовая гамма	Светлая, преобладание желтых и зеленых цветов	Светлая, преобладание зеленых цветов	Светлая, преобладание оливковых оттенков

Проанализировав данные корпоративные сайты вегетарианских сайтов (Таблица 1) можно сделать несколько выводов:

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

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

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

2.2 Технология разработки дизайн проекта веб-сайта для вегетарианского кафе «Брокколи»

Цели и задачи проекта

Кафе «Брокколи» - является вегетарианским, целевая аудитория которого являются люди, придерживающиеся вегетарианского образа жизни, люди, соблюдающие пост и другие овощные диеты.

Целью работы стало создание корпоративного сайта кафе. Стояла задача разработать дизайн сайта.

Выполненные работы

В рамках работы над поставленной задачей были разработаны: интерфейс сайта, страницы и навигация сайта.

Реализация проекта

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

Цветовая гамма сайта была выбрана зеленая, так как зеленый - цвет лета, обновления и всего нового, яркого и интересного.

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

Так же было принято решение разнообразить зеленую гамму желтыми оттенками.

Возбуждающее влияние оказывает на человека комбинация зеленого и желтого. Этот симбиоз ассоциируется с весной, обновлением и оптимизмом[1].

Заголовки будут выделяться красным цветом, цветом ярким, привлекающим внимание.

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

Первоначально кулинарная книга композиционно должна была быть расположена центрально (Рис.4).

Рис.4

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

Рис.5



Следующим этапом было создание дизайн - макета сайта в программе Adobe Photoshop.

Был выбран фонзеленый с растительным орнаментом (Рис.6).

Рис.6

Далее композиционно и послойно была закомпонована основа сайта - кулинарный блокнот. На этом фоне был расположен логотип кафе и текст - режим работы заведения (Рис.7).

Рис.7

Следующим этапом работы было расположение основных элементов навигации - меню. Макет содержит7 страниц: новости, меню, о кафе, галерея блюд, контакты, еда на заказ и vegetarianism. Заголовок каждой страницы представляет собой отдельную кнопку навигации. Каждый заголовок был расположен на зеленом фоне, а заголовок открытой страницы будет на желтом. Первой страницей была разработано меню «О КАФЕ» (Рис.8).



Рис.8

В финале формирования данного меню был закомпонован основной текст страницы (Рис.9).

Рис.9

Итог (Рис.10)

Рис.10

Подобным образом были спроектированы остальные страницы:

«Новости». В данное меню были добавлены дополнительные элементы навигации: кнопки прокрутки страницы (Рис.11).

Рис.11

«Меню» (Рис.12).

Рис.12

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

Рис. 13а



Рис.13б

Рис.13в

Рис.13г

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



Рис.14а

Рис.14б

«Vegetarianism». На данной странице представлена краткая справка о вегетарианском образе жизни (Рис.15).

Рис.15

Готовый макет сайта был сохранен в двух форматах: JPEG и PSD (собственный формат Adobe Photoshop ). Формат JPEG - для удобного быстрого просмотра страниц сайта, а PSD - сохраняет возможность редактирования.

Следующий этап: макет сайта предается специалистам для веб-программирования.

Вывод: таким образом, во второй главе мы рассмотрели практическую часть создания корпоративного сайта для вегетарианского кафе «Брокколи»: рассмотрели понятие «вегетарианство», изучили аналогичные проекты корпоративных сайтов и основные этапы разработки собственного макета сайта.



ЗАКЛЮЧЕНИЕ

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

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

дизайн веб сайт



БИБЛИОГРАФИЧЕСКИЙ СПИСОК

Андрэ, Н. Практическая психология цвета / Н. Андрэ, С. Некрасова, - М: Профит Стайл, 2011. - 224 с.

Бокарев, Т. Энциклопедия интернет - рекламы / Т. Бокарев, - М: ПРОМО - РУ, 2004, - 416 с.

Браэм, Г. Психология цвета / Г. Браэм, - М: АСТ, 2009-160 с.

Бхаскаран, Л Анатомия дизайна. Реклама, книги, газеты, журналы / Л. Бхаскаран, - М: АСТ, 2006, - 256 с.

Вуд, Л. Web-графика: справочник: Пер. с англ. / Л. Вуд; пер. И. Симонович, - СПб: Питер, 1998.-217 с

Дюпон, Л. Реклама. 1001 совет / Л. Дюпон, - Минск: Попурри, 2008. - 288 с.

Ефремова, Т. В. Современный толковый словарь русского языка / Т. В. Ефремова, - М: АСТ, 2006. - 1168 с.

Инженерная и компьютерная графика: учеб. для вузов / Э.Т. Романычева, А.К. Иванова, А.С. Куликов и др. - М.: Высшая школа, 1996. - 367 с.

Иттен, И. Искусство цвета / И. Иттен, - М: Д.Аронов, 2010, - 96 с.

Леонтьев, Б. Энциклопедия дизайна и графики на ПК / Б.Леонтьев, - М: Новый издательский дом, 2004. - 1040 с.

Манчулянцев, О.А. Как стать ближе к клиенту / О.А. Манчулянцев, - М: Standout, 2003. - 52 с.

Мартинес, А Секреты создания недорогого Web-сайта / А. Мартинес, - М: ДМК Пресс, 2006.- 416 с.

Минервин, Г. А. Дизайн. Иллюстрированный словарь-справочник / Г.А. Минервин, - М: Архитектура - С, 2004.-288 с.

Ормистон, Р. Цвет. Большая книга / Р. Ормистон, М. Робинсон, - М: Арт - Родник, 2007, - 416 с.

Открытая русская электронная библиотека // Интернет ресурс: http://old.lib.sfu-kras.ru/doc/EL/concept-rgb.htm.

Официальный сайт организации «CREATIVE COMMONS» // Интернет ресурс: www.creativcommons.org.

Райн, Х. Самый полный справочник. Графический дизайн / Х. Райн, - М: АСТ, 2008. - 192 с.

Роббинс, Д. Web - дизайн. Справочник / Д. Роббинс, - СПб: КУДИЦ - Пресс, 2008. - 816 с.

Слэк, Л. Что такое дизайн продукта? / Л.Слэк, - М: АСТ, 2006, - 256 с.

Стор, И. Н. Смыслообразование в графическом дизайне / И.Н. Стор, - М: МГТУ им. А.Н. Косыгина, 2003, - 296 с.

Стоун, Т. Дизайн цвета. Практикум. / Т. Стоун, С. Адамс, Н. Мориока, - М: РИП - Холдинг, 2006. - 240 с.

Тимоти, С. Структура дизайна. Стильное руководство / С. Тимоти, - М: РИП - Холдинг, 2008, - 272 с.

Холмс, А. Основы Web-дизайна / А. Холмс, - Вильямс: Cisco Press, 2002. - 640с.

Ильиных, Н. Вегетарианство / Н. Ильиных, - Екатеринбург: Аркаим, Урал ЛТД, 2003. - 201с.

Размещено на Allbest.ru