9
СОДЕРЖАНИЕ
Введение .............................................................................................................. 10
ГЛАВА 1. ИССЛЕДОВАТЕЛЬСКО-АНАЛИТИЧЕСКАЯ .............................. 12
1.1 Понятие «Экологического форума» ........................................................... 12
1.2 История возникновения web-сайтов .......................................................... 13
1.3 Сетки построения сайтов ............................................................................ 16
1.4 Исследование проблемы выбора шрифтового оформления .................... 17
1.5 Исследование и определение стиля для сайта .......................................... 22
1.6 Влияние цвета на психологию человека.................................................... 23
1.7 Аналоги web-сайтов экологического форума ........................................... 29
1.7.1 Экологический форум “Экология 2020” ............................................ 30
1.7.2.Молодежный экологический форум (М.Э.Ф.) .................................. 33
1.7.3 International Ecological Forum (I.E.F.) ................................................. 36
1.8 Портрет потребителя ................................................................................... 39
Вывод ................................................................................................................... 39
Глава 2. Проектно-графическая ........................................................................... 41
2.1 Разработка идеи для графической концепции web-сайта ........................ 42
2.2 Ментальная карта ......................................................................................... 43
2.3 Мудборт ........................................................................................................ 45
2.4 Выбор и обоснование стилистического решения ..................................... 46
2.5 Выбор и обоснование колористического решения .................................. 48
2.6 Выбор и обоснование шрифтового решения ............................................ 49
2.7 Разработка логотипа .................................................................................... 50
2.8 Разработка сценария для функционала сайта ........................................... 53
2.9 Подбор и разработка композиционного решения .................................... 56
2.10 Разработка графической концепции ........................................................ 59
2.11 Модель сайта .............................................................................................. 61
Вывод ................................................................................................................... 62
Глава 3. Экономический расчет проекта ............................................................ 64
Заключение ............................................................................................................ 66
Список использованных источников .................................................................. 68
Приложения ........................................................................................................... 72
10
Введение
Темой выпускной квалификационной работы – дипломной работы
является: Разработка графической концепции Web-сайта для экологического
форума.
Целевая аудитория данного проекта ориентирована на молодое
поколение от 19 до 30 лет.
Актуальность данного проекта заключается в том, чтобы привлечь
мировую общественность к глобальной экологической проблеме в виде
интернет-ресурса, так как веб-индустрия на данный момент является очень
популярной у данной целевой аудитории.
Степень изученности. Главная потребность в исследовании данной
работы заключается в том, чтобы продемонстрировать людям важность
экологии через иллюстративный ряд, и создание веб-ресурса, а именно:
влияние выхлопных газов на атмосферу, влияние пластика на уровень
загрязненности больших водоемов и рек, отношение человека к природе.
Целью выпускной квалификационной работы является: создание
графической концепции для экологического форума.
Объектом исследования является веб-сайты экологического форума, и
анализ графического оформления.
Предмет исследования – разработка серии иллюстраций, логотипа,
иконок, шрифтового, цветового и композиционного решения для построения
веб-ресурса.
Задачи проекта:
- Поиск и изучение литературного и электронного ресурса с
информативной базой по выбранной тематике проекта (историю появлениям и
аналоги)
- Сформирование идейное предложение и разработать ментальную
карту концепции проекта.
- Разработать эскизное предложение и эскизный проект графической
концепции веб-сайта.
11
- Разработать цветовое и шрифтовое решение для веб-сайта.
- Разработать композиционное решение веб-сайта
- Разработать визуальную концепцию веб-сайта
- Рассчитать экономическую составляющую проекта
Методология исследования представляет собой использование таких
методов как: сравнительный, логический, статистический анализ.
Практическая значимость проекта представляет собой:
С точки зрения автора проекта:
- Привлечение внимания общественности к проблеме экосистемы, и
решение этой проблемы, с целью долгого существования стабильной и не
токсичной биосферы земли
С точки зрения бизнеса:
- Привлечение внимания общественности к массовому
мероприятию, и предоставление необходимой информации о проекте с целью
приобретения билета на форум.
12
ГЛАВА 1. ИССЛЕДОВАТЕЛЬСКО-АНАЛИТИЧЕСКАЯ
1.1 Понятие «Экологического форума»
Экологический форум подразумевает собой общение и передачу
информации с разными слоями населения, и решение важных для человечества
проблем. На форуме существует множество специализаций и направлений по
изучению, внедрению новых технологий.
Мировые лидеры, ученые, философы, представители разных мировых
культур и сообществ принимают участие в таком виде мероприятия. Таким
образом общественность пытается привлечь внимание разных людей для
решения проблемы.
В Российской Федерации существует множество экологических проблем, и
большинство из них по вине человека, приведенные ниже проблемы часто
поднимают на форуме и рассматривают решение [15].
Основная тема Экологического форума — изменения в нормативной базе и
практика применения последних требований природоохранного
законодательства.
На Форуме выступят сотрудники Минприроды, Минстроя и ЖКХ России,
представители Росприроднадзора, ведущие эксперты природоохранной отрасли.
Основные темы Форума:
- порядок получения, переоформления и отзыва комплексных
экологических разрешений;
- нормативно-правовое регулирование в области обращения с отходами и
новых требованиях по переработке отходов;
- актуальные вопросы регулирования транспортирования отходов;
- особенности платы за негативное воздействие на работу ЦСВ и переход на
технологическое нормирование сбросf сточных вод;
- изменения в процедурах государственного экологического надзора,
увеличение ответственности за экологические правонарушения;
- новые правила функционирования рынка обращения с коммунальными
13
отходами и система взаимодействия предприятий и операторов по обращению с
отходами в регионах;
- требований к нормированию выбросов загрязняющих веществ;
- особенности действий Росприроднадзора и прокуратуры по возмещению
вреда окружающей среде в результате деятельности предприятий;
- результаты исполнения расширенной ответственности производителей и
импортеров по утилизации продукции и упаковки, необходимая отчетность по
исполнению такой ответственности;
- особенности применения требований законодательства при использовании
и охране земель различных категорий и осуществлении земельного надзора.
1.2 История возникновения web-сайтов
Прежде чем появилась возможность создавать сайты, возник интернет и
произошло это событие в 1990 году.
6 августа 1991 года в интернете был создан один из первых во всех смыслах
сайт, который располагался по электронному адресу info.cern.ch. Создателем его,
стал английский 46-летний ученый Тим Бернерс-Ли, который стал настоящим
основателем современных интернет-технологий.
Внешне первый сайт был невзрачен, что совершенно неудивительно. Он
представлял собой сплошную стартовую страницу белого цвета, на которой для
посетителей размещалась основная информация о инновационной технологии
того времени "World Wide Web". Здесь же, на первом во всем мире сайте, были
размещены и подробные инструкции по установке браузеров, а также серверов
на свои персональные компьютеры, то есть технологию "WWW", она стала
началом современного интернет-пространства, во всех его проявлениях.
По типу и своей простоте, самый первый сайт был интернет-каталогом,
одностраничным, невзрачным, но информационно наполненным. Через
некоторое время, разработчик позаботился о том, чтобы превратить этот сайт в
широкомасштабный каталог, который предоставлял пользователям информацию
о других, не менее важных сайтах и перенаправлял посетителей на их страницы,
посредством размещенных в каталоге ссылок.
14
Как рассказывает сам создатель интернета и сайта, не подозревая о том, что
за столько короткие сроки интернет наберет столь масштабную популярность
среди пользователей во всем мире. Он создавал свой сайт чтобы разместить на
нем адреса всех интернет-порталов, которые будут создаваться в дальнейшем.
Но спустя несколько лет, эта затея стала невозможной, да и ненужной, ведь
новые сайты стали появляться все чаще, а некоторые старые сайты менять своих
владельцев и уходить в прошлое.
Прежде чем создать и запустить свой первый сайт, задолго до этого Тим
Бернерс-Ли трудился над разработкой других, не менее важных инструментов.
Только после создания интернета, разработки самого первого в мире
гипертекстового браузера под названием WorldWideWeb или WWW, сервера,
запрограммированного на базе NeXTcube, без которого сайт ни каким образом
не мог быть запущенным, а также технологии веба HTTP, был создан и запущен
этот судьбоносный для всего человечества, сайт.
Плюсом новоиспеченного браузера, известного как WWW, было то, что он
открывал возможность для свободного доступа пользователей к внутренним
документам, находящимся в сети, а также к вложенным в сайты страницам. То
есть посредством этого браузера, пользователи могли посетить практически
любые, интересующие их страницы в интернете. Поэтому в самые короткие
сроки, именно браузер WWW стал считаться стандартным для выхода
пользователей во всемирную интернет-паутину.
Конечно, на первых порах, практически все программное обеспечение было
очень ограничено в плане функционала, а что касается панели первого веб-
редактора, то она и вовсе состояла из нескольких командных кнопок. Интересно,
что уже через пару месяцев после запуска первого сайта, стали очень широко
использоваться статичные веб-страницы, которые являлись своеобразными
информационными носителями о том или ином продукте, услуге.
Прошло много времени и на сегодняшний день, ни один из продуктов
который разработал Тим Бернерс-Ли, не используется в оригинале. Все они
потерпели изменения, реструктуризацию, которая помогла им приспособиться к
15
современному обществу и его запросам, хотя при этом остались в основе
программного софта. Но если говорить об основной концепции создания
интернета и сайта в целом, то все осталось неизменным. Так как и задумывал
разработчик, интернет используется для сбора и хранения информации, а сайты
являются своеобразными "папками", которые собирают и хранят информацию
различной направленности. Сегодня остается только удивляться тому, какую
огромную пользу человечеству, смог принести Тим Бернер-Ли. Когда-то он
создал интернет и первый сайт, произвел настоящую инновационную
революцию, предшествующую стремительному развитию интернет-технологий
и онлайн-бизнеса, размножению виртуальных-страниц, которые в настоящее
время исчисляются миллиардами.
Он сделал величайшую услугу для каждого человека, ведь сегодня мы
можем посетить любую страницу, найти необходимую информацию на
интересующую нам тему, заказать услугу, приобрести товар или даже
поговорить со своими близкими совершенно бесплатно, даже если они находятся
на другой стороне земного шара.
После появления самого первого сайта в сети-интернет, разработка сайтов
стала стремительно развиваться на коммерческом уровне и стала успешной
самостоятельной отраслью, которая пользуется спросом во всем мире. Так, в
1995 году веб-разработкой сайтов занималось уже примерно 1000 компаний, а по
истечении десяти лет, только в США таких компаний уже было не менее 30 000
единиц зарегистрированных официально.
Первый русскоязычный сайт появился в интернете только в 1995 году, а вот
более-менее активное развитие интернета стране началось только ближе к концу
90-х годов. На сегодняшний день интернет пользуется огромным спросом во
всем мире, множество провайдеров делают его доступным для все большего
количества аудитории, благодаря расширению зон покрытия. Люди давно
поняли и научились ценить всю прелесть интернет-паутины, в которой можно
строить настоящий бизнес, работать и просто общаться с близкими тебе по духу
единомышленниками. Но даже если нам кажется, что интернет освоен
16
человечеством от и до, учитывая молодой возраст этого новшества, можно смело
утверждать что на базе виртуальных разработок найдется еще масса
засекреченных резервов, которые человечеству только предстоит освоить [5].
1.3 Сетки построения сайтов
Макет, имеющий в своей основе сетку, — это макет с горизонтальными и
вертикальными направляющими, способствующий организации контента и
поддержанию единообразной структуры на всем протяжении создания проекта
[6].
Любой макет содержит множество элементов. В некоторых случаях их
становиться очень много. Между элементами возникают оптические связи и
притяжения, которые подчиняются теории близости и, в частности, правилу
«внешнего и внутреннего».
Сетка помогает соблюдать это правило, не вычисляя каждое расстояние и
размер в отдельности. Суть в том, что в основу закладываются ключевые
закономерности один раз, при построении сетки, а затем нужно только
придерживается их.
Для лучшего, практичного и функционального сайта всегда используют
разные виды сеток. На данный момент более популярны такие сетки как:
- Модульная сетка
- Колоночная сетка
Модульная сетка
В отличие от колоночной, модульная сетка задает вертикальный ритм и
основные пропорции элементов, поддерживая их во всем макете. Это удобная,
гибкая и довольно простая система [10].
Модульная сетка может быть иногда очень простой, а иногда с весьма
детализированной сложной структурой. Как и любой другой аспект дизайна, она
должна определяться целями создания сайта. Содержание определяется таким
факторами, как назначение сайта, предполагаемая аудитория, требования к
рекламным блокам и так далее. В рамках определения содержания задается
форма и структура модульной сетки. Поэтому, прежде, чем приступить к дизайну
17
сайта, нужно прояснить вопрос о наборе и типах содержания, которое будет
использоваться на веб страницах.
Цели должны определять дизайн, который будет выглядеть логичным, а не
просто набором абстрактных блоков. Отлично, когда структура шаблона создает
ощущение потока, ритма и даже движения. Нужно использовать различные
изображения, блоки текста и другие элементы дизайна так, чтобы они подходили
друг к другу, формируя сцены просмотра содержания. Хорошая модульная сетка
не только объединяет все элементы, но и создает единое целое, которое
гармонично представляет вместе различные разрозненные объекты. Лучше
использовать одинаковую структуру сетки для всего шаблона сайта. Стоит
тщательно разбирать все идеи, которые могут привести к достижению желаемого
результата. Даже самая абсурдная мысль может оказаться именно тем решением,
которое максимально соответствует вашим целям [20].
Колоночная сетка
Колонки — это основные составляющие каждой сетки. Ширина
межколонника (gutter) определяется его назначением, если он просто отделяет
элементы друг от друга, то разумно сделать его ширину минимально
необходимой, но он должен быть в любом случае ощутимо больше
межстрочного интервала, чтобы строки в соседних колонках не выглядели
продолжением друг друга [9, 11]. Самые распространённые виды данной сетки
это: 12 колоночная сетка, 8-колоночная, 6-колоночная, 3-колоночная, 2-
колоночная, и 1-колоночная.
1.4 Исследование проблемы выбора шрифтового оформления
На данный момент существует более тысячи шрифтовых гарнитур и
стилей, и не каждая гарнитура может поддерживать большое количество
языков. Данное исследование проводиться с помощью сравнительного, и
статистического анализа. В мире дизайна существуют свои правила и законы,
так же и в типографике. Шрифтовые композиции имеют свои отличия и
особенности, и большинство из них уникальны.
18
Для большей оптимизации нужной шрифтовой гарнитуры, можно
использовать несколько методов сортировки по таким категориям как:
- Классификация
- Характеристика
- Анатомические свойства
Классификация
Существует сложная система классификации шрифтов. Простейшее
деление на категории: шрифты с засечками (serif), гротески (sans-serif),
моноширинные (monospaced), рукописные (script) и шрифты для дисплеев
(display). Обычно эти категории используются в качестве фильтров на разных
шрифтовых сайтах. Но даже эти простые фильтры всё ещё ставят нас перед
слишком богатым выбором шрифтов. Здесь уже возникают более дробные
градации, например, шрифты с засечками делятся на переходные,
гуманистические и готические.
Характеристика
Особенность по характеристики, являются разные черты букв, обычно
выделяют такие моменты как:
- Контраст
- X-высота
- Ширина/ Пропорция
- Вес
- Расстояние
- Схожесть
Контраст
Контраст описывает соотношение тонких и толстых штрихов символа.
Есть шрифты с низким контрастом, например, брусковые, или многие
гротески, созданные для интерфейсов, например, Roboto или San Francisco. А
есть шрифты с высоким контрастом, например, Bodoni или Didot. Для
измерения контраста можно посмотреть на контуры буквы «о» и сравнить
самое большое и самое маленькое расстояние между внутренним и внешним