Разработка веб-сайта. 2
Содержание
- Введение
- Теоретическая часть.
Глава 1. Определение понятия
- Понятие фирменного стиля
- Элементы фирменного стиля
- Практическая часть.
Глава 2. Планирование и реализация web-сайта
- Планирование web-сайта
- Реализация сайта
- Заключение
- Список литературы
- Приложения
Введение
Данная курсовая работа посвящена разработке web-сайта на тему «Дизайн фирменного стиля».
Актуальность темы курсовой работы определяется следующими обстоятельствами. Фирменный стиль, казалось бы, уже ни для кого не является чем-то новым, непознанным. В специализированной литературе дано множество определений тому, что есть фирменный стиль, написаны тысячи статей и прочитаны сотни семинаров и лекций, затрагивающих тему фирменного стиля. Тем не менее, многие предприятия в настоящее время не уделяют ему значительного внимания, что снижает их конкурентоспособность и приводит к убыткам в виде упущенной выгоды.
Фирменный стиль – это набор графических, словесных и образных элементов, которые, будучи весомой рекламной составляющей, проходят «красной линией» через все рекламные сообщения и передают философию компании, ее миссию или просто сферу деятельности компании на рынке.
Другими словами, фирменный стиль – это набор единых принципов оформления, цветовых сочетаний и образов для всех форм рекламы, деловых бумаг, документации, упаковки, офиса и даже одежды сотрудников.
Значение фирменного стиля переоценить очень трудно: он определяет ориентиры развития компании, помогает сформировать корпоративный этикет, сокращает издержки на поиск решений для поставленных задач. Во-вторых, фирменный стиль – это понимание того, как фирма будет выглядеть в глазах других людей. И самое главное: фирменный стиль – это коммуникация с потребителем.
Сегодня разработка и использование собственного фирменного стиля становится все более популярным атрибутом стратегии развития возрастающего числа компаний. Фирменный стиль нужен компании для того, чтобы посредством индивидуальности и единства графических и других констант выделиться среди конкурентов, стать узнаваемым (идентификация) и хорошо запоминаемым. Из-за хорошей узнаваемости уменьшается количество средств, потраченных на рекламные кампании. Наличие хорошего фирменного стиля значительно повышает эффективность рекламы.
Таким образом, актуальность исследования обусловлена значимостью и даже необходимостью наличия у фирм и компаний собственного фирменного стиля для успешного продвижения на рынке собственного продукта или услуг.
Целью курсовой работы является проектирование и разработка web-сайта на тему: «Дизайн фирменного стиля». В соответствии с поставленной целью решаются следующие задачи:
- определить тематику сайта в целом
- раскрыть понятие «фирменный стиль»
- выявить основные элементы фирменного стиля, его функции и задачи
- определить цель сайта
- установить целевую аудиторию
- описать структуру и алгоритм создания сайта
- реализовать web-сайт
Объектом исследования является планирование и разработка web-сайта на тему «Дизайн фирменного стиля».
Предмет исследования – создание структуры web-сайта.
Структура курсовой работы включает введение, две главы, заключение, список используемых источников и приложения.
Глава 1. Определение понятия фирменного стиля и его элементы.
- Понятия фирменного стиля
У каждой компании должно быть свое запоминающееся "лицо", иначе она затеряется в море других конкурирующих фирм, имеющих схожий профиль деятельности. При взгляде на логотип компании у клиента возникают ассоциации с товаром или услугой, предлагаемыми организациями.
Зачастую фирменный стиль
Фирменный стиль (англ. corporate identity advertising) ─ комплекс комбинированных элементов, служащий для идентификации, создания определенного управляемого имиджа, системы корпоративной культуры. Он может включать в себя товарный знак, шрифт, фирменную цветовую гамму, слоган. Или иначе фирменный стиль представляет собой набор цветовых, графических, словесных, типографических, дизайнерских элементов (констант), обеспечивающих визуальное и смысловое единство восприятия товаров (услуг).
За рубежом
для обозначения элементов
Фирменный стиль является одновременно и средством формирования имиджа организации, и определенным "информационным носителем", так как компоненты фирменного стиля помогают потребителю находить товар и реагировать на предложения конкретной фирмы, формируя у него отношение к ней. Он способствует повышению корпоративного духа. В рекламном процессе фирменный стиль упрощает процесс отбора рекламополучателями информации об организации или ее продукции. Оформленный в соответствии с последними достижениями дизайна и бренд-менеджмента. Фирменный стиль косвенно подтверждает надежность фирмы, как бы гарантирует, что фирма во всем соблюдает образцовый порядок, как в производственной, так и в любой другой деятельности. Фирменный стиль при правильной организации связей с целевой аудиторией создает и поддерживает имидж фирмы.
Существует
толкование фирменного стиля в узком
и широком смысле. Под фирменным
стилем в узком понимании
1.2 Элементы фирменного стиля
Элементами фирменного стиля являются товарный знак, логотип, фирменный блок, слоган, фирменный цвет, фирменный комплект шрифтов, корпоративный герой, постоянный коммуникант (лицо фирмы), фирменная одежда, другие фирменные константы.
1)Товарный знак.
Словесный товарный знак - это название фирмы (словосочетание). В настоящее время словом sign "знак" обозначается любое графическое изображение - любой символ или жест, выражающие какую-либо информацию или команду. Знак как элемент идентификации бренда должен нести информацию о происхождении, классе или назначения товара или услуги. Отличительные функции словесного знака заключаются в его словесной конструкции, т.е. в сочетании букв. Самым сильным визуальным средством организационной идентификации является товарный знак.
В соответствии с российским законодательством ("Закон о товарных знаках, знаках обслуживания и наименованиях мест происхождения товаров" - статья 1.) торговый знак трактуется как "обозначения, способные отличать соответственно товары и услуги одних юридических или физических лиц от однородных товаров и услуг других юридических или физических лиц.
Графический товарный знак ─ символьное условное обозначение, принадлежащее данной организации (при условии его регистрации), выполненное в определенной графической манере, необычным, запоминающимся шрифтом. При составлении товарного знака необходимо учитывать, что распознаваемость букв, выполненных особыми шрифтами, меняется в зависимости от размера. Графический товарный знак рекомендуется изготавливать в нескольких вариантах (от маленького ─ для визиток или бланков, до большого ─ для оформления наружной рекламы) и проверить насколько он хорошо выполняет возложенные на него функций. Основные функции товарного знака следующие:
- облегчать восприятие различий или создавать различия;
- давать товарам имена;
- облегчать опознание товара;
- облегчать запоминание товара;
- указывать на происхождение товара;
- сообщать информацию о товаре;
- стимулировать желание купить;
- символизировать гарантию.
2)Логотип.
Логотип – это оригинальное начертание или сокращенное наименование фирмы, товарной группы, производимой данной фирмой, или одного конкретного товара, выпускаемого ею. Как правило, логотип состоит из 4-7 букв. Приблизительно четыре товарных знака из пяти регистрируются именно в виде логотипа. Как и любой другой нормальный идентификатор, логотип - уникален. Что, кстати, имеет и юридическую поддержку. Например, при регистрации знак проверят на предмет уникальности.
3)Фирменный блок.
Фирменный блок представляет собой традиционное, часто упоминаемое сочетание нескольких элементов фирменного стиля. Чаще всего, это изобразительный товарный знак и логотип. Фирменный блок может также содержать полное официальное название фирмы, его почтовые и банковские реквизиты (например, на фирменных бланках). Иногда фирменный блок включает в себя и фирменный лозунг.
4) Фирменный слоган.
Фирменный слоган представляет собой постоянно используемый фирмой оригинальный девиз.
Слоган - короткая фраза, девиз фирмы или товара, словесный рекламный символ фирмы. В отличие от изобразительного рекламного символа фирмы, слоган представляет собой и визуальный и аудио- образ, что придает ему исключительную значимость как элемента имиджа или рекламного средства. Некоторые слоганы регистрируются как товарные знаки.
Слоган может содержать
В качестве мотива слогана может быть избрана забота о клиента, например Johnson&Johnson: "Мы заботимся о Вас и Вашем здоровье!".
Слоган может подчеркивать исключительные качества фирмы (Rank Xerox: "Мы научили мир копировать!") или делать ударение на достигнутой мощи, завоеванном авторитете (корпорация Sony: "Это – Sony!").
5)Фирменный цвет.
Фирменный цвет также является важнейшим
элементом фирменного стиля. Цвет делает
фирменный стиль более
Цветовая гамма способствует идентификации организации и потому очень часто используется в качестве стилеобразующей константы как в построении собственно знака или логотипа, так и в создании системы фирменного или корпоративного стиля. Для оформления словесного и графического товарного знака выбираются определенные цвета, которые в сочетании с другими элементами фирменного стиля создают запоминаемый образ. Так компания сотовой связи Билайн, проводя ребрендинг, основной упор сделала на наиболее запоминаемое сочетание цветов черного с оранжевым (хотя это сочетание и относится к числу агрессивных). Другая кампания сотовой связи Мегафон также ориентируется на запоминаемое, но не агрессивное сочетание зеленого цвета с белым. Ученые психологи сделали выводы по воздействию цвета на восприятие информации.
- красный цвет преимущественно воспринимается как более энергичный и страстный
- синий цвет подразумевает авторитет, ответственность и уравновешенность
- коричневый ─ это цвет земли, означающий серьезность
- зеленый ─ это прохладный, освежающий и успокаивающий цвет
- серый цвет пробуждает чувства достоинства и безопасности
- желтый цвет ─ дружелюбный и веселый, полушутя говорят, что это самый счастливый цвет
- темные цвета оказывают более глубокое воздействие
- черное с белым и золото с серебром ─ это цвета престиж.
6)Фирменный комплект шрифтов.
Фирменный комплект шрифтов может подчеркивать различные особенности образа марки, вносить свой вклад в формирование фирменного стиля.
7)Корпоративный герой.
Корпоративный герой – важная часть формируемого имиджа фирмы. Коммуникатор как бы персонифицирует сам себя, разрабатывая постоянный, устойчивый образ своего представителя.
Очень часто корпоративный герой наделяется некоторыми чертами, которые коммуникатор стремится включить в свой имидж. Шумный кролик Квики призван смешить маленьких любителей какао. Клоун Роналд Макдоналд должен олицетворять в глазах маленьких посетителей ресторана дух веселого праздника с подарками и представлениями.
8)Постоянный коммуникатор.
Постоянный коммуникатор, в отличие от корпоративного героя, является реальным лицом. Это конкретный человек, который избран фирмой в качестве посредника при ее коммуникации с адресатом. Более распространены определения этого понятия как "лицо фирмы", "брэнд-имидж", "икона фирмы".
9)Фирменная одежда.
Фирменный стиль в современной спецодежде указывает не только на принадлежность работника к фирме, но и соответствовать параметрам профессии.
В ряде американских фирм пишут специальные кодексы какую одежду можно носить. Главное требование – элегантность, консерватизм и чувство меры. При этом следует помнить, что элегантность – понятие интернациональное. Достижение единства в разнообразии и разнообразия в единстве – путь развития фирменного стиля в одежде.
Внедряя принципы корпоративной культуры необходимо быть очень осторожным. Нельзя нарушать проявление индивидуальности сотрудника, особенности его личности. Поэтому попытка одеть всех в униформу и даже в строгие классические костюмы может привести к активному противостоянию сотрудников и снижению продуктивности труда. Прежде всего это касается творческих организаций и ряда других.
10)Аудиообраз и аудиознак.
Аудиообраз ─ музыкальная фраза, композиция, несколько нот для голоса или музыкальных инструментов, сочетание определенных шумов, служащих как бы опознавательным знаком фирмы в радио и телероликах. Фактически аудиообраз это фирменный знак, решенный аудиосредствами. Главная функция аудиознака ─ та же, что и у графического знака фирмы - идентификационная. Строго говоря, аудиообраз фирмы должен обладать всеми критериями фирменного знака и может быть, согласно закону о товарных знаках зарегистрирован в качестве такового. Зачастую в качестве аудиообраза фирмы используется аудио-слоган: специфическое, постановочное решение, аудиосредствами слогана фирмы, придающее ему привлекательность, запоминаемость. Разница между аудиообразом и аудиослоганом лишь в том, что слоган это аудиоинтерпретация словесного выражения, а аудиообраз это самостоятельный звуковой образ, ассоциированный с фирмой (и законодательно закрепленный за ней путем регистрации).
11)Другие фирменные элементы.
Перечень других фирменных элементов постоянно растет, включая такие экзотические как фирменное знамя, фирменный гимн, корпоративная легенда ("байка") и многое другое. Некоторые элементы деятельности фирмы, в том числе в сфере коммуникаций, которые характеризуются постоянством, играют настолько важную роль в формировании ее образа, что могут быть отнесены к элементам фирменного стиля. Среди таких констант – различные эмблемы фирмы, не получившие в силу каких-либо причин правовую защиту и не являющиеся товарными знаками.
Элементами фирменного стиля можно также назвать фирменные особенности дизайна. Например, рисунок радиаторной решетки автомобилей фирмы BMW остается неизменным уже длительное время, несмотря на то, что внешний облик машин этой фирмы постоянно меняется.
Глава 2. Планирование и реализация web-сайта.
2.1. Планирование web-сайта.
Основная цель сайта - удовлетворять информационным запросам посетителя. Все разделы и информация на них должны быть легко доступны. Необходимо предоставить зашедшему гостю самостоятельно регулировать глубину просмотра и не предоставлять всю информацию сразу.
Самые лучшие web-сайты — это те, которые привлекательно выглядят, емко выражают основную идею и не заставляют пользователей ждать получения информации на их экранах слишком долго.
Основная цель создания сайта – размещение полезной информации о дизайн - студии, занимающейся разработкой фирменного стиля, ее услугах для клиентов и партнеров.
Самое оптимальное для сайта – это нейтральный дизайн, рассчитанный на широкую аудиторию посетителей. При этом сайт должен привлекать внимание, быть удобным, интересным и сохранять свою индивидуальность.
Безусловно, в разработке сайта важна и цветовая палитра. За основной цвет фона я взяла черный цвет. Он зачастую символизирует твёрдость, точность, изящество. Страницы с чёрным фоном можно делать для выделения среди других, выражения особых взглядов, ведь большинство страниц всё-таки оформляют со светлыми фонами. Поэтому не странно, что сайты с тёмным дизайном могут больше бросаться в глаза. В таком случае цвет текста должен быть светлых тонов. Для дополнительных цветов я выбрала палитру оттенков «мятного» цвета. Палитра сайта представлена в приложении 1.
Структура сайта будет следующая:
- Главная страница – здесь будут располагаться логотип и название дизайн – студии, свежие новости в сфере дизайна, главное навигационное меню;
- О компании – важная информация о компании;
- Услуги – данная страница содержит перечень выполняемых услуг и портфолио компании;
- Статьи – содержит полезную информацию о дизайне;
- Контакты – эта страница содержит информацию о телефонах и адресе дизайн – студии;
Логическая структура сайта:
рис.1
2.2 Реализация сайта
После того как структура будущего сайта продумана, можно приступать к разработке самих web-страниц (отдельных элементов сайта). И начать следует с главной (домашней) страницы сайта.
Представляю свой вариант структуры главной страницы:
Название сайта, логотип |
Меню сайта |
Разделы сайта |
Информация (текст) |
|
Дополнительная информация (графические объекты) |
Баннер(реклама) |
копирайт |
рис. 2
Теперь дело за малым – определиться с выбором программного обеспечения для создания сайта.
Подход к выбору того или иного программного обеспечения основывается на том, какой именно сайт необходимо создать, для каких целей он будет служить и какую основную смысловую нагрузку несет.
Разработка серьезного web - портала с множеством страниц и сложной структурой требует применения профессиональных средств верстки, таких как Macromedia Dreamweaver MX, HTML Builder XP и других программ. Эти html - редакторы позволяют быстро и легко создать профессиональные интерактивные сайты. Мощные и удобные в работе они направлены на использование их профессиональными дизайнерами, разбирающихся в основных функциях и достоинствах этих программ. Обычно программы такого класса снабжены множеством дополнительных модулей от подсветки синтаксиса кода до встроенных готовых шаблонов сайта, которые остается только подогнать под свои нужды. Наличие дополнений делает процесс верстки сайта более удобным и упрощенным. Отпадает необходимость использовать дополнительные программы сторонних производителей, все имеется в этих мощных пакетах web - разработки.
Я остановилась на программе Adobe Dreamweaver CS5.5
Для создания страницы необходимо открыть новый, пустой документ. Это можно сделать различными способами, например, выбрав команду File=>New в главном меню, а затем выбрав HTML из списка. Первое, что необходимо сделать после создания документа, сохранить файл с необходимым именем (иначе при создании гипертекстовых ссылок, вставке изображений и т.п. могут быть использованы неверные адреса). Главная страница сайта должна иметь специальное имя - index.html (или index.htm). После того как странице присвоено имя и она сохранена, можно приступать к наполнению ее информационным содержанием. Начать следует с установки параметров страницы. Для этого необходимо из главного меню выбрать команду Modify=>Page Properties….
Каждая страница сайта должна иметь продуманное, кратко и четко сформулированное название. Визуально оно будет отображено в заголовке окна браузера и, кроме того, будет использоваться поисковыми системами и т.п.
Для создания новой страницы в Dreamweaver я выбрала пункт «Создать/HTML» (рис. 3).
рис. 3
Далее я сохранила страницу в коренную папку сайта, как главную страницу сайта. Далее по ней будут созданы и остальные страницы сайта.
В HTML-документе необходимо разделять данные документа и их представление. Содержание документа задается в виде тэгов HTML. Для определения же визуального представления документа следует использовать таблицы стилей (CSS - Cascading Style Sheets) (через CSS задаются интервалы между строками текста, отступы, цвета, используемые для текста и фона, размер и стиль шрифтов и другое оформление).
В современном web- дизайне повсеместно используются компоновки на основе css. Компоновка на основе css, по сравнению с компоновкой на основе таблиц, уменьшает размер файла, более проста в управлении и соответствует стандартам индустрии дизайна.
Компоновка на основе css включает два основных компонента: набор правил css, определяющих размер и формат ключевых элементов страницы, и соответствующие наборы тегов html (обычно это теги <div>), формирующие основу страницы.
Для начала
нужно создать нейтральное
рис.4
Нажимаем кнопку New CSS Rule (новое правило CSS), которая расположена на панели CSS Styles (стили CSS) Когда появится диалог New CSS Rule (новое правило CSS) , я установила переключатель Selector Type (тип селектора) в положение Tag (тег), выбрала body. Переключатель define in (определить в) установила в положение This document only (только данный документ) и нажала Ок.
Затем я установила следующие параметры:
- В диалоге CSS Rule Definition for body (определение правила CSS для body) в категориях выбрала элемент background (фон) и при помощи инструмента пипетка выбрала черный фон.
- В категориях выбрала элемент Block (блок). В списке указала выравнивание текста по центру. Элементы компоновки будут выровнены по центру окна обозревателя, хотя текст будет выровнен по левому краю.
- В категориях выбрала элемент Box (размеры и расположение). Полям и отступам задала нулевое значение.
Стандартный способ создания компоновки на основе css– использование <div>, содержащий все остальные теги и содержимое. При объявлении самого «дальнего» контейнера определяется одно правило, устанавливающее глобальные параметры, такие как общая ширина и выравниванием элементов компоновки.
Оптимальная ширина веб-страницы находится в диапазоне от 960 до 1000 пикселей. Такой сайт как будто сверстан под мониторы с разрешением 1024×768, но он отлично смотрится и на более широких экранах. Страница находится по центру, а поля не выглядят чересчур широкими.
Для левой и правой границ мы задали значение auto (авто), чтобы выровнять по центру тег #wrapper <div>, а значит, и находящееся в нем содержимое страницы.. Если ширина окна обозревателя больше 960 пикселей, оставшееся пространство автоматически будет разделено и поровну добавлено к левой и правой границам. Теперь мы можем вставить тег <div> в стиль #wrapper.
На страницу будет добавлен новый тег <div> с содержимым- заменителем Content for id "wrapper" Goes Here (сюда вставить содержимое для id «оболочка»). (рис.5).
рис. 5
Теперь нужно добавить основные части компоновки сайта. Каждая из этих областей требует отдельного правила css и тега <div>.
Первым делом нужно определить правило css для заголовка. Когда правило CSS будет применено, оно предоставит немного пространства над и под тегом <div>. Определять ширину нет необходимости, так как элемент блока html, такой как тег <div>, по умолчанию расширяется и занимает все пространство контейнера, которым, в данном случае будет тег <div> #wrapper.
Далее определим еще несколько правил css для каждой части сайта.
Когда правила CSS для основных областей компоновки определены, можно добавлять их на страницу.
Для каждой части страницы определяем собственные параметры: размер, отступы, поля, шрифты, цвет фона и т.д.
Начнем мы
с того, что введем в нашу только
что созданную Web-страницу текст
и отформатируем его —
Текст набирается с помощью клавиатуры при этом Dreamweaver самостоятельно разобьет текст на строки. Чтобы создать новый абзац, нужно нажать клавишу <Enter>. Если же надо просто перенести текст на другую строку (вставить так называемый разрыв строк), то достаточно нажать комбинацию клавиш <Shift>+<Enter>. Текстовый курсор, т. е. мигающая вертикальная черточка, показывающая место, где будет появляться набираемый нами текст, может перемещаться во всех направлениях с помощью клавиш-стрелок. Также мы можем "листать" текст нажимая клавиши <PeUn> и <PeDown> мгновенно перемещаться к началу и концу строки клавишами <Ноте> и <End>. Чтобы быстро переместиться в начало или конец документа, нужно нажать, соответственно, комбинацию клавиш <Ctrl>+<Home> или <Ctrl>+<End>. Мы также можем устанавливать текстовый курсор в произвольное место, просто щелкнув там мышью.
В случае ошибки мы всегда можем удалить неправильно введенный текст, воспользовавшись клавишами <Backspace> и <Del>. Первая при нажатии удаляет символ, находящийся слева от текстового курсора, и идеально подходит для удаления только что введенного неправильного символа. Вторая удаляет символ, находящийся справа от текстового курсора.