Актуальность темы исследования:

Современный дизайн неуклонно расширяет сферу своих профессиональных задач. Сегодня многие считают, что дизайн – это универсальный метод проектирования, который можно использовать практически в любой сфере жизни. Также трудно переоценить значение интернет-ресурсов в современном мире, ведь благодаря им люди получили условия для учебы, работы и развлечений. Сейчас невозможно представить деятельность любой крупной компании без взаимодействия с клиентами через собственную интернет-платформу. Веб-сайт может быть использован в качестве мощного инструмента для создания имиджа организации, а также он открывает широкий спектр возможностей для привлечения целевой аудитории путем внедрения различных инструментов интернет-маркетинга. Дизайн веб-сайта является одним из ключевых моментов, влияющих на впечатление посетителей. Актуальность данной темы обусловлена тем, что наличие корпоративного имиджа является неотъемлемой частью любой успешной современной организации. Наличие фирменного стиля во всех проявлениях в сочетании с высококачественными предоставляемыми услугами создает отличный имидж компании и продвигает ее на рынке. Следовательно, это способствует постоянному росту интереса к ее деятельности.  Для такого рода организации, как экологический сайт-агрегатор, существует необходимость проявить больше внимания при создании ее визуального стиля, в связи с тем, что она должна нести в себе ключевые качества заслуживающей доверия, сильной и конкурентоспособной компании на рынке и сочетать в себе множество различных брендов. Это еще раз доказывает актуальность данного направления исследований.

Веб-дизайн также может быть способом привлечения людей к решению глобальных проблем. Например, сегодняшние экологические вопросы стали не только главной проблемой устойчивого социального развития общества, но и очень серьезными для выживания человечества в целом. В последнее время мир все больше озабочен экологическими проблемами. В Рунернете существует очень мало экологических сайтов с понятным и удобным дизайном. Интерфейсы и стилистика существующих эко-сайтов устарели и не выполняют должных функций. Зачастую новости об эко-мероприятиях или акциях размещаются на различных сайтах и ресурсах, поэтому следить за ними неудобно, и пользователи часто не знают об экологических мероприятиях, которые проходят в их районе.

Многие люди считают, что их собственные действия никак не могут повлиять на экологическую обстановку в мире, так как проблемы глобальны, и деятельности отдельно взятых личностей для их решения недостаточно.

Локальные экологические проблемы многих районов нашей страны остаются незамеченными. Поэтому создание экологического веб-ресурса важно для обеспечения удобства решения некоторых эко-проблем, так как он поможет не только тем, кто интересуется данной темой, но и привлечет новых людей в данное движение.

Степень разработанности проблемы:

На данный момент существует множество литературы, посвященной разработке дизайна веб-сайтов. В наши дни дизайн не заканчивается только логотипом, поэтому отсутствие достаточного количества постоянно обновляемой подробной литературы является проблемой.

Интернет развивается все быстрее с каждым годом, поэтому тренды и актуальные технологии в дизайне стремительно сменяют друг друга. В дальнейшем они будут только развиваться, и довольно быстро. К сожалению, в этом случае печатные издания теряют свою актуальность из-за невозможности постоянного дополнения и обновления информации. В свою очередь, интернет-пространство быстро развивается, и сейчас становится все более популярным осуществлять просветительскую деятельность онлайн. Отсутствие литературы, написанной профессионалами, на рынке интернет-ресурсов приводит к распространению не всегда корректной и актуальной информации, что приводит к распространению ложных суждений и выводов. Следствием этого является то, что заказчики не видят разницы в работе профессиональных и непрофессиональных дизайнеров, предпочитая обращаться к людям, имеющим лишь узкий круг знаний в этой области. Тем самым они лишают специалистов с профессиональным образованием работы, обесценивают образование в этой области и рискуют в итоге получить совершенно иной результат, чем ожидался.

Объект исследования: особенности проектирования интернет-портала, направленного на решение глобальной проблемы.

Предмет исследования: дизайн-концепт экологического интернет-портала.

Цель работы: разработать прототип экологического интернет-портала.

Задачи:

