Файл: Анализ рестайлинга веб-сайтов на примерах.pdf

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

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

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

Рисунок 2.11 Новый логотип детской изо-студии «Радуга»

Оттенки логотипа были выбраны с учетом цветового круга. Триада — это сочетание 3 цветов, лежащих на одинаковом расстоянии друг от друга. Такой подбор оттенков обеспечил новому логотипу высокую контрастность при сохранении гармонии (см. рис. 2.12).

Рисунок 2.12. Триада для нового логотипа детской изо-студии «Радуга»

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

Рисунок 2.13. Цветовое решение нового логотипа детской изо-студии «Радуга»

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

Рисунок 2.14. Основной шрифт для нового логотипа детской изо-студии «Радуга»

Вспомогательный шрифтом выступил Calibri, он не фигурировал в разработке логотипа, но будет использован для текстовых блоков веб-сайта детской изо-студии «Радуга» (см. рис. 2.15).

Рисунок 2.15. Вспомогательный шрифт для нового логотипа детской изо-студии «Радуга»

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

Рисунок 2.16. Макет веб-сайта детской изо-студии «Радуга» после рестайлинга

На основе данного макета была спроектирована новая шапка сайта с обновленным текстовым блоком и шрифтовым решением. Цветовое решение сайта теперь перекликается с логотипом, что одновременно выглядит стильно, ярко и свежо. Все фотографии на сайте были обновлены и прошли цветовую коррекцию через Adobe Photoshop Lightroom (см. рис. 2.17).

Рисунок 2.17. Веб-сайт детской изо-студии «Радуга» после рестайлинга

Далее в веб-сайте следует графа «Руководитель», которая тоже не осталась

без изменений. У преподавателя изо-студии не нашлось другого фото, поэтому было принято решение оставить то фото, которое было, но откорректировав его в Adobe Photoshop Lightroom. Также был отцентрован текстовой блок, повествующий об Клейменовой Т. В., и изменен шрифт (см. рис. 2.18).

Рисунок 2.18. Макет веб-сайта детской изо-студии «Радуга» после рестайлинга

На основе данного макета была спроектирована часть веб-сайта детской изо-студии «Радуга», в которой идет речь о преподавателе (см. рис. 2.19).

2.19. Веб-сайта детской изо-студии «Радуга» после рестайлинга

Далее в веб-сайте детской изо-студии «Радуга» следует графа «Расписание», которая кроме таблицы, не протерпела никаких изменений (см. рис. 2.20).

Рисунок 2.20. Макет веб-сайта детской изо-студии «Радуга» после рестайлинга

В отличие от макета, на основе которого была сделана еще одна часть веб-сайта, на итоговом варианте немного изменена таблице. На макете линии таблицы более толстые, когда после рестайлинга сайта они стали тоньше (см. рис. 2.21).

Рисунок 2.21. Веб-сайт детской изо-студии «Радуга» после рестайлинга

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

Рисунок 2.22. Макет веб-сайта детской изо-студии «Радуга» после рестайлинга

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

Рисунок 2.23. Веб-сайт детской изо-студии «Радуга» после рестайлинга

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

2.24. Мобильная версия веб-сайта детской изо-студии «Радуга» после рестайлинга

В целом и в общем после рестайлинга веб-сайт детской изо-студии «Радуга» на различных устройствах выглядит подобным образом (см. рис. 2.25).

Рисунок 2.25. Веб-сайт детской изо-студии «Радуга» после рестайлинга на различных устройствах

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

2.3. Экономическая эффективность проведения рестайлинга веб-сайта детской изо-студии «Радуга»

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

ЗАКЛЮЧЕНИЕ

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

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

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

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

Основная литература:

1. Инфографика: от истоков к современности / Открытые системы: электрон. журн., 2013, № 5. [Электронный ресурс] – Режим доступа. – URL: http://www.osp.ru/os/2013/05/13036001/ (дата обращения 08.04.2019 г.)

2. Красносельский С. А. Основы проектирования: учебное пособие. – М.: Директ-Медиа, 2014. – 232 с. – Режим доступа: http://biblioclub.ru (дата обращения 06.05.2019 г.)

3. Нефедьева К. В. Инфографика – визуализация данных в аналитической деятельности / Труды Санкт-Петербургского государственного университета культуры и искусств, 2013. – т. 197 – с. 89-93 (дата обращения 08.04.2019 г.)

Дополнительная литература:

1. Дизайн. Иллюстрированный словарь-справочник / Минервин Г. Б., Шимко В. Т., Ефимов А. В. и другие: под общей редакцией Минервина Г. Б. и Шимко В. Т. – М.: Архитектура-С, 2004. – 288 с. (читальный зал МФПУ «Университет» на Семеновской) (дата обращения 05.05.2019 г.)

2. Диков А. В. Веб-технологии HTML и CSS: учебное пособие – М.: Изд-во: Директ-Медиа, 2012. – То же [Электронный ресурс]. – URL: http://biblioclub.ru (дата обращения 06.05.2019 г.)

3. Клещев О. И. Типографика: учебное пособие. – Архитектон, 2016. – 172 с. – То же [Электронный ресурс]. – URL: http://biblioclub.ru (дата обращения 10.05.2019 г.)

4. Костюченко О. А. Творческое проектирование в мультимедиа: монография. – М.: Изд-во: Директ-Медиа, 2015. – То же [Электронный ресурс]. – URL: http://biblioclub.ru (дата обращения 17.05.2019 г.)

5. Кузнецова Л. В. Лекции по современный веб-технологиям. – Изд-во: Интернет-Университет Информационных технологий, 2010. – То же [Электронный ресурс] (дата обращения 19.05.2019 г.)

6. Овчинникова Р. Ю. Дизайн в рекламе: основы графического проектирования: учебное пособие. – Изд-во: Юнити-Дана, 2015. – То же [Электронный ресурс]. – URL: http://biblioclub.ru (дата обращения 17.05.2019 г.)