7
Оглавление
ВВЕДЕНИЕ ................................................................................................................ 8
ГЛАВА 1. ИССЛЕДОВАТЕЛЬСКАЯ-АНАЛИТИЧЕСКАЯ .............................. 10
1.1 История возникновения веб-сайтов ..................................................... 10
1.2 Сетки построения сайтов ...................................................................... 16
1.3 Исследование проблемы выбора шрифтового оформления ............. 19
1.4 Исследование и определение стиля для сайта .................................... 22
1.5 Влияние цвета на психологию человека ............................................. 28
1.6 Аналоги web-сайтов .............................................................................. 33
1.7 Анализ компании «Anielio» .................................................................. 39
1.8 Портрет потребителя ............................................................................. 40
ГЛАВА 2. ПРОЕКТНО-ГРАФИЧЕСКАЯ ............................................................ 42
2.1 Бриф ........................................................................................................ 42
2.2 Разработка графической концепции для сайта компании ................. 43
2.3 Выбор и обоснование шрифтового оформления ................................ 50
2.4 Выбор и обоснование колористического решения ............................ 52
2.5 Выбор и обоснование стиля сайта ....................................................... 56
2.6 Выбор программных средств для разработки графической концепции
web-сайта .................................................................................................................. 58
ГЛАВА 3. ЭКОНОМИЧЕСКИЙ РАСЧЕТ ПРОЕКТА ........................................ 60
3.1 Технологическая карта ......................................................................... 60
3.2 Расчет стоимости проекта .................................................................... 63
ЗАКЛЮЧЕНИЕ ....................................................................................................... 64
СПИСОК ИСПОЛЬЗУЕМОЙ ЛИТЕРАТУРЫ .................................................... 66
ПРИЛОЖЕНИЕ ....................................................................................................... 69
8
ВВЕДЕНИЕ
Сегодня трудно представить компанию без собственного
представительства в интернете. Как правило, в наше время в качестве
представительства становится web-сайт организации. C помощью такого канала
представления организация получает новый способ привлечения
потенциальных клиентов к своим товарам или услугам.
Креативное агентство «Anielio» увидело необходимость в разработке
сайта для продажи своих обучающих курсов и инфопродуктов. Потребность в
создании единой площадки для предоставления их товаров и услуг появилась
вместе с большим потоком потребительских заявок на обучение и покупку
продуктов. Для выхода на большой рынок компании необходимо получить
постоянный поток заказов. В качестве источника такого потока была принята
необходимость в разработке такого интернет-ресурса как web-сайт. Специфика
предоставляемых товаров такова, что большинство интернет-пользователей
обращаются для их поиска к интернету в первую очередь, а печатная продукция
отходит на задний план. Этот фактор стал решающим в выборе канала продаж.
Наличие своего собственного интернет-магазина позволит сократить
расходы на обработку заказов, разгрузить наемных работников, которые
занимаются всем вручную, а также получить новый канал связи с клиентом.
Актуальность данной темы заключается в нижеизложенных пунктах:
• с помощью даже простого одностраничного сайта можно
максимально быстро и доходчиво донести информацию до большого
количества людей;
• на мнение о компании большое влияние оказывает визуальное
оформление, которое может как привлечь потенциального клиента, так и
отпугнуть;
• компания, не имеющая сайта, не вызывает доверия у пользователей
и последние вероятнее свяжутся с той организацией, у которой он имеется.
Целью дипломного проекта является оформление рекламно-
информационного канала, учитывая все современные тенденции и желания
9
заказчика, для облегчения коммуникации с потенциальными и уже
существующими клиентами и формирование положительного имиджа
компании.
Чтобы рассмотреть цель с разных сторон были поставлены следующие
задачи:
Проанализировать структуру уже существующих сайтов подобного
типа, раскрыв их преимущества и недостатки.
Определить и решить проблемы, относящиеся к разработке
графической концепции сайтов.
Выполнить проектную часть, разработав план, предоставив
художественное представление оформления сайта, описав и
обосновав выбранный стиль, цветовой и шрифтовой выбор
Составить расчет стоимости сайта.
Объектом исследования является сайт.
Предметом исследования является его графическая концепция.
Методы исследования представленной темы включают в себя: анализ и
исследование рассматриваемого объекта и предмета исследования по частям с
помощью литературы.
10
ГЛАВА 1. ИССЛЕДОВАТЕЛЬСКАЯ-АНАЛИТИЧЕСКАЯ
1.1 История возникновения веб-сайтов
Сейчас, с помощью современных инструментов и технологий любой
ученик средней школы за один урок информатики может совершенно
бесплатно создать собственный сайт. При этом, дизайн, качество и
функциональность этого сайта будут на порядок выше, чем у первых образцов
сайтостроения, когда веб-дизайн создавался с помощью символов и табуляции.
Прежде, чем появилась возможность создавать веб-сайты, возник
Интернет. Интернет-сеть без информации представляла собой совершенно
бесполезное изобретение, которое необходимо было наполнять. Данным
вопросом и его решением занялся британский ученый Тимоти Бернерс-Ли из
Европейской лаборатории элементарных частиц. Сделанный им первый сайт,
созданный в 1990 году, назывался info.cern.ch. Ученый разместил на этом
ресурсе данные по новейшей технологии передаче информации под названием
World Wide Web. По-русски эти слова как раз и означали всемирную паутину.
Но его знают не только как изобретателя всемирной сети интернет,
перед этим он успешно смог изобрести ряд других, не менее важных
инструментов, лежащих в основе самых популярных на сегодняшний день
программ. Помимо создания интернета Бернерса-Ли следует благодарить за
разработку URL, HTTP и изобретение языка программирования, известного нам
как HTML.
Занимаясь разработкой интернета, ученый смог полагал, что его
изобретение не просто упростит процесс сбора и хранения информации, но и
поможет получать доступ к ней других пользователей. Смотря на современные
тенденции повсеместного использования интернета, можно смело утверждать,
что все реализованные планы и задумки ученого полностью себя оправдали.
Его изобретения произвели настоящую инновационную революцию в мире
технологий, давшую прорыв стремительному развитию современных интернет-
технологий и онлайн-бизнеса. В настоящее время количество интернет-страниц
11
и веб-ресурсов невозможно даже сосчитать, их можно исчислить миллиардами.
Проект первоначально задумывался как своеобразная «папка» для
хранения основных сетевых документов, организованные каждый своим
личным доменным именем, оригинальным и единственным в своем роде.
Именно такими являются сейчас современные сайты, такие ресурсы хранят в
себе огромное количество информации, различных документов и страниц,
находящихся, при этом, в свободном доступе для всех пользователей, а
отыскать их можно под установленным доменным именем.
По типу первый веб-сайт был также и первым в мире интернет-
каталогом – совершенно банальным, без ярких деталей и как такового дизайна
в принципе, одностраничным, но имеющим информационную наполненность.
Такой сайт представлял собой стартовую страницу белого цвета, на которой
была размещена текстовая информация о самой инновационной технологии
того времени «World Wide Web». Этот этап можно назвать «каменным веком
веб-дизайна», когда о визуальном контенте сайты и не задумывались: они
целиком и полностью состояли из текста. Впервые текст и изображение
поместили вместе в 1993-м году, и с тех пор начала свой отсчет история веб-
дизайна.
В 1996-м году в визуальном оформлении веб-страниц появились
анимации, так называемые GIF-изображения, чересчур пестрые фоны и яркие,
выделяющиеся заголовки.
История зарождения и развития сферы дизайна веб-интерфейсов
поэтапно:
1990-1993 гг
Самые первые сайты выглядели совсем неприглядно и сухо для
современного пользователя, но всё, что могли содержать первые в мире
страницы – ссылки и текст.
12
Рис. 1.1. Сайт infocernch
О визуальном оформлении сайтов не говорили до середины апреля 1993
года, когда выпустили первый графический браузер Mosaic, поддерживающий
просмотр изображений. Так в однообразный и всем приевшийся текст стали
добавлять картинки.
1994-1996 гг
В этот период разработчики сайтов начинают добавлять, как можно
больше красок и цветных фонов. Что в то время вызвало восторг от
использования ярких, пестрых цветов. В эти годы, в добавок ко всему,
появляется возможность использования различных шрифтов, в частности Times
New Roman и Courier New. Чуть позже разработчики начали размещать на
страницах GIF-изображения.
Рис 1.2. Пример сайта 1994 года
1997-1998 гг
Внешний вид сайта начинает постепенно становится похожим на
привычные нам: сайты теперь строят на основе табличных макетов, добавляют
эффекты и навигационное меню с иконками. Также активно развиваются flash-
технологии, которые позволяют добавлять мигающие заставки. Однако со
13
временем с ними, как и с изобилием ярких цветных фонов и заголовков,
начинается серьезный перебор. Помимо всего прочего, данный период
сайтостроения выделяется активной интеграцией маркетинговой ркламы в
дизайн. Чуть ли не на каждом сайте можно было увидеть всевозможные
рекламные баннеры с лозунгами компаний.
Рис. 1.3. Сайт компании «Apple»
1999-2003 гг
В начале XXI века в web-дизайне появляется спрос на скругленные
углы, переливающиеся кнопки и градиенты. Яркий фон стал отходить на
задний план, и теперь он становится однотонным. Сайты наконец начинают
выполнять свое прямое предназначение и при разработке сайтов дизайну
уделяется меньше внимания. Они становятся намного доступнее и обзаводятся
более удобным пользовательским интерфейсом.
Рис. 1.4. Сайт компании «Яндекс»
14
2004-2006 гг
Начинается эпоха Web 2.0. С приходом Web 2.0 веб-дизайнеры стали
отдавать предпочтение тени, глянцу иконок и кнопок, мягким цветам
интерфейсов. Также делается большой упор на читаемый и функциональный
контент и интеграция в ресурсы анимации.
Рис. 1.5. Сайт компании Nokia
2007-2010 гг
С этого периода дает начало активное развитие мобильных приложений,
а вместе с этим, появляются мобильные версии веб-сайтов. Именно здесь берет
свое начало такое явление, как «адаптивность». Создаются первые социальные
сети и, как следствие, получает распространение рекламы в виде размещения
их иконок на различных сайтах. Активно внедряются длинные макеты сайтов.
Обширное распространение получают стоковые фотографии и новое явление –
скевоморфизм
1
.
1
Скевоморфи
зм — физический орнамент или элемент дизайна, который скопирован с формы другого
объекта, но изготовлен из других материалов или иными методами.
15
Рис. 1.6. Сайт компании Thailand Fruits
2011-2014 гг
В этот период начинает все больше развиваться простой, удобный и
лаконичный дизайн, также появляются такие тенденции, как плоский дизайн и
параллакс. Значительное внимание продолжают уделять адаптивности веб-
сайтов.
Рис. 1.7. Сайт компании Desktime
2015-2016 гг
В это время мир веб-дизайна начинает внедрять черты материального
дизайна, высокого разрешения графики, а также стала появляться
интерактивность. Особую популярность получили видеоконтент и
16
скроллджекинг
2
. Дизайнеры начать ставить фокус на индивидуальность и
креативность, в предпочтение вывели уникальную графику и авторские
иллюстрации. Внушительная часть сайтов, которые мы сейчас посещаем
являются представителями именно этого периода.
Рис. 1.8. Сайт компании Ciga
1.2 Сетки построения сайтов
Люди всегда интуитивно пользовались чувством пропорции. Это
несложно увидеть, потому что уже с самых ранних этапов становления
человечества можно увидеть связь пропорций с измерением и
конструированием, расположением объектов относительно друг друга в
пространстве. Сетками, как разметкой, системой опорных линий, пользовались
для составления планов строительства и разделения территории, с помощью
нее художники эпохи Возрождения увеличивали свои эскизы.
Изначально сетка применялась исключительно в газетном
проектировании в целях повышения эффективности. Макетные листы
позволяли снизить издержки на содержание штатных типографов, подгоняя под
общие стандарты вид страниц и экономя время самих работников. Вскоре
на смену макетным листам пришли более гибкие модульные сетки.
Оба этих преобразования показали работникам индустрии, что единый
стиль оформления повышает качество взаимодействия читателей с изданием.
2
Скроллджекинг (scrolljacking)— послайдовый скролл.