Содержание
ВВЕДЕНИЕ ...................................................................................................................... 9
ГЛАВА 1. ИССЛЕДОВАТЕЛЬСКО-АНАЛИТИЧЕСКАЯ ................................. 14
1.1. История возникновения веб-дизайна ............................................................. 14
1.2. Построение модульной сетки веб-страниц ................................................... 15
1.3. Эко-стиль жизни .............................................................................................. 17
1.4. Целевая аудитория ........................................................................................... 24
1.5. Анализ аналогов ............................................................................................... 28
1.6. Экспертная оценка аналогов........................................................................... 33
1.7. Перспективы развития ..................................................................................... 36
Выводы по первой главе ............................................................................................. 38
ГЛАВА 2. ПРОЕКТНО-ГРАФИЧЕСКАЯ ............................................................... 40
2.1. Описание проекта ............................................................................................ 40
2.2. Взаимодействие пользователя и интерфейса ................................................ 42
2.3. Цветовая концепция ........................................................................................ 44
2.4. Шрифт ............................................................................................................... 46
2.5. Разработка фирменного блока ........................................................................ 50
2.6. Стиль сайта ....................................................................................................... 51
2.7. Построение сайта ............................................................................................. 56
2.7.1 Сетки для веб-интерфейса ............................................................................ 57
2.8. Нормативные документы для проектирования веб-сайта ........................... 60
2.9. Охрана веб-сайта .............................................................................................. 61
Выводы по второй главе ............................................................................................. 62
3 ГЛАВА. ЭКОНОМИЧЕСКАЯ ................................................................................ 65
3.1. Стоимость работы за разработку сайта ......................................................... 65
3.2. Продвижение сайта .......................................................................................... 66
Выводы по третьей главе ........................................................................................... 69
ЗАКЛЮЧЕНИЕ ............................................................................................................ 71
СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ ................................................ 73
ВВЕДЕНИЕ
В 21 веке люди живут в мире высоких технологий, массового потребления и
создается ощущение, что жить экологично невозможно. Ежедневно заводы
выбрасывают: загрязненную воду с различными химикатами в озера, реки, моря и
океаны, где имеется множество видов морских жителей, где местные жители
стирают одежду и используют воду для бытовых нужд, для питья; смог, из-за
которого становится тяжело дышать, чьи частицы вдыхает человек и неизвестно,
как они влияют на наш организм. На одну пару джинс для взрослого человека может
уйти от 5 тысяч до 15 тысяч литров воды, 50% которых уходит на изготовление
хлопка для производства денима и производство одежды находится на втором месте
по загрязнению планеты после добычи угля. Выхлопные трубы машин выделяют
ядовитые газы, которые добавляют тяжесть воздуха вместе со смогом. В одном
мегаполисе более трёх миллионов машин, а одна машина за год выпускает около 9
килограмм углекислого газа - это около 27 000 000 кг углекислого газа. Люди
разбрасывают мусор на земле и выбрасывают его намеренно в воду, в особенности
тяжелую химию и нефть от которой гибнет всё. По исследованиям экспертов у мира
в запасе не более 50 лет, чтобы предотвратить не поддающиеся исправлению
экологические изменения.
Но на самом деле жить экологично достаточно легко, главное начать с себя,
не ждать какого-то лидера, который поведет народ за собой. Экологический стиль
жизнь - это прежде всего самодисциплина и обновленное мышление к которому
легко прийти, не потратив финансов на какие-то курсы, тренинги и т.п. Так
возникла идея «eco-friendly», когда количество проблем, связанных с окружающей
средой, возросло в несколько раз. Ранее о глобальном потеплении писали лишь в
книгах, сейчас это одна из проблем, которая грозит планете. Обновленное
мышление - это зеленое мышление, образ жизни, и это ненасилие над собой, а
переосмысление образа жизни в лучшую сторону: в мир творчества, осознанности,
здоровья, экономии средств.
Основные принципы идеи «eco-friendly» заключаются в том, чтобы
уменьшить количество углекислого газа, выпускаемого в атмосферу и разумном
использовании природных и прочих ресурсов. «Eco-friendly» - это стиль жизни,
который позволяет делать что-то полезное для себя и для планеты и это то, что не
услышат по телевизору или прочитают в газете. Ведь в новостях говорится лишь об
уместных темах, чаще всего связанных с политикой и не подчинением граждан
закону. О экологических проблемах СМИ замалчивает, т.к. это прежде всего
заработок больших корпораций. На деревьях зарабатывают, как и на животных.
Делают из них шубы и эксперименты ради разработки косметологической и
медицинской продукции, что по законам человечества крайне негуманно и не
этично. В книгах людей более интересует философия о жизни и познания самого
себя, чем какие-то проблемы, ведь проблему рассказывают не просто для того,
чтобы о ней знали, но, и чтобы боролись с ней. Легче найти сайт в интернете, где
кратко и по факту будет рассказано об основной проблеме и о способе ее решения
не затратно, чем для этого купят книгу или будут смотреть полуторачасовой фильм
о многочисленных экологических проблемах, о которых всем давно известно.
Сайты хранят в себе множество полезной информации, которая находится в
открытом доступе для любых пользователей, а потому так хорошо пользуются
спросом в мире. Все сайты ориентированы на группы пользователей,
объединяющихся по одним интересам и ищущих информацию определенного
характера, а если у таких сайтов хорошее юзабилити - информация собрана по
крупицам и может дать развернутые ответ на цель, по которой пользователь
посетил сайт, то это будет ценится вдвойне. Сайты создаются именно для хранения
и сбора информации, которая находит своих потребителей и за счет которых
владелец сайта извлекает свою выгоду.
В современном мире пользователь ценит качество, а не количество, потому
информация на сайте должна быть качественной, интересной и полезной. На какую
бы аудиторию не был направлен сайт, а должен раскрывать информацию до
мелочей, чтобы пользователь полностью был просвещён в теме, что ему интересна
или нужна. Информационные сайты актуальны тогда, когда их информационный
объем постоянно пополняется чем-то интересным.
Информацию можно брать из разных источников, например, из книг, СМИ,
из статей ученых, специалистов, но только благодаря интернету и сайтам
пользователь может найти и сохранить информацию для длительного пользования,
делать закладки и возвращаться к необходимому источнику в любой момент. Это и
делает сайтостроение востребованным, а качественный сайт - успешным,
приносящим доход своему владельцу.
В данном проекте будет рассмотрен веб-дизайн сайта на тему «графическая
концепция веб-сайта» для экологического стиля жизни «eco-friendly».
Актуальность темы исследования. «Eco-friendly» – это неотъемлемая часть
жизни, которая держит равновесие между человеком и природой для взаимно
здоровой и длительной жизни.
Теоретическая значимость исследовательской работы заключается в том,
что благодаря созданному проекту больше людей узнает, как можно экологично и
экономично.
Практическая значимость «графической концепции веб-сайта» для
экологического стиля жизни «eco-friendly», заключается в возможности внедрения
«eco-friendly» в жизнь людей.
Объектом исследования является экологический стиль жизни «eco-friendly».
Предметом исследования является графическая концепция веб-сайта.
Степень изученности проблемы. О экологии с каждым днем говорят все
чаще, но не многие задумываются как начать устранять эти проблемы, т.к. на
устранение проблем уходит много времени и средств. «Eco-friendly» несет в себе не
так много информации для того, чтобы сделать этот стиль жизни своим образом
мышления, потому не было найдено сайтов полностью посвященных данной теме.
Найдены были лишь сайты, связанные с новостями из мира экологии и магазинами.
Цель дипломной работы: разработать графическую концепцию веб сайта
для экологического стиля жизни «eco-friendly», которая позволит заинтересовать
потребителя экологическим стилем жизни.
Задачи проекта:
1. Изучить построение веб-сайтов и стили сайтов.
2. Выявить целевую аудиторию.
3. Выполнить разработку графической концепции веб-сайта.
4. Описать взаимодействие интерфейса и пользователя.
5. Рассчитать затраты на проект.
Для написания дипломного проекта была выбрана методологическая база:
- метод синтеза и обобщений: используется в теоретической части работы при
сопоставлении и интеграции принципов, идей и результатов отечественных и
зарубежных исследований;
- метод классификации, метод сравнений, системный и типологический
методы: используются для анализа объектов графического дизайна;
- метод стилистического анализа: используется для определения визуальных
особенностей анализируемых объектов;
- метод дедукции: если сначала изучалась теория вопроса, а потом она
рассматривалась в применении к конкретным случаям.
С помощью метода «стилистического анализа» было решено сделать
подборку референсов за с помощью сайтов «Behance» и «Pinterest». Подборка нужна
для того, чтобы изучить существующие элементы для привлечения пользователя, дабы
перенять некоторые идеи. Благодаря этой подборке у заказчика графической концепции
веб-сайта может сложиться примерное представление готовой работы, в течении
разработки концепции сайта можно будет избежать ненужных правок в дальнейшем.
Использование различных методов обусловлено необходимостью решения
различных задач в процессе работы над дипломным проектом.
Данный дипломный проект состоит из трех глав:
1. Исследовательско-аналитическая – рассматривается история веб-
дизайна, целевая аудитория, основные темы «eco-friendly», аналоги сайтов,
тенденции развития веб-дизайна;
2. Проектно-графическая – описывается взаимодействие интерфейса и
пользователя, разработка фирменного блока, концепции веб-сайта, фирменный
стиль, варианты сеток, госты, авторское право, стили сайтов;
3. Экономическая – расчет затрат на разработку веб-сайта, рекламу сайта.
ГЛАВА 1. ИССЛЕДОВАТЕЛЬСКО-АНАЛИТИЧЕСКАЯ
1.1. История возникновения веб-дизайна
Началом истории веб-дизайна стоит назвать момент появления первого сайта
— холста дизайнеров [9].
самый первый сайт увидел свет 6 августа 1991 года. Всё, что могли содержать
первые в мире страницы — ссылки и текст. О красоте сайтов не говорили вплоть до
22 апреля 1993 года, когда выпустили первый графический браузер Mosaic,
поддерживающий просмотр изображений. Так однообразный текст стали
разбавлять яркими картинками.
в этот период сайты начинают пестреть, как бразильский карнавал. Спасибо
появлению цветных фонов. В эти годы, в добавок ко всему, появляется возможность
добавления на сайт разных шрифтов, в частности Times New Roman и Courier New.
Прогресс дошел и до размещения на страницах популярных сейчас GIF-
изображений.
облик сайта начинает чуть более походить на привычный нам: сайты теперь строят
на основе табличных макетов, добавляют эффекты и навигацию с иконками. Также
активно развивается FLASH-технология, вследствие чего появляется возможность
добавлять “мигающие” заставки.
в начале XXI века в web-дизайне в моду входят скругленные углы, блестящие
кнопки и градиенты. Веб-сайты становятся намного функциональнее и обзаводятся
более удобным пользовательским интерфейсом.
в web-дизайне с приходом Web 2.0 стали отдавать предпочтение тени, глянцевости
иконок и кнопок и мягким цветам интерфейсов. Также в тренде – упор на читаемый
и функциональный контент и интеграция в ресурсы анимационного контента.
с этого периода начинается активное развитие мобильных веб-приложений и вместе
с этим, появляются мобильные веб-сайты. Отсюда прослеживается тенденция
развития такого явления, как “адаптивность”. Разрабатываются первые социальные
сети и, как следствие, получает распространение размещение их иконок на сайтах.
Активно внедряются длинные макеты сайтов. Широкое распространение получают
стоковые фотографии и такое явление, как скевоморфизм.
Недолго дизайнеры баловались использованием новинок разных периодов, когда
осознали, что лучший выбор – простота. И тогда начинает все больше развиваться
сердечная любовь к минимализму. В этот период также появляются такие дизайн-
тренды, как плоский дизайн и параллакс. Особое внимание продолжают уделять
адаптивности сайтов.
В это время мир веб-дизайна остановился на выборе материального дизайна,
высокого разрешения графики на страницах, а также стала внедряться
интерактивность. Особую популярность получили видеоконтент и скроллджекинг.
Дизайнеры стали делать упор на индивидуальность, а посему в предпочтение
вывели уникальную графику и авторские иллюстрации. Собственно, большинство
сайтов, которые мы сейчас посещаем являются представителями именно этого
периода.
В будущем прогнозируется следующее:
Ровная сетка – это скучно. Поэтому на смену ей придёт нестандартная,
ломаная сетка, которая сделает сайты динамичнее и интереснее.
Продолжится бурное развитие тенденции на интерактивный дизайн и
анимацию.
Основным привлекающим внимание web-дизайна обещает стать шрифт,
как главный графический элемент интерфейса [10].
1.2. Построение модульной сетки веб-страниц
Модульная сетка в web-дизайне предполагает собой общую схему
расположения всех компонентов и блоков веб-сайта. Данный каркас проходит через
все страницы и помогает разработать порядок на сайте [11].
С помощью сеток выполняется основа, на которой как располагаются
элементы страницы: логотип, меню, формы, изображения. За счет скелета элементы
страницы можно выбрать их относительные и абсолютные размеры, задать
визуальный ритм [10].
Любой макет содержит большое количество элементов. Между элементами
возникают оптические связи и притяжения, которые подчиняются концепции
близости и, правилу внешнего и внутреннего. Сетка помогает придерживаться
этого правила, не вычисляя расстояние и размер в отдельности. Закладываются
ключевые закономерности один раз, при построении сетки. В отличие от
колоночной, модульная сетка задает вертикальный ритм и главные пропорции
элементов, поддерживая их во всем макете [12].
Число колонок зависит от контента. Если речь идёт о печатной продукции, то
в подавляющем большинстве случаев можно предположить число колонок еще на
стадии первых черновиков. Если нужно сделать равновесную композицию, то
можно обойтись двумя колонками. В этом случае выравнивание лого будет
центральным, а текст нужно будет размещать на глаз (рис. 1.1).
Рисунок 1.1. Макет модульной сетки
Модуль, это по сути пропорция. Ширина модуля равна ширине колонки, а
высота — нескольким строкам. Можно чередовать модули разной высоты. Главное,
чтобы в этом была какая-то логика и закономерность, сохраняющая вертикальный
ритм (рис. 1.2).
Рисунок 1.2. Модуль
1.3. Эко-стиль жизни
«Безопасный для экологии» – так переводится термин eco-friendly,
послуживший основным определением экологичного мышления человека в
настоящем времени. Доброжелательный, осмысленный аспект к окружающей среде
все более накапливает известность, так как вследствие него возможно научиться
причинять значительно меньше вреда нашей экосистеме и попытаться
сформировать наиболее высококачественную степень существования.
Главная концепция движения eco-friendly – сберечь планету и воздержаться
от неразумного потребления естественных ресурсов, резерв каковых, увы, не
безграничен [1].
Эко-продукты и эко-питание. Продукты, которые мы употребляем,
оказывают большое влияние на наше состояние здоровья и формирование наших