1. Ознакомиться и комплексно проанализировать уже существующую информацию о способах создания дизайна интернет-порталов;
2. Осуществить творческий поиск и разработать наименование для интернет-ресурса, применив материалы, изученные ранее, дать этому обоснование;
3. Выявить ключевые моменты в создании веб-дизайна, соответствующего современным тенденциям;
4. Выявить важные аспекты в создании айдентики, соответствующей современным тенденциям;
5. Разработать нейминг бренда;
6. Разработать концепцию айдентики для компании;
7. Создать прототип удобного и современного веб-сайта, который будет собирать эко-мероприятия с разных ресурсов в одном месте и предоставлять возможность удобного поиска.

ОСНОВНАЯ ЧАСТЬ

1.1. Виды сайтов.

Веб-сайт – это набор страниц в Интернете, которые позволяют пользователям получать определенную информацию или выполнять действия, такие как заказ товаров и услуг. Он состоит из одной или нескольких связанных страниц, объединенных единой стилистикой или общим дизайном, тематикой и гиперссылками. Чтобы создавать интернет-ресурсы, дизайнеры и разработчики используют специальные методики и технологии, которые определяют внутреннюю структуру и внешний вид ресурса. Дизайн и содержание каждого веб-сайта выбираются отдельно и зависят от выбранной темы и цели.

Веб-сайты могут отличаться друг от друга по многим параметрам, поэтому единой классификации интернет-ресурсов не существует. Эксперты делят ресурсы по наиболее отличительным характеристикам, например, по теме, структуре, дизайну, способу и цели создания. Если сайт посвящен какой-либо одной тематике, он называется узкотематическим, если он охватывает общирный круг вопросов и различных тем – то общим. Также существуют коммерческие и некоммерческие сайты, если различать веб-ресурсы по направленности на получение прибыли. По количество страниц сайты классифицируют как одностраничные и многостраничные.

Одностраничный веб-сайт (целевая страница или лендинг) — это веб-сайт, состоящий из одной страницы, зачастую посвященной продукту или услуге.

Цель многостраничных веб-сайтов – предоставить исчерпывающую информацию, поэтому эти ресурсы могут быть довольно крупными и содержать десятки или даже сотни страниц.

Типы сайтов по структуре и содержанию:

1. Интернет-магазин.
2. Визитка.
3. Новостные сайты.
4. Блоги.
5. Веб-сервисы.
6. Форумы.
7. Интернет-порталы.

Функции интернет-порталов очень обширны, их отличительной особенностью является активное взаимодействие с посетителями и целевой аудиторией. Порталы — это сложные веб-проекты, которые требуют высокой ресурсоемкости и посещаемости. На портале часто размещаются фотографии, аудио- и видеоматериалы, карты сайтов, блоги, форумы и чаты. Существует удобный механизм комментариев и поиска. Кроме того, портал может включать в себя формирование рейтингов и обмен сообщениями между пользователями.

Актуальность разработки сайта объясняется следующими факторами:

1. Быстрота подачи информации широкому кругу лиц;
2. Улучшение имиджа компании и повышение ее популярности;
3. Возможность организовать обратную связь с клиентами;
4. Оперативная связь с филиалами и представителями в разных концах страны и за рубежом;
5. Организация маркетинговых исследований;
6. Реклама и привлечение покупателей и клиентов;
7. Увеличение трафика. [14]

1.2 Виды и особенности интернет-порталов

На данном этапе стоит отметить, что абсолютно любой портал — это веб-сайт, но веб-сайт не всегда является порталом. Первая отличительная особенность интернет-портала заключается в его обширности и направленности. Независимо от того, расширен ли веб-сайт и наполнен ли он информацией, все они имеют свои собственные специфические функции и посвящены одной и той же теме. Задача веб-сайта – предоставить аудитории наибольшее количество материалов о продукте; задача интернет-портала – помочь читателям, а его цель – найти ответы на любые интересующие вопросы путем ссылки на внешние сервисы и предоставления необходимых ресурсов.

Для порталов наиболее важным компонентом является специфичная и структурированная навигация, которая не предусмотрена веб-сайтом.  Также порталы собирают вокруг себя публику с различными интересами, в то время как сайты имеют четкую и определенную целевую аудиторию.

Другими словами, интернет-порталы имеют больше функций и более сложную структуру.

1.3 Особенности сайтов-агрегаторов

Рассмотрим подробнее сайты-агрегаторы. Агрегаторы – это надёжный и прибыльный вид сборников трафика, обладающий высоким порогом входа. Агрегатор объединяет услуги, товары или информацию в рамках заданной тематики.

