66
Рисунок 3.16 – Наклейки на витрину
Они будут давать так же представление о товарах, которые можно
приобрести: экзотические животные, рептилии, пауки, корма и террариумное
оборудование.
На низ стекол, кроме входных дверей, которые будут не стеклянными, а
просто пустыми (закрываются на ночь сверху шторкой-жалюзи), можно
поместить едва заметные силуэты лапок гекконов (приложение 12).
Витрина не имеет внутренних ниш, поэтому в качестве них будут
использованы деревянные стеллажи для раскладки товаров, на которые можно
будет посмотреть как с внешней стороны, так и при входе в магазин.
Деревянные стеллажи менее долговечны, чем металлические, однако они
придадут еще более натуральную атмосферу и природные мотивы. В
ассортименте террариумных товаров присутствует очень много искусственных
растений, которые так же можно использовать в оформлении раскладки товаров у
витрины. Использование стеллажей, в отличие от баннеров и растяжек на
витрине, дает возможность практически ежедневно менять ассортимент товаров,
которые будут видны через витрину.
Таким образом, потребитель, проходя мимо витрины зоомагазина, может
поверхностно ознакомиться с ассортиментом и уже представлять, что конкретно
он может там найти. А прозрачные стекла позволят ему визуально оценить
атмосферу и товары магазина.
67
3.4. Разработка макета веб-сайта
В нынешний век информационных и компьютерных технологий, наличие
веб-сайта, говорит о надежности компании, и ее заинтересованности в клиентах.
Это так же приносит удобство в работу и возможность вести бизнес не только с
розничной точки продажи, но так же и с помощью интернет продаж. Сайт
помогает общаться с потребителями онлайн, помогает им в выборе товаров при
помощи онлайн-консультантов, отправлять товары в другие города и прочее[28]
21
.
Веб-сайт это так же лицо компании. Часть пользователей узнает о
зоомагазине в интернете, и только потом решит, стоит ли посещать сам
зоомагазин. Поэтому еще одним критерием в разработке – это вызвать доверие у
покупателя.
Как говорит Аарон Уолтер в книге «Эмоциональный веб-дизайн»: «Дизайн
интерфейса – это дизайн для человека, в данном случае для пользователя»[18]
22
. И
если выстроить потребности пользователи подобно пирамиде Маслоу, то сайт
должен быть: функциональным, надежным, удобным, приносящим удовольствие.
Пользователю должно быть удобно на сайте, чтобы с помощью него он
мог решить любую свою проблему, решение которой он планирует тут найти.
Интерфейс должен быть простым, удобным и лаконичным, чтобы даже у самого
неопытного пользователя не возникало трудностей с поиском информации. Это
так же достигается с помощью минималистичного дизайна, который будет
использован в случае с сайтом для зоомагазина «Repti Space».
Большое количество деталей, информации, кнопок и картинок не всегда
приводит к хорошему результату. При слишком большом их количестве глазу не
за что зацепиться, а поиск нужной кнопки или раздела становится
затруднительным. Движение минимализма уже затронула все сферы дизайна и
жизни человека, потому что больше – не значит лучше. Порой простой, с
минимальным количеством деталей дизайн позволяет потребителю быстрее
21
Старцев А.В. Зачем компании нужен сайт [электронный ресурс]. Режим доступа: свободный. URL:
https://shkolazhizni.ru/@webrain/posts/438/ (дата обращения: 08.10.19). [28]
22
Уолтер А. Эмоциональный веб-дизайн. – М.: Манн, Иванов и Фербер, 2012. - С. 17. [18]
68
ориентироваться и находить нужную ему информацию.
Первоначально сделан эскиз сайта (приложение 13), на котором был
проведен поиск наиболее удачного расположения блоков информации, навигации,
товаров и контактов.
Вся важная информация, которая может понадобиться потребителю,
находится в верхней части сайта (шапке), чтобы пользователь мог совершить
минимум действий для поиска нужной информации.
Для создания макета веб-сайта была использована такая программа, как
Adobe Photoshop. Удобством этой программы является возможность добавлять
любое количество направляющих для ровной верстки макета (рис. 3.17). А так же
возможность распределять все элементы по папкам. Для начала были размечены
отступы от краев документа, после чего определены расстояния для логотипа,
пунктов меню и контактной информации. Блок с товарами является
дополняющимся, поэтому он не имеет фиксированной длины и может
дополняться по мере необходимости. Количество помещенных в ряд товаров
составляет три штуки, и имеет фотографию, наименование товара и его
стоимость. Все элементы так же в самом начале выравниваются при помощи
направляющих относительно друг друга, чтобы сайт смотрелся более аккуратно и
гармонично.
Рисунок 3.17 – Разработка макета веб-сайта
69
Макет веб-сайта, разработанный для зоомагазина (приложение 14),
представляет собой онлайн зоомагазин, имеющий информативную и
ознакомительную функции.
Структура сайта представляет собой следующее:
1. Шапка сайта (рис. 3.18). Она содержит все основные информационные
данные, которые необходимо знать пользователю, только зашедшему на
страницу.
Рисунок 3.18 - Шапка сайта
2. Блок меню и основной блок представляют собой основную часть сайта.
Тут расположены как сами товары, так и дополнительная полезная
информация. Основные категории меню поиска по товарам расположены
слева и имеют дополнительные всплывающие окна в некоторых
категориях. Товары на главной странице разбиты на категории, которые
время от времени меняются на «сезонные товары», «выбор
покупателей», подборки из разделов. Так же в свободном месте под
блоком меню располагается новостной блок. Новостной блок рассчитан
на познавательные статьи о содержании тех или иных рептилий, о том,
как выбрать освещение для ящерицы или змеи, как и чем их кормить.
3. Подвал, нижняя часть сайта. Обычно в нем дублируют каталог товаров.
Так же располагают основную информацию о магазине, акциях,
вакансиях. Дизайн сайта во многом влияет на то, как пользователь будет
воспринимать не только информацию, но и компанию в целом. Образ и
элементы фирменного стиля, такие как цвет, шрифт, логотип, должны
непременно присутствовать и дополнять его образ. Стараясь разместить
на страницы максимум важной и полезной информации – главное не
70
перегрузить ее, иначе пользователю будет очень сложно
ориентироваться на сайте и он в итоге не станет тратить на это время.
Как пишет Фельке-Моррис Терри в книге «Большая книга веб-дизайна»:
«Размещение воздуха (поскольку бумага обычно белая) вокруг блоков текста
облегчает его чтение»[19]
23
. Поэтому для оформления макета сайта был выбран
белый цвет для основного блока и шапки. Чтобы дать больше пространства и
легкости чтения. Такой подход позволяет более выгодно выделить изображения и
фотографии товаров и привлечь к ним больше внимания. Белый фон не
нагромождает взгляд, позволяя ему легко двигаться от элемента к элементу.
Вся основная информация на макете веб-сайта для зоомагазина
расположена сверху и слева. Это связано с человеческим фактором, так как глаз
человека обычно читает с лева направо и чаще всего в рекламных сообщениях
задерживается на левом верхнем углу. Поэтому в эту часть обычно помещают
логотип. В верхней части располагается вся главная информация, о которой было
сказано выше. И следуя из этого, «каталог товаров» так же находится в левой
части, под логотипом, достаточно высоко, чтобы глаз сразу зацепился за этот
блок.
Придерживаясь при разработке макета веб-сайта общего оформления всего
фирменного стиля и его элементов, сайт становится неотъемлемой частью
компании, дополняет ее и делает еще более надежным для потребителей.
3.5. Компьютерные графические программы, используемые при
создании форменного стиля
Для создания фирменного стиля было необходимо использование таких
графических программ, как Adobe Photoshop, Adobe Illustrator и Adobe InDesign.
С помощью программы Illustrator осуществлялась вся начальная работа по
подготовке и созданию элементов фирменного стиля, таких как подбор цвета,
вариантов шрифтовых написаний, отрисовка логотипа, плашки с фоном и подбор
вариаций по их компоновке.
23
Фельке-Морис Т. Большая книга веб-дизайна. – М.: Эксмо, 2012. - С. 232. [19]
71
Adobe Illustrator – это векторная программа, позволяющая создавать
изображения высокого качества для печати и публикации в интернете. В свою
очередь, к векторным изображениям относятся иллюстрации, состоящие из
контуров. Главным преимуществом векторного изображения в отличии от
растрового, является возможность масштабирования без потери качества[11]
24
.
Именно поэтому данная программа была выбрана в качестве основы для
разработки логотипа и фирменного начертания. Так как эти элементы
впоследствии должны будут находиться как на маленьких визитках, так и на
крупногабаритных баннерах и вывесках, где изображение логотипа
увеличивается, чуть ли не в сотню раз. Поэтому его качество должно быть
идеальным в обоих случаях. С помощью Adobe Illustrator практично создавать и
прочие повторяющиеся элементы, которые в будущем необходимо увеличить. Так
же она позволяет улучшить и качество самих элементов оформления, в отличие от
растровой графики, при приближении которой становятся видны пиксели.
Adobe InDesign позволяет выполнять дизайн и предпечатную проверку
(верстку) профессиональных макетов страниц для печатной продукции и
цифровых проектов при помощи интегрированных инструментов для дизайна и
точного контроля над типографикой [14]
25
. С помощью данной программы
осуществлялась верстка всех печатных носителей фирменного стиля (визитная
карточка, листовка, баннер и прочее). В программе InDesign содержится целый
набор функций, позволяющий создавать макеты печатной продукции со всеми
требованиями к дальнейшей печати. Сюда относится как соблюдение вылетов для
резки, безопасные отступы от границ, чтобы важные элементы макеты не были
отрезаны. А так же возможность делать многополосные продукты, такие как
брошюры, каталоги товаров и прочая многостраничная документация.
Неотъемлемой программой при разработке фирменного стиля является
Adobe Photoshop. С помощью этой программы появляется возможность
отретушировать или убрать лишние элементы, выполнить фотомонтаж одного
24
Золотов С.А. Illustrator CS4 на практике – Ростов н/Д.: Феникс, 2010. – С. 6. [11]
25
Молочков В.П. Макетирование и верстка в Adobe InDesign. – М.: Национальный Открытый Университет
«ИНТУИТ», 2016. – С. 4. [14]
72
документы из нескольких отдельно взятых фотографий или отдельных элементов
этих изображений. Кроме того, редактируемый элемент может быть дополнен
текстом[4]
26
. В данной программе были обработаны фотографии для макета веб-
сайта. И собственно сверстан сам веб-сайт. Программа Photoshop хорошо
подходит для подобных целей. Возможность использования различных
инструментов, коррекции, вставки изображения и текста, работы с пикселями,
помогает сделать макет по всем требованиям компании
Подобный набор графических редакторов более чем оптимален для
разработки всех элементов и носителей фирменного стиля. И позволяет решить
все поставленные задачи.
3.6. Стоимость отдельных носителей фирменного стиля
При разработке носителей фирменного стиля и прочей рекламной
продукции необходимо ориентироваться на стоимость изготовления и печати этих
составляющих. Ниже будет рассмотрено несколько из носителей с примерами
расценок их изготовления в разных типографиях.
Визитная карточка. Являясь самым ходовым предметом любой компании,
стоимость печати визитных карточек достаточно мала и позволяет использовать
целое множество различных бумаг и материалов.
Стоимость печати визитной карточки с цветностью 4+4, 90х50мм, на
плотной белой бумаге, 500 штук – 1’890р. Есть так же возможность выбрать более
дорогую бумагу, ламинацию или скругление углов. Эти параметры не сильно
увеличивают стоимость изготовления.
Листовки так же являются относительно недорогим материалом для печати
и распространения. По параметрам формата А6, бумага 90 г/м2, мелованная,
гладкая матовая, в количестве 500 штук, обойдется зоомагазину в 3’476р. При
необходимости можно сократить количество одинаковых листовок и сделать
несколько разных в меньшем количестве, если необходимо распространять их
26
Антонов Б.Б. 37 профессиональных приемов Adobe Photoshop CS4. – М.: Изд-во Триум, 2010. – С. 6. [4]
73
конкретно к каким-либо мероприятиям или акциям.
Карманные календарики имеют тот же ценовой диапазон, как и листовки,
и дешевы в производстве, что позволяет печатать их в большом количестве.
Особенно в преддверии нового года, когда они особенно актуальны. Стоимость
карманных календарей формата 70х100мм, 500 штук, мелованная бумага 300 г/м2,
ламинирование глянцевой пленкой, 2’790р.
Фирменные конверты для отправки деловой документации. Для начала их
необходимо не очень большое количество. И стоимость их изготовления составит
2’567р. с параметрами Е65, цветная односторонняя печать, офсетная бумага 80
г/м2, в количестве 150 штук.
Стоимость изготовления блокнотов уже несколько выше. Формат А5, 100
штук, цветная обложка и печать блока, на металлической пружине, обойдется в
22’700р. Часть цены можно сэкономить за счет печати лишь обложки без блока,
но тогда эффект от блокнотов будет не таким, какой требуется зоомагазину.
Поэтому в данном варианте стоит немного переплатить и создать блокнот по всем
требованиям фирменного стиля, чтобы на каждой страничке имелся логотип и
ссылка на сайт магазина.
Баннеры – отличный и недорогой вариант для привлечения внимания.
Благодаря своей относительно небольшой стоимости, в данном случае для
разработанного баннера она составит в районе 1’000-1’500р., это позволяет
достаточно часто менять оформление и рекламную информацию на баннере. Их
материал долговечен и позволяет, впоследствии, использовать их повторно,
менять между собой и так же брать их с собой на выставки или презентации
компании.
3.7. Технологические параметры
При печати любой продукции необходимо соблюдать технологические
параметры, которые проверяются и корректируются на этапе предпечатной
подготовки. Следования этим требованиям позволит избежать брака при печати.
74
Формат файла. Предпочтительней использовать файлы в исходном
варианте таком как: psd, cdr, ai. Так же типографии принимают форматы pdf, tiff,
jpeg, если они соответствуют параметрам печати. Векторную графику, во
избежание потери качества необходимо отправлять на печать в кривых.
Вылеты, один из важнейших параметров при печати, так как ошибка в
размере может повести за собой некачественную работу (останутся белые поля
или же наоборот будет обрезана важная часть текста или изображения). Вылет
представляет собой припуск к обрезному формату. Их необходимо создавать,
когда часть изображения выходит за края реза (рис. 3.19). Стандартные размеры
вылетов: не менее 3мм. – для листовой продукции, не менее 5мм. – для
многополосной продукции.
Рисунок 3.19 – Вылеты для реза
Цвет (красочность). При печати используется цветовая модель CMYK,
соответственно все файлы должны быть подготовлены в этом формате.
Шрифт. По умолчанию все шрифты во время предпечатной подготовки
переводятся в кривые. Если на этапе печати необходимо корректировка, то все
используемые шрифты прикрепляются к заказу. Минимальный размер шрифта:
6pt – для рубленых гарнитур и полужирных начертаний, 7pt – для шрифтов с
засечками, декоративных и тонких шрифтов.
Чем меньше размер шрифта, тем сложнее его читать. Поэтому при
просмотре макета необходимо использовать реальное отображение размера
файла.
Так же необходимо учитывать, что разные типографии используют разные
75
машины для печати и разный вид красок. Из-за чего цвет при печати может
отличаться. В связи с этим рекомендуется делать цветопробу.
Детали. Контуры необходимо перевести в кривые, чтобы избежать
уменьшения или потери контура.
Разрешение печати (представляет собой максимальное количество точек на
квадратный дюйм): фон и подложки от 200dpi, логотипы и картинки от 300dpi,
мелкий текст и схемы от 400dpi, и более при необходимости.
Таким образом, необходимо подготовить каждый из разработанных
носителей фирменного стиля (визитки, листовки и т.д.):
- задать точные параметры, определить расстояние реза и проверить
расположение основной информации от краев;
- перевести шрифты и контуры в кривые (рис. 3.20);
Рисунок 3.20 - Шапка сайта
- задать цветовой профиль CMYK;
- сохранить файлы в необходимом разрешении;
- при необходимости предварительно сделать цветопробу в выбранной
типографии, после чего отправить все сделанные макеты в печать.
Визитки, листовки, папки и бланки, баннеры, штендеры, печатная
рекламная и деловая документация, и прочие носители элементов фирменного
стиля являются неотъемлемой частью любой компании (приложение 15). Они
помогают донести до потенциальных потребителей ту информацию, которую
вложила в себя организация и которую стремится донести до окружающих. На
этапах ее создания важно точно следовать поставленный правилам и критериям
оформления, использовать уже подготовленные цвета, шрифты и логотип,
лаконично сочетать их в каждом из носителей. Чтобы сложив все вместе,