Файл: Разработка сайта компании «_Gabovpab_».pdf

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

‑ очень распространённый символ, часто встречается в логотипах пивных компаний;

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

Концепция Вариант 2.

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

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

2 ПРОЕКТНЫЙ РАЗДЕЛ

2.1 Анализ запросов. Построение семантического ядра

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

‑ изучение целевой аудитории, и ее основные запросы;

‑ анализ запросов на поисковых платформах и применение специализированных инструментов статистики и анализа запросов;

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

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

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

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

В нашем случае тематикой сайта является – «ПИВО», как основной образующий продукт коммерческой деятельности организации.

Следовательно, базовыми ключами будут фразы, содержащие это слово:

Пиво, купить пиво, выпить пива…

Такого рода запросы имеют очень конгруэнтность и малую релевантность и таргетивность, так как не конкретизируют потребностей пользователя. Учитывая структур запроса «СПЕЦИФИКАТОР- ТЕЛО - ХВОСТ», можно предложить запросы: «Попить пива в Петербурге», «Попить пива в пабе», «Пабы в Питере».

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

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

Анализ частотности указанных запросов предложен в приложении Д.

Карта семантического ядра представлена на рис. 2.1

Рисунок 2.1 ‑ Карта семантического ядра

2.2 Подготовка графических материалов

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

Для удовлетворения потребностей клиента и создания более полной гармонической концепции решено реализовать два варианта (см. рис. 1.11) базового логотипа.

По варианту 1 выбран эскиз с бокалом (деревянной кружкой). Рассмотрим некоторые моменты его реализации.

Реализацию осуществляем с использованием векторного редактора. На рисунке 2.2 Представлен набор заготовок – дощечки для кружки

Рисунок 2.2 – Элементы кружки

Далее их необходимо разместить, как бы укрепив на некоторое эллиптическое дно. Таким образом достигается и конусная форма и симметрия (рис. 2.3)

Рисунок 2.3 – Закрепление элементов кружки

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

Рисунок 2.4 – Пенная шапка

Дальше создаем надпись и отдельно позиционируем ее по отношению к кружке так, чтобы буква “G” воспринималась как ручка кружки (рис. 2.5-2.6)

Рисунок 2.5 – Подбор шрифта для надписи

Рисунок 2.6 – Скомпонованный логотип (варианты с цветом)

Для подчеркивания графической задумки с ручкой букву «G» можно немного повернуть, ориентируясь наклоном боковой стенки кружки (рис. 2.7)

Рисунок 2.7 – Вариации размещения надписи

По варианту 2 в ходе творческого поиска и сравнения полученных результатов наиболее удачным показался вариант с использованием «кельтского узла». Рассмотрим эту реализацию более детально.

Эскиз этого варианта представлен на рис. 2.8 (правый рисунок)

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

Рисунок 2.8 ‑ центральный элемент символа

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

Рисунок 2.9 ‑ реализация сплетения лучей

После некоторых экспериментов получили следующий результат (рис. 2.10)

Рисунок 2.10 ‑ Законченная форма символа

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

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

В ходе работы было создано много различных вариаций «F» и «6F», но в конечном варианте выбраны только две реализации.

Рисунок 2.11 ‑ Этапы создания «F»

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

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

Составляющие элементы представлены на рис. 2.12

Рисунок 2.12 – Элементы логотипа

Для цветного представления логотипа выбрана 3-х цветная палитра (рис. 2.13)

Рисунок 2.13 – Палитра цветов

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

а) б)

Рисунок 2.14 – Итоговый вариант реализации

2.3 Структура сайта. Описание отдельных моментов реализации

2.3.1 Описание структуры сайта

Для реализации сайта используется структура, которая состоит из 5 страниц:

Страница 1 – «Домашняя страница. Главная». Эта страница содержит короткую фото галерею, и контент восхваляющая пиво. Короткая статья, которая должна пробудить интерес.

Станица 2 – «Пивная карта». Содержит перечень предлагаемых сортов пива с коротким описанием этих напитков. В работе страницы представлены как макет по этому, перечень ограничен несколькими пунктами. На этой же странице представлены пункты по меню закусок. Отображать или не отображать цену на предлагаемые напитки и блюда? Этот вопрос очень спорный, на этот счет имеются диаметрально противоположные мнения. В нашем варианте цены не отображаются, это больше не меню, а именно пивная карта. Закуски отображены как дополняющий элемент.

Страница 3 – «Контакты». Содержание отвечает названию, страница содержит телефоны и адрес заведения, а также карту, которая поможет клиенту сориентироваться на месте.

Страница 4 – «Новости». На этой странице планируется отображать новости о предстоящих мероприятиях, акциях и творческих программах, которые будут проводиться в пабе.

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

Структура всех страниц одинакова, схематически структура представлена на рис. 2.15

Рисунок 2.15 – Структура страниц сайта

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

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

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

Верстка страниц реализуется с использованием языка разметки html и каскадных стилей css. Общий шаблон страниц в html представлении имеет верстку на основе использования блоков <div>.

Код -шаблона:

<html>

<head>//заголовочный блок

</head>

<body> //тело

<div>

<img class="logo" src="images/logo21.png">// логотип

</header>

//реализация главного меню

<nav>

<li><a href="#">Главная</a></li>

<li><a href="html/beermap.html">Пивная карта</a></li>