Агрегатор — это веб-сайт, который объединяет (собирает) и классифицирует информацию и предоставляет ресурсы от разных компаний на одной площадке.[13] Агрегатор — это каталог, в котором пользователь может быстро найти нужные для него позиции или объекты и сравнить их друг с другом.

Преимущества агрегированных веб-сайтов:

Тематические и информационные агрегаторы – это категория сайтов-агрегаторов, в которую входят те ресурсы, на которых собирается вся информация по определенной тематике, а также агрегаторы отзывов, всевозможные рейтинги, сайты-подборки и т.д. Эта категория является наиболее обширной, поэтому она зачастую пересекается с другими категориями. Цель этого агрегатора – предоставить посетителям интересующую их информацию в увлекательной и удобной форме, а также предложить пользователю все возможные публикации по представленной тематике.

1.4 Айдентика и ее значимость

Обычно пользователи формируют впечатление о компании на основе их веб-сайта, то есть они в основном ориентируются на веб-дизайн. Интернет-сайт должен вызывать визуальный интерес, а не отталкивать пользователей.

Айдентика — это определение графических элементов и форм, состоящих из концептуальных идей для создания визуальной коммуникационной компании, связанной общей идеей. Из этого следует, что для определения реальных задач, которые должна отражать айдентика, необходимо выработать четкое и обоснованное понимание концепций визуальной коммуникации конкретной организации. В свою очередь, визуальная коммуникация — это группа сторон, которые передают информацию посредством визуального языка и восприятия.

Можно выделить следующие задачи, которые должна выполнять айдентика веб-ресурсов:

1. Помощь в формировании доверия;

2. Привлечение потенциальных посетителей;

3. Помощь в идентификации, повышение узнаваемости ресурса;

4. Продвижение ресурса и его популяризация;

5. Закрепление у посетителей положительных эмоций, связанных с посещением ресурса.

Единый образ состоит из множества отдельных элементов, собранных в единое целое и транслирующих определенные идеи с помощью средств визуальной коммуникации. Основные компоненты айдентики это:

1. Имя (название компании).

Во многих случаях название бренда является отправной точкой для всей разработки фирменного стиля. Название должно подходить к виду деятельности компании, быть понятным любому, запоминающимся сразу и надолго. Чтобы кратко передать концепцию бренда и основной смысл, название обычно дополняется описательным символом или слоганом.

2. Логотип.

Логотип является главным отличительным символом бренда. Он используется на различных носителях, будь то официальные документы или сувенирная продукция. Если название и слоган говорят о бренде словами, то логотип визуализирует его. Имя бренда может быть использовано в логотипе, но оно также должно быть стилизовано в соответствии с концепцией айдентики компании. При создании логотипа следует учитывать то, что он размещается на носителях разного масштаба, поэтому знак должен быть легко читаемым при любом размере.

3. Элементы дизайна.

Разработка элементов фирменного стиля и их носителей означает разработку компонентов дизайна, таких как фирменный цвет, типографика и дополнительные графические элементы.

Фирменный цвет – это важный визуальный индикатор, который создает ассоциацию с брендом. В большинстве случаев цвет оказывает психологическое воздействие на людей и формирует эмоциональный стандарт. Например, синий повышает доверие, красный - смело привлекает внимание, зеленый - связан с экологически чистыми вещами, а черный говорит о строгости, дисциплине и статусе. Таким образом, цвет может передать характер, ценности и принципы бренда. Если фирменных цветов несколько, важно соблюдать баланс между основным тоном и яркостью акцента. Кроме того, цвета на всех носителях должны быть одинаковыми.

Типографика – это оформление всех текстовых элементов, участвующих в дизайне. Самой важной частью типографики является шрифт. Их может быть несколько, но важно правильно сочетать гарнитуры друг с другом. Кроме того, набор текста предусматривает единые правила настройки размера шрифта, интервалов, абзацев и формирования списков.

Разработка дополнительных графических элементов айдентики включает в себя единое оформление фотографий, фирменные паттерны, навигационные элементы, иконки, пиктограммы и многое другое.

1.5 Значимость веб-дизайна

Веб-дизайн – это процесс создания веб-сайта, который включает в себя техническую разработку, создание удобной структуры веб-страницы, графический дизайн и передачу информации в сеть. К основным принципам этого направления относятся баланс основных элементов, их органичность, ритм, верное расставление акцентов внимания, общий контраст и пропорции.

