ОГЛАВЛЕНИЕ
Введение ..................................................................................................................... 10
1. Исследовательски-аналитическая глава ............................................................. 14
1.1 История развития дизайна веб-сайтов .............................................................. 14
1.2 Современные тенденции в веб-дизайне ............................................................ 16
1.3 Виды веб-сайтов .................................................................................................. 19
1.4 Построение сайта, его навигация, удобство пользования .............................. 20
1.5 Исследование объекта проектирования ............................................................ 23
1.6 Айдентика ............................................................................................................ 24
1.7 Исследование аналогов, цветовых концепций ................................................. 26
1.8 Целевая аудитория .............................................................................................. 32
1.9 Вывод .................................................................................................................... 34
2. Проектно-графическая глава ................................................................................ 36
2.1 Проектирование структуры сайта музея Андрея Рублева .............................. 36
2.2 Разработка серии эскизов графического решения веб-сайта музея имени
Андрея Рублева .......................................................................................................... 43
2.3 Разработка элементов графической концепции веб-сайта музея имени
Андрея Рублева .......................................................................................................... 48
2.4 Разработка графической концепции веб-сайта с учетом адаптивной
верстки ........................................................................................................................ 52
2.5 Вывод .................................................................................................................... 58
3. Технолого-экономическая глава .......................................................................... 60
3.1 Расчет затрат на создание графической концепции веб-сайта музея имени
Андрея Рублева .......................................................................................................... 60
3.2 Вывод .................................................................................................................... 61
Заключение ................................................................................................................ 62
Список использованной литературы ....................................................................... 66
Приложение ............................................................................................................... 69
9
ВВЕДЕНИЕ
Темой выпускной квалификационной работы – дипломной работы
является: «Разработка графической концепции web-сайта для музея Андрея
Рублева».
Графическая концепция сайта – это представленная в графическом виде
дизайнерская разработка оформления сайта, а также элементов интерфейса
сайта.
Целевая аудитория данного проекта состоит из людей пенсионного и
предпенсионного возраста, семей с детьми, групп учащихся школ, дизайнеров,
студентов профильных и смежных вузов, современных художников и
реставраторов, любителей русского декоративного искусства.
Актуальность поставленной темы заключается в том, что сайт является
одним из неотъемлемых атрибутов современной компании будь то частная или
государственная организация. В современном мире необходимо не просто
сделать красивый сайт компании, но и сделать его удобным для пользователя,
так как дизайн и структура сайта играет большое значение в создании
впечатления об организации у пользователей.
Целью выпускной квалификационной работы является создание
графической концепции сайта в соответствии с интуитивно понятной навигацией
и шрифтовым оформлением.
Объектом исследования является сайт музея имени Андрея Рублева.
Предмет исследования – графическое оформление сайта музея имени
Андрея Рублева.
В задачи данного проекта входят:
1. Рассмотреть аналоги разрабатываемого сайта по основным
параметрам;
2. Определить целевую аудиторию разрабатываемого сайта;
3. Определить шрифтовое оформление;
4. Разработка сетки;
10
5. Решение проблем, выявленных при опросе целевой аудитории
разрабатываемого сайта;
6. Разработка элементов интерфейса web-сайта;
7. Разработка графической концепции сайта.
Решение поставленных задач осуществляется при помощи различных
методологий исследования:
1. Теоретическое исследование, изучение различной профильной
литературы;
2. Поиск аналогов, просмотр и анализов сайтов конкурентов;
3. Анализ трендов дизайна веб-сайтов.
Практическая значимость данного проекта заключается в разработке не
просто красивого дизайна сайта, но и обладающего интуитивно понятным
управлением с точки зрения пользователя, не нарушаемая с точки зрения
иерархии объектов и структуры сайта.
В исследовательско-аналитической главе проекта будет изучена история
сайтов, тренды, пройденные на ее пути, а также существующие по сей день.
Также необходимо изучить строение сайта, его элементы, а также приемы и
тренды применимые к современным сайтам, виды сайтов, определить тип
разрабатываемого проекта. В данной главе также необходимо осветить такие
аспекты, как:
Изучение истории происхождения и развития музея имени Андрея
Рублева;
Айдентика музея имени Андрея Рублева;
Провести анализ сайтов аналогичной направленности на примере
Музея Московского Кремля, Музейно-выставочного комплекса Новый
Иерусалим и Музея русской иконы, их цветовых концепций, схожих элементов
интерфейсов и структурных частей;
Провести анализ целевой аудитории сайта музея имени Андрея
Рублева;
11
Изучить портреты целевой аудитории, понять их требования,
пожелания и что может помешать или помочь их позитивному опыту в
использовании разрабатываемой графической концепции сайта музея имени
Андрея Рублева.
В проектно-графической главе необходимо:
С заказчиком составить бриф на разработку графической концепции
web-сайта музея имени Андрея Рублева;
Разработать ментальную карту проекта;
Изучить структуры сайтов, их типы, отличия друг от друга;
Разработать карту сайта или структуру расположения страниц
разрабатываемого сайта;
Определить информационные блоки на страницах;
Изучить типы сеток и определить сетку для разрабатываемого
проекта;
Создать мудборд из концептов, шрифтов, изображений и цветовых
сочетаний, показывающих будущие графические особенности web-сайта музея
имени Андрея Рублева;
Создать бумажные эскизы интерфейса;
Создать макет страницы с показанием расположения основных
визуально-информационных блоков;
Изучить типографическую и визуальную иерархии, методы и
приемы их использования в разработке структуры страницы и элементов
интерфейса сайта;
Определить иерархию элементов главной страницы;
Разработать элементы графической концепции web-сайта музея
имени Андрея Рублева;
Создать шрифтовой набор и цветовую палитру проекта;
Разработать интерфейс сайта музея имени Андрея Рублева;
12
Изучить типы адаптивного дизайна, а также методы его достижения
в разработке дизайна сайта;
Разработать отзывчивый макет сайта.
В технолого-экономической главе необходимо рассчитать затраты на
разработку дизайна сайта на биржах фриланса и в дизайн-агентствах по региону,
а также расценки на программное обеспечение, используемое для данного
проекта.
13
1. ИССЛЕДОВАТЕЛЬСКО-АНАЛИТИЧЕСКАЯ ГЛАВА
1.1 История развития дизайна веб-сайтов
История появления сайтов начинается с 1991 года, когда был создан
первый в мире сайт, представляющий из себя описание новой на то время
технологии World Wide Web, а также основные принципы установки и работы
серверов и браузеров. Этот сайт представлял из себя первый интернет-каталог
Тима Бернерс-Ли с ссылками на другие сайты.
В период с 1990 по 1994 год сайты представляли из себя связанные
посредством ссылок текстовые документы. Однако уже в середине десятилетия
дизайнерам предоставили язык разработки сайтов HTML что позволило
создавать табличную структуру сайтов, включать нарезанные фоновые
изображения размещенные в ячейках таблицы, анимированный текст, данный
период можно охарактеризовать тем, что при разработке дизайна сайтов
принципами хорошего дизайна поступались в пользу использования новых
«фишек». Ярким представителем того времени можно считать сайт Yahoo!
версии января 1997 года (рис. 1.1).
Рис. 1.1. Скриншот веб-сайта Yahoo! версии января 1997 года
14
В конце 90-х популярность приобрела технология flash-элементов в
дизайне сайтов. К особенности сайтов того периода можно отнести
комбинированное использование табличного дизайна и flash для создания
различных эффектов.
Большой прорыв в web-дизайне произошел в 2000 году с разработкой
технологии CSS, позволяющей управлять различными элементами их
визуальным отображением. В этот период на сайтах также можно было
обнаружить закругленные углы элементов, градиенты, глянцевые кнопки и
многое другое.
Ниже приведен пример сайта того времени компании Apple (рис. 1.2).
Рис. 1.2. Скриншот веб-сайта Apple версии мая 2000 года
2004 – 2006 годы считают началом эпохи Web 2.0. В этот период часто
использовались тени, зеркальность, мягкие цвета и градиенты, и скругленные
углы различных объектов. Дизайн сайтов становится более контрастным и
качественным.
В период до 2010 года в тренде был стиль сквеморфизм (рис. 1.3),
подразумевающий попытку показать интерфейс очень реалистичным, кнопки
выглядят, как настоящие имеют глубину и светотень, часто используются
текстуры металла, дерева, ткани и т.д. Популярным становится использование
видео-контента.
15
Рис. 1.3. Скриншот веб-сайта в стиле сквеморфизм
Следующим этапом в web-дизайне стал период минимализма, повысилась
роль типографики и «плоских» элементов, все это стало неотъемлемой частью
web-сайтов 2010 – 2014 годов. В связи с колоссальным ростом мобильной
аудитории сайты все больше переходят на адаптивный дизайн. Веб-дизайнеры
имеют больше возможностей для воплощения своих идей чем когда-либо в
прошлом.
С 2015 года дизайнеры все больше уходят от сквеморфизма в пользу
минимализма, плоских форм, возвышается контент над оформлением, большую
роль начало иметь шрифтовое оформление сайтов, увеличивается свободное от
контента пространство.
1.2 Современные тенденции в веб-дизайне
Web-дизайн одно из направлений дизайна, которое очень сильно зависит
от трендов. Каждый год появляются или обновляются тренды, которым следуют
дизайнеры и разработчики сайтов. Важной частью исследования разработки
дизайна веб-сайтов является изучение истории дизайна сайтов, а также трендов
прошлого и настоящего мира веб-дизайна.
Веб-дизайн – это отрасль веб-разработки и разновидность графического
дизайна, в задачи которой входит проектирование пользовательских веб-
интерфейсов для сайтов или веб-приложений.
16
Интерфейс – это совокупность средств взаимодействия пользователей с
пользовательской программой.
Хедер – верхняя часть интерфейса сайта, обычно содержащая логотип,
название, меню, визуальный контент.
Футер – нижняя часть сайта, обычно содержащая контакты и общую
рубрикацию сайта, а также ссылки на социальные сети.
В настоящее время под термином веб-дизайн понимают именно
проектирование структуры веб-ресурса, обеспечение удобства пользования
ресурсом для пользователей. Также непосредственно с дизайном сайтов смежны
маркетинг в интернете (интернет-маркетинг), то есть, продвижение и реклама
созданного ресурса, поисковая оптимизация. Таким образом визуальными
средствами решаются самые разнообразные задачи, такие как, повышение
продаж, укрепление доверия, создание определенного имиджа и другие.
1
Для современных сайтов важным моментом является адаптивная верстка.
Подобный тип верстки предполагает возможность одинаково удобного
восприятия контента веб-сайта на самых разнообразных устройствах, от
широкоформатных мониторов, до планшетов и смартфонов (рис. 1.4).
1
Якоб Нильсен «Веб-дизайн», – СПб.: Издатель «Символ-Плюс»; 2003. – 512 с. [14]
17
Рис. 1.4. Пример адаптивной верстки сайта
К современным тенденция в создании дизайна сайтов можно отнести
следующее:
Использование рукописных шрифтов и рисованных графических
элементов, такие как иконки и иллюстрации, придают сайтам некое
несовершенство по сравнению с идеально выверенными элементами последних
годов, а также вдыхает в сайт душу. Особенно эффектно они смотрятся, на фоне
минималистического дизайна веб страницы.
Идея ассиметричной конструкции состоит в том, чтобы сайт
выглядел менее блочным, имел меньше прямых граней, отделяющих один
элемент от другого. При этом следует отметить что это не избавление от
модульных сеток, это расположение элементов интерфейса более динамично.
На главных экранах сайтов и даже внутри статей все чаще можно
увидеть большие шрифты, сами являющиеся графическим оформлением, а не
только информационным наполнением сайта.
Темная тема, изначально появившаяся для улучшения
энергосбережения OLED-экранов, в настоящее время позволяет улучшить
акцент на необходимые элементы интерфейса, подчеркнуть статусность и
современность дизайна.