59
Рис. 22. Схема F для композиции страницы
Так как в проекте используется одностраничный сайт, подходящее
решение будет использовать схему Z для расстановки элементов [3].
2.10 Разработка графической концепции
Графическая концепция состоит из ключевых элементов таких как:
- Фон
- Иллюстрации
- Логотип
- Иконки
Для фона однострочного сайта был составлен мудборт, на основе
векторных иллюстраций демонстрирующие природу. В процессе создания
эскизного ряда, была рассмотрена идея №2 из главы «2.4 Разработка идеи для
графической концепции веб-сайта», а именно использование языческой
мифологии в иллюстрациях и логотипе. На основе этой идеи было составлено
эскизное предложение.
Фон представляет собой отдельные фреймы, олицетворяющие
сочетание цветов и иллюстраций, так стиль Flat-style не предполагает собой
60
использование объема, бликов и теней, все элементы демонстрируются в
плоском виде.
Иллюстрации для графической концепции выполнялись в соответствии
с требованиями к стилю и теме проекта. В них использовались такая методика
как - Правило третей в композиции. Эскизный ряд, представленный ниже
(Приложение 2,3,4,5), был разработан на основе пейзажей, и древне русских
легенд, и приданий. Иллюстрации пейзажей демонстрируют собой
спокойствие и красоту природы, тем самым призывая сохранить её чистоту и
изящность. Иллюстрация «Путника в горах» подразумевает собой контакт
человека с природой в стародавние времена, их симбиотическое
взаимовоздействие, когда человек заботился о природе.
Логотип выполнен в стилизации рунических камней, используя основной
цвет – желтый, и дополнительный коричневый. Светлый цветовой сегмент
передает солнечное настроение праздника и жизни. По проведенному
исследованию цвета, влияние желтого доказывает то, что в сочетание с темным
фоном воспроизводиться ассоциативное восприятие в памяти человека.
Коричневая подложка служит контрастным фоном фирменного блока, и является
олицетворением земли и стабильности. Символика фирменного блока является
совмещение времени в виде циферблата и природы в виде дерева, тем самым
показывая, что время властно над жизнью, и демонстрируя тем самым
философию жизни: что время на жизнь нельзя найти, его можно только
использовать ради самой жизни. Тем самым человек легче запоминает логотип и
узнает его на улице. Из-за разницы в тоне и контрасте логотип смотрится по-
разному, при этом он имеет одинаковый кернинг примерно в 5 мм.
61
Рис.22. Фирменный блок для экологического форума
2.11 Модель сайта
Окончательный вид проекта представляет собой визуализацию проекта
виде мокапа в его первоначальной среде.
Рис.23. Мокап Web-сайта для экологического форма
62
Вывод
Основа зарождения графического решения начинается с составления
идейного предложения, который в дальнейшем может помочь в развитии
проекта. Основной идеей для веб-сайта экологического форума является –
экология. По этой причине подобранный стиль, Flat-style является органичным
и рациональным решением для проекта, так как стиль олицетворяет в себе
большое количество графики, и в нем можно акцентировать необходимые
моменты для привлечения внимания пользователя.
Колористическое решение проекта также соответствует тематике
проекта, и имеет природные основные цвета – желтый, синий, и
дополнительный контраст – зеленого. При этом не маловажную роль играют
и монохромные цвета – белый и черный, выделяя необходимые элементы для
пользователя. Шрифтовое решение предполагает собой неординарную и
геометрическую гарнитуру – Aqum. Данная шрифтовая композиция была
выбрана за счет того, что Flat style предполагает собой гарнитуру без засечек
и необычным подходом, при этом она удобочитаема с разных устройств.
Для одностраничного сайта было решено использовать
композиционное решение в виде расположения файлов схемой Z. Данная
схема предназначена для таких веб-ресурсов как lending page, она нацелена на
удобное восприятие информации с любого носителя.
Эскизный проект фона, иллюстраций и логотипа были основаны на
идейное предложение славянской мифологии. Так как славяне чтили традиции
и производили взаимный симбиоз с природой, экология была основой
поклонения, тем самым в иллюстрациях отражена чистота природы,
выполненные плоском стиле – пейзажи. По мимо пейзажей в иллюстрации
присутствует славянская богиня – Триглава, олицетворяя единство земли,
воды и воздуха. Весь визуальный материал был выполнен в векторной
графике, и использован в самом сайте.
Финальным этапом работы стало составление единой композиции в
Mockup для визуализации проекта в естественной среде.
63
64
Глава 3. Экономический расчет проекта
Оценка стоимости проекта (услуги разработки сайта)
Для проведения оценки проекта, был проведен анализ конкурентов на
рынке труда c помощью интернет ресурса, таких сайтов как Яндекс.Услуги, и
Profi.ru. По предоставленным данным ключевыми аспектами исследования
оказались:
- Оплата труда по времени
- Сложность проекта
- Репутация дизайнера
- Профессионализм дизайнера
Для того чтобы рассчитать экономическую эффективность проекта,
необходимо учесть:
1. Среднестатистический гонорар дизайнера
2. Индивидуально затраченное время
3. Стоимость разработки проекта.
Среднестатистический гонорар дизайнера.
По проведенному исследованию, начинающий дизайнер с низкой
репутацией, стандартным уровнем знаний, в возрасте от 19 до 30 лет.
Ориентировочно начинающие дизайнеры используют в своем прайс-листе,
вот такую ценовую политику:
Диаграмма 2. Среднестатистический гонорар
65
По статистике видно, что в большинстве случаев дизайнеры берут за
создание сайта от 3000 руб., цены разнятся в зависимости от репутации,
образования, и навыков. Индивидуально затраченное время. За 1 час дизайнер
может составить ТЗ и ТУ с заказчиком. На создание одностраничного сайта
Landing Page, для эффективной и качественной работы затрачивается по
времени от 3 дней (72 часов) до 14 дней (336 часов).
Стоимость разработки проекта. По статистическим данным, дизайнер
на FreeLance получает гонорар по часовой оплате. В среднем, 1 час = 500 руб.,
тем самым чтобы рассчитать стоимость всего проекта, рабочий час умножаем
на кол-во дней.
Минимальная заработная плата за проект, включающая в себя
ускоренные сроки и низкое качество работы, будет составлять: 500 руб. × 72
часа = 36000 руб. Максимальная заработная плата за проект, включающая в
себя нормативно-установленные сроки, и хорошие качество работы, будет
составлять: 500 руб.× 240 часа = 168000 руб.
Итого: Качественная работа web-дизайнера индивидуальна по срокам,
опыту, и навыкам. Начинающий дизайнер по максимальным срокам
выполнения работы, может получить за 14 дней около 168000 рублей.
Создание Landing Page
3000-6000р 7000-10000р 11000-14000р от 14000р
66
Заключение
В процессе создания выпускной квалификационной – дипломной
работы на тему: Разработка графической концепции Web-сайта для
экологического форума, была проведена разработка проекта, в трех стадиях:
Исследовательская, Проектная, и Экономическая.
В исследовательской главе были изучены такие аспекты как: Понятие
экологического форума, история создания веб-сайтов, разновидности сетки,
анализ шрифтового оформления, изучение стилизации сайтов, влияние цвета
на психологию человека, анализ аналогов веб-сайта, и составление
потребителя для проекта.
Для изучения и построение проекта в начале нужно было изучить что
такое «экологический форум» и что в него должно входить. Основываясь на
истории создания веб-сайтов, было определенного что для разработки
графической концепции понадобиться меню с разделами на главы. Для того
чтобы разработать структуру проекта были изучены распространенные
стилистические решения веб-ресурсов и влияние цвета на психологию
человека. Основываясь на аналогах веб-сайта и анализе необходимых данных
был составлен потрет предполагаемого потребителя проекта.
Проектная глава подразумевала собой анализ и разработку: Разработка
ментальной карты идей, подбор стилистического решения, разработка
ассоциативного ряда и мудборда проект, разработка основной идеи
графической концепции, подбор и разработка шрифтового решения, подбор и
разработка цветового решения, Разработка сценария, разработка
композиционного решения, Разработка графической концепции и финальное
составления макета сайта. Разработка проекта была заложена на идейном
предложении составленным по описанному ранее портрету потребителя.
Таким образом на основе идейного предложения были составлены
ментальная карта и мудборд проекта, для визуального восприятия всех
аспектов и нюансов проекта, было принято решение использовать
67
одностраничный, информационный сайт lending page. Далее по разработанной
ментальной карте, и проанализированным современным стилистическим
решениям, было принято решение использовать такой популярный среди веб-
индустрии стиль как – flat style. Так как основной темой проекта является
экология, то цветовая композиция должна полностью соответствовать
тематике проекта, поэтому было принято решение использовать природные
цвета, а именно: основной цвет - желтый, и дополнительные цвета - голубой и
зеленый. Не менее важную роль также учувствуют монохромные цвета –
черный и белый. Они выполняют функцию выделения, но при этом не сильно
привлекают к себе внимания. Гарнитурой проекта является – Aqum.
Шрифтовая композиция была подобрана основываясь на особенности стиля, и
теме проекта, поэтому гарнитура не имеет засечек, но при этом поддерживает
латиницу и кириллицу. Данный шрифт используется в заголовках и основном
тексте проекта. Графическая составляющая проекта была разработана с
учетом главной темы проекта – природы. Поэтому пейзажи являются
основной составляющей иллюстраций, и фона. Для правильного понимания
процесса работы сайта, был составлен сценарий, который ясно демонстрирует
с помощью блок-схемы как пользователь будет взаимодействовать с сайтом.
Логотип для экологического форума был основан на языческой (славянской)
мифологии, сам нейминг – Life Time, при этом он выполнен с помощью
стилистического решения под славянские руны, точнее рунический камень.
Основным цветом логотипа является желтый, олицетворяя надежду и радость.
В финальной стадии проекта графическая концепция оформлена в единую
композицию с помощью Mockup.
Экономическая глава предполагает собой анализ и расчет всей
проектной работы. В неё входят: сбор и анализ средней себестоимости работы
дизайнера, и расчёт количества часов дизайнера за весь процесс работы.
68
Список использованных источников
1.Нормативные правовые акты и иные официальные документы
1. ГОСТ Р ИСО 9241-210-2016 Эргономика взаимодействия человек-
система. Часть 210. Человеко-ориентированное проектирование интерактивных
систем.
2. ГОСТ Р 8.674-2009 Государственная система обеспечения единства
измерений (ГСИ).
2.Литература
Научная и учебная литература
Основная литература:
1. Арбатский И.В. Шрифт и массмедиа: учебное пособие для
студентов высших учебных заведений, обучающихся по программам
магистерской подготовки по направлениям "Дизайн", "Дизайн архитектурной
среды", "Градостроительство: СФУ; 2015. – 271 с.
2. Г. Браэм. Психология цвета – М.: АСТ: Апрель, 2009. – 158, [2] с.
3. Иттен И. «Искусство цвета»: Издатель Д. Аронов; М.; 2004. – 53 с.
4. К. Хонеф «Поп-Арт»: Издатель Taschen/ АРТ-Родник; 2005. – 100 с.
5. Кашевский П. А. Шрифты: учебное пособие. Лiтаратура i
Мастацтва, 2012. – 192 с.
6. Мельцаев И.Г., Сорокин А.Ф., Андрианов С.Г., Мурзин А.Ю.
Экология. Экосистемы России. Учеб. пособие. Иваново, 2015. - 408 с.
7. Месяц С.В. ИОГАНН ВОЛЬФГАНГ ГЁТЕ И ЕГО УЧЕНИЕ О
ЦВЕТЕ: Издатель М.: Кругъ; 2012. —464 с.
3.Электронные источники
1. Анатомия тысячи шрифтов [электронный ресурс] – Режим доступа:
URL: https://habr.com/ru/company/nix/blog/347834/ (Дата обращения –
17.05.2020)
2. Виды сайтов и их классификация с примерами [электронный