В веб-дизайне существуют две отрасти – UI и UX.

UI — это аббревиатура, которая расшифровывается как user interface и переводится как «пользовательский интерфейс». Это направление разработки цифровых продуктов, которое занимается созданием визуального стиля веб-сайтов и приложений или сервисов. Пользовательский интерфейс должен быть в первую очередь удобным и понятным, а также привлекать внимание с эстетической точки зрения. Каждый компонент должен сразу дать клиенту понять, какие функции он выполняет, а также все другие части интерфейса должны иметь четкую иерархическую структуру. Основные характеристики UI-дизайна:

1. Применим исключительно к цифровым продуктам;
2. Сосредоточен на тех элементах ресурса, с которыми посетитель взаимодействует непосредственно;
3. Призван создавать идеальное сочетание всех элементов визуала;
4. В результате получается продукт, отвечающий эстетическим предпочтениям пользователя.

UX расшифровывается как user experience, то есть «пользовательский опыт».[9] В этом его основное отличие от UI. Дизайнеры пользовательского опыта продумывают не только о внешний вид веб-сайта или сервиса, также в их задачи входит продумывание того, как клиент будет взаимодействовать с ресурсом. Такие дисциплины, как UX-дизайн, включают в себя множество смежных наук. Он часто отсылается к психологии, а также требует от дизайнера аналитических навыков и понимание того, как работают современные сервисы, приложения и технологии. Основные характеристики UX-дизайна:

1. Он используется в цифровых и аналоговых продуктах;
2. Обращает внимание на пользовательский опыт клиента – от понимания продукта до конечного взаимодействия с ним;
3. Создает структуры будущих приложений устраняет все возможные трудности, с которыми сталкиваются пользователи программы;
4. В результате получается продукт, который помогает пользователям решать свои проблемы.

ПРОЕКТНАЯ ЧАСТЬ

Основываясь на глубинном анализе приведенных выше аналогов и тенденций, можно сделать вывод, что существующие экологические интернет-порталы очень разнообразны, но в большинстве случаев имеют сложную непонятную структуру и не интуитивные системы навигации.  Все они имеют отличительные свойства, характерные непосредственно для эко-ресурсов – выбор цветового решения, ориентированность на определённую возрастную категорию, большое количество различной информации. Фирменный стиль у данных ресурсов очень разнообразный, но в большинстве случаев непродуманный и поверхностный. Как показывает анализ, крупные интернет-площадки уделяют больше внимания сбору информации, чем созданию фирменного стиля. Также они не уделяют должного внимание анализу пользовательского опыта, поэтому данные веб-ресурсы получаются неструктурированными и сложными для посетителей. Современные тенденции в веб-дизайне направлены на то, чтобы сделать ресурсы более удобными и понятными для пользователей, также новые тренды объединены тем, что стараются вызвать у посетителей приятные эмоции и заинтересовать необычными концепциями. 

Проект по разработке дизайн-концепта экологического интернет-портала «Атмосфера» учитывает опыт исследуемых аналогов, существующих в нынешнее время, что говорит об актуальности и востребованности бренда в дальнейшем. 

2.4. Задачи дизайн-проекта.

Основной из задач дизайн-проекта по разработке экологического интернет-портала является создание современного и удобного веб-ресурса, где основную часть будет занимать разработка айдентики и прототипа интернет-портала. Планируется разработать такой веб-сайт, который в дальнейшем сможет быть реализован. Задача решается благодаря актуальной графике, лаконичному и привлекающему внимание цветовому решению, созданию удобной и понятной структуры веб-сайта и системы навигации, современному подходу к позиционированию бренда. По итогам изученных современных тенденций в дизайне сайтов, можно прийти к выводу, что подобного рода позиционирование может поспособствовать популяризации веб-ресурса среди целевой аудитории, а также помочь интернет-порталу решить поставленные задачи.

2.5. Концепция проекта.

Изучив и проанализировав существующие виды сайтов, мною была выбрана концепция интернет-портала для реализации экологического интернет-ресурса, так как именно данный вид сайта предоставляет посетителям большое количество информации в полной мере, структурированно и понятно. Также мною был выбран механизм сайта-агрегатора, так как это лучшим образом решает проблему сбора актуальной информации. Опираясь на полученные при анализе теоретической информации знания, было разработано название для интернет-портала «Атмосфера», айдентика для бренда и прототип веб-сайта. Портал призван помочь государству и людям решить глобальные и локальные экологические проблемы. Основной целью проекта является создание крупной интернет-площадки, на которой собирается и структурируется вся информация, связанная с экологической тематикой. Проблемы, которые призван решить экологический интернет-портал:

1. В Интернете отсутствуют экологические сайты с понятным и удобным дизайном;
2. Интерфейсы и стилистика существующих эко-сайтов устарели и не выполняют должных функций;
3. Зачастую новости об эко-мероприятиях или акциях размещаются на разных сайтах, поэтому следить за ними неудобно;
4. Люди часто не знают об экологических мероприятиях, которые проходят в их районе;
5. Многие люди считают, что их собственные действия никак не могут повлиять на экологическую обстановку в мире, так как проблемы глобальны, и деятельности отдельно взятых личностей для их решения недостаточно;
6. Локальные экологические проблемы многих районов нашей страны остаются незамеченными.

Основная цель интернет-портала «Атмосфера» – с помощью средств дизайна обратить внимание на экологические проблемы современности и привлечь как можно больше людей к участию в мероприятиях по защите природы. Также портал должен оптимизировать поиск и организацию экологических мероприятий и дать людям из разных областей и регионов возможность рассказать о том, что их волнует и попытаться исправить данные проблемы. Основной задачей дизайн-проекта интернет-портала «Атмосфера» является создание удобного и современного веб-сайта, который будет собирать эко-мероприятия с разных ресурсов в одном месте и предоставлять возможность удобного поиска. Также веб-ресурс преследует задачу создания индивидуальной подборки эко-мероприятий для каждого пользователя на основе геопозиции и интересов, выявление на основе опросов и анкет локальных и непопулярных экологических проблем и дальнейшее предоставление вариантов их решения. Одна из особенностей портала – сбор наглядной статистики общественного мнения по поводу различных экологических проблем и система наград для пользователей за прохождение опросов. Портал собирает новости и объявления об экологических мероприятиях с различных ресурсов.

При регистрации пользователь указывает район, в котором он живет, и свои интересы. Каждому пользователю сервис предлагает решение волнующей его проблемы, которое он в силах осуществить. Например, пользователя не устраивает озеленение в его районе, тогда сервис предлагает ему посетить ближайшую к нему акцию по высадке леса, тем самым призывая людей действовать, а не ждать, когда волнующие их проблемы решит кто-то другой. Мероприятия подбираются сервисом автоматически, опираясь на местоположение пользователя. Если в районе пользователя интересующих его мероприятий не проводится, то ему предлагают онлайн-акции или мероприятия в соседних округах. Также пользователь может через портал сообщить о данной проблеме в администрацию своего района, чтобы те, кто занимается организацией эко мероприятий, обратили на это внимание и в будущем предприняли меры для решения проблемы. Благодаря этому у жителей небольших районов и маленьких городов появляется возможность повлиять на экологическую обстановку в их области. Также зарегистрированному на сайте пользователю предлагается пройти опросы по поводу разных экологических проблем, как глобальных так локальных.

Чтобы у пользователя была мотивация участвовать в опросах, за каждый он получает акции, промокоды и скидки в магазинах известных eco-friendly брендов. Из ответов разных пользователей собирается наглядная статистика, которая помогает определить, что больше всего волнует людей. Также с помощью опросов выявляются локальные и непопулярные проблемы, они придаются огласке и получают возможность быть решенными.

Особенности интернет-портала «Атмосфера»:

Сайт привлекает тех, кто никогда не придавал теме экологии особого значения, обратить на это внимание и поучаствовать в мероприятиях. Также данный ресурс помогает интересующимся узнать о том, какие акции проходят в их районах для решения экологических проблем, ведь он собирает мероприятия и новости с разных ресурсов, тем самым упрощая поиск. Сайт обращает внимание не только на крупные проблемы, он делает особый акцент на поддержке малонаселенных регионов, жители которых тоже хотят участвовать в эко-мероприятиях и хотят быть услышанными. Также данный интернет-ресурс бросает вызов пользователям, призывая решать беспокоящие проблемы самостоятельно, начиная с себя. Портал показывает статистику, которая основана на мнениях «живых» людей, что поможет привлечь внимание власти к определенным проблемам.

Цель, которую необходимо достигнуть в данном дизайн-проекте – создание свежего и современного взгляда на экологический интернет-портал, соответствующего современным требованиям, разработка айдентики, а также создание прототипа удобного веб-сайта. Планируется разработать веб-ресурс, который в дальнейшем сможет существовать в жизни, с возможной вероятностью расширения.

Цели будут достигнуты, благодаря созданию единой концепции, использованию лаконичных и природных цветов в дизайне, креативному подходу в оформлении страниц веб-сайта и системы навигации.

2.6 Состав проекта

Состав проекта: создание наименования для интернет-портала, разработка айдентики, создание элементов веб-сайта, создание прототипа многостраничного сайта.

2.7 Описание работы

Разработка нейминга и фирменного знака.

Наименование для интернет-портала «Атмосфера» было выбрано с основой на ассоциации с природными мотивами и экологической тематикой. Название олицетворяет всеобъемлющий характер бренда, а также призвано вызвать у пользователя эмоции доверия, спокойствия и надежности.  Были проведены анализ и проверка существующих наименований компаний на антиплагиат в данной тематической нише.

Были прописаны ключевые слова бренда, которые должны стать основой будущего фирменного стиля и помочь создавать правильный образ компании. Такими словами стали: атмосфера, воздух, дыхание, кислород, свобода, созерцание, полет, невесомость, небо, простор. Ключевые слова стали началом для разработки фирменного знака, так как сформировали нужные ассоциации и эмоции бренда. Также был создан мудборд, который раскрывает основную идею визуального стиля айдентики интернет-портала и на основе которого была разработан фирменный стиль компании.

Фирменный знак был выполнен в ручной графике, основываясь на пластике природных линий. Далее от был переведен в вектор с помощью графического редактора Adobe Illustrator. Фирменный знак включает в себя образы облаков, холмистых ландшафтов, волн, также ассоциируется с образом моллюска с жемчужиной или глаза, что отсылает наблюдателя к ключевому слову бренда «созерцание». Шрифтовая часть фирменного знака выполнена с помощью шрифта Montserrat c небольшой разрядкой, чтобы сделать наименование более воздушным и легким. (Рис. 1)

Для фирменного знака была выбрана цветовая гамма, которая вызывает ассоциации с природными пейзажами во время заката. Оттенки подчеркивают пластику фирменного знака, и формируют верные эмоции у пользователей. Также для проекта были выбраны дополнительные цвета, которые олицетворяют свободу, неспешность, экологичность и безопасность. У проекта большая палитра, так как природа не ограничена определенными цветами, и в концепции дизайна важно отобразить весь спектр природных оттенков, чтобы вызвать у пользователя наиболее точные ассоциации. (Рис. 2)

Дополнительные графические элементы.

В первую очередь был проведен тщательный поиск среди уже существующей информации о создании дополнительных элементов айдентики и всех тонкостей данного направления. Далее были выявлены основные задачи дополнительных графических элементов: они призваны подчеркнуть особенности сайта и поспособствовать большей узнаваемости и распространению интернет-портала. Также они задают общее настроение фирменного стиля компании.

Дополнительными графическими элементами дизайна стали плавные линии, созданные, как и фирменный знак, на основе природных мотивов. Графика была нарисована от руки в программе Adobe Photoshop и впоследствии переведена в вектор и доработана в графическом редакторе Adobe Illustrator, Данные элементы призваны создать верные акценты на веб-сайте, а также могут использоваться на носителях фирменного стиля. Кроме того, дополнительная графика впоследствии будет использована для создания элементов веб-дизайна. (Рис. 3)

После этого были созданы иконки и пиктограммы для использования на сайте. Тщательно расставленные акценты на веб-сайте помогают привлечь внимание пользователей и направить их на целенаправленные действия или просто понимание предоставленной информации. Одним из инструментов акцентирования внимания являются иконки, значки и пиктограммы – изображения,  используемые для обозначения какой-либо информации. Элементы были отрисованы вручную и впоследствии переведены в вектор в графическом редакторе Adobe Illustrator. Важно было учитывать размеры иконок и их пропорции, чтобы все детали смотрелись одинаково и не выбивались из общей стилистики. Иконки и пиктограммы были созданы на основе пластики линий фирменного знака и общей концепции проекта.

(Рис. 4)

Разработка структуры сайта.

Любой ресурс создается в соответствии с определенным планом. Именно это показывает структура веб-сайта. В таком плане должно быть указано, как страницы сайта должны располагаться относительно друг друга. В большинстве случаев это делается в виде графической диаграммы, которая содержит отдельные блоки и соединяющие их стрелки. Структура может быть внешней и внутренней. Внешняя – это макет страницы, отдельные элементы которого помечены блоками. Внутренняя структура включает в себя категории и части веб-сайта, а также взаимосвязь между каждой страницей и элементами навигации. Требования к структуре веб-сайта могут быть разными, но независимо от них информация должна предоставляться в удобной для пользователя форме.

В результате анализа была выбрана древовидная структура для сайта, так как это самый универсальный способ. В такой структуре каждому продукту или услуге присваивается отдельная ветвь: часть или подраздел. Пользователи Рунета лучше всего знакомы именно с такой структурой сайтов, поэтому для них данный ресурс будет удобен и понятен. Используя древовидную структуру, семантическая нагрузка распределяется между главной страницей и различными частями, поскольку каждая страница связана с ними. Схема структуры сайта была сделана на платформе Miro. (Рис. 5)

Разработка фирменных иллюстраций.

Были выявлены основные задачи фирменных иллюстраций – они используются как фоновые изображения на различных страницах веб-сайта, а также призваны передать основную концепцию фирменного стиля компании. Иллюстрации олицетворяют эмоцию спокойствия, чувство простора и ощущение свободы. В окружающем нас природном мире существует огромное количество цветов и оттенков. Некоторые из них вызывают у большинства из нас приятные чувства, но, помимо этого, существуют также уникальные цветовые сочетания, которые оказывают значительное влияние на человеческие эмоции. Основываясь на теории цвета, мной были выявлены наиболее подходящие под концепцию проекта цветовые сочетания.

Изображения выполнены в растровом графическом редакторе Adobe Photoshop. Основной акцент в иллюстрациях на цвете и форме, с помощью которых создается экологичный и атмосферный образ. Изображения созданы с помощью мягких кистей, заливок и градиентов с использованием фирменных цветов бренда. Чтобы сделать иллюстрации как можно более близкими к естественным природным образам, мной были тщательно подобраны цвета, которые выражаются в различных оттенках, градиентах и сочетаниях. (Рис. 5,6)

Разработка лендинговой страницы.

Далее был разработан макет лендинговой страницы с использованием фирменных иллюстраций. Цель страницы – рассказать новым пользователям о веб-ресурсе, объяснить цели и задачи, привлечь посетителей зарегистрироваться. При создании были использованы дополнительные графические элементы фирменного стиля, градиенты цветов и пиктограммы. (Рис. 7)

Разработка наполнения сайта.

После окончания работы над лендинговой страницей была начата разработка самого интернет-портала. Важная часть дизайна – отсутствие прямых линий и углов в элементах, поэтому шапка страницы и панель навигации выполнены с использованием плавных фирменных линий. Меню находится с левой стороны страницы и сделано в виде пиктограмм, заключенных в круги. Пользователь может нажать на иконку меню в левом верхнем углу и развернуть его, чтобы узнать, какие рубрики сайта обозначают иконки. Для удобства меню всегда находится в свернутом виде. В правом нижнем углу всегда находится кнопка «наверх», выполненная в виде стрелки, заключенной в круг. Она используется для того, чтобы пользователь мог быстро перемеситься в верх страницы.

Главная страница сайта имеет заголовок «Для вас», так как она создается автоматически на основе интересов и местоположения пользователя. На главном экране страницы находится новость, которую сайт предлагает пользователю как самую интересную именно для него. Также присутствует кнопка призыва к действию – нажав на нее, пользователь может быстро перейти к странице новости и прочитать ее.

После создания основных и второстепенных страниц были разработаны дополнительные страницы, фреймы и элементы сайта. Например, выпадающие фреймы уведомлений и сообщений пользователя. Нажав на соответствующие иконки в правой части шапки сайта можно быстро посмотреть информацию о новых уведомлениях, при этом не отвлекаясь от чтения публикаций или другой деятельности на сайте. Также было выполнено прототипирование с целью наглядно показать работу сайта.

(Рис. 8)

ЗАКЛЮЧЕНИЕ

На основании проделанной работы были разработаны нейминг бренда, айдентика и прототип экологического интернет-портала «Атмосфера».

Проведен анализ графического оформления уже существующих на данный момент интернет-порталов, выявлены современные тенденции и тренды в этой области.

Подобраны: цвета, стилистика, шрифты.

Разработаны: нейминг, фирменный знак, айдентика, фирменные иллюстрации, макет страниц веб-сайта, прототип сайта.

Дизайн фирменного блока был разработан с помощью ручной графики и отражает пластику природных линий, вызывая ассоциации с ключевыми словами бренда: простор, воздух, созерцание. Цветовая гамма фирменного знака подчеркивает характер линий и формирует нужные эмоции и ассоциации у пользователей.

Для дизайна макетов страниц сайта были выбраны яркие градиенты в сочетании со спокойными фирменными цветами, что создает ощущение пространства и воздуха и в полной мере соответствует концепции бренда.

Создан прототип интернет-портала, состоящий из пяти основных страниц, личного кабинета, дополнительных и служебных страниц. Макет выполняет поставленные задачи – сайт удобен в использовании, имеет интуитивно понятную навигацию, не перегружен элементами и эстетически привлекателен.

Выявлены и применены современные тенденции создания айдентики для интернет-ресурсов в текущий период времени, позволяющие выделиться среди конкурентов и активно продвигаться в интернет-среде. В результате анализа удалось выяснить, что подобные веб-сайты агрегаторы пользуются большим спросом у пользователей, так как предлагают большое количество актуальной информации по определенной тематике.

Дизайн интернет-портала современен, привлекателен и понятен для целевой аудитории, это пролонгирует его востребованность в настоящее время и в будущем.

Цели достигнуты, задачи проекта реализованы полностью. Проект соответствует современным требованиям и тенденциям, и может стать новым интернет-ресурсом такого типа и составить конкуренцию существующим экологическим сайтам.

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1. Алексеев А. Введение в Web-дизайн. Учебное пособие. — М.: ДМК Пресс, 2019. — 184 c.
2. Луптон Э. Графический дизайн от идеи до воплощения. СПб.: Питер, 2013. – 184 с.
3. Розенсон И. Основы теории дизайна: Учебник для вузов. СПб.: Питер, 2012. – 224 с.
4. Эвами М. LOGO. Создание логотипов. Самые современные разработки. СПб.: Питер, 2012. – 352 с.
5. Эйри Д. Логотип и фирменный стиль. Рук-во дизайнера. СПб.: Питер, 2011. – 208 с.
6. Алексеев А. Г. Дизайн-проектирование. — М.: Юрайт, 2020. — 91 c.
7. Голомбински К. Добавь воздуха! Основы визуального дизайна для графики веб и мультимедиа / К. Голомбински, Р. Хаген; Пер. с англ. Н.А. Римицан.. — СПб.: Питер, 2013. — 272 c.
8. Павловская Е. Э. Графический дизайн. Современные концепции. – М.: Юрайт, 2020. – 120 c.
9. Сырых Ю. А. Современный веб-дизайн. Настольный и мобильный. — М.: Диалектика, 2019. — 384 c.
10. Шокорова Л. В. Дизайн-проектирование: стилизация. — М.: Юрайт, 2020. — 111 c.
11. Мидлтон К., Херриот Л. КЛИПАРТ. Использование готовых изображений в профессиональном дизайне. М.: АСТ; Астрель, 2007. – 176с.
12. Re:vision проект, посвященный новостям альтернативного дизайна (графическому и рекламному дизайну, брендингу и креативу и др.) [Электронный ресурс] / URL: сайт http://www.revision.ru. (дата обращения: 30.04.2022)
13. Яндекс.Дзен. Платформа для блогеров и медиа [Электронный ресурс] / URL: сайт https://zen.yandex.ru. (дата обращения: 14.04.2022)
14. Cetera. Форум о поддержке веб-сайтов [Электронный ресурс] / URL: сайт https://cetera.ru. (дата обращения: 19.05.2022)
15. Студопедия – Информационный студенческий ресурс [Электронный ресурс] / URL: сайт https://studopedia.ru. (дата обращения: 19.05.2022)
16. Vc.ru – интернет-издание [Электронный ресурс] / URL: сайт https://vc.ru. (дата обращения: 25.05.2022)

 

Файлы:

• 204._Карпулева_Анна._Дизайн-концепт_экологического_и_9U4Iw3i.pdf