ТИТАНОВАЯ ДОЛИНАОсобая экономическая зона
О клиенте
Титановая долина - это особая экономическая зона промышленно-производственного типа с особым юридическим статусом и льготными экономическими условиями для национальных и иностранных предпринимателей.
Цель:
Реализовать новый дизайн электронного информационного представитеольства ОАО ОЭЗ “Титановая долина” с последующим размещением в сети Интернет с адаптивной/мобильной версией.
Идея:
При разработке концепции, мы решили воплотить на главной странице сайта идею объединения понятий “Географической навигации” и “Навигации по сайту”, где при передвижении по изображению области, пользователь сможет передвигаться и по страницам сайта.
Данная концепция рассчитана на повышение активности пользователей на сайте в виду предложенного новшества строения сайта.
Photoshop
Illustrator
Figma
Целевая аудитория
Делится на 4 основные группы:
- Российские и зарубежные инвесторы, владельцы, генеральные директора, технические директора российского и зарубежного крупного и среднего бизнеса промышленных отраслей: металлургия, машиностроение (оборудование и расходные материалы), деревообработка, строительные материалы, медицинские инструменты, компоненты для авиации.
- Государственные органы федерального и регионального уровня.
- Средства массовой информации: российские федерального и регионального уровня, зарубежные отраслевые.
- Контрагенты: взаимодействие по услугам компании.
Задачи
Интернет-представительство должно формировать у целевого пользователя образ большой сильной Компании с хозяйственным укладом и дисциплиной на всех уровнях принятия и исполнения решений. Стилевое оформление сайта должно соответствовать корпоративному стилю компаниии.
Сайт должен предоставлять доступ к информации о компании: ее истории, деятельности, возможностях, оперативно информировать пользователей о новостях компании, а также обеспечивать возможность просмотра графических материалов.
Этапы работ
Структура сайта
Всего было отрисовано: 1 прелоадер, 9 страниц и 5 модальных окон. Меню и подвал сайта - сквозные и обязательные элементы. Они обеспечивают быстрый доступ к любой странице, что делает взаимодействие с сайтом быстрым и удобным.
404 страница
Контакты
Резиденты (внутренняя)
Резиденты (общая)
Главная страница
Новости
Модальное окно “Отправить резюме”
Площадка Верхняя Салда
Площадка Уктус
Инвестору
Модальное окно
“Отправлено успешно”
Модальное окно
“Земля в резерве”
Модальное окно
“Занятая земля”
Модальное окно
“Свободная земля”
Модальное окно
“Проконсультироваться”
Прелоадер
Первое, с чем сталкивается пользователь, заходя на сайт - это прелоадер. Он выполнен в виде карты России, которая прокрашивается по мере загрузки сайта. Курсор при этом превращается в логотип, вокруг которого также есть индикатор загрузки.
По окончании загрузки курсор-логотип смещается на Свердловскую область. Территория Свердловской области приближается и становится во весь экран.
Цель данного превью:
Наглядно показать потенциальному инвестору место нахождения Свердловской области на карте России.
Таким образом даже гражданин иностранного государства будет осведомлен о территориальной принадлежности ОЭЗ “Титановая долина”.
гЛАВНАЯ СТРАНИЦА
структура и концепция
Главная страница выполнена в виде интерактивной карты Свердловской области с обозначением
площадок на ней.
Передвигая курсор по территории Свердловской области, потенциальный инвестор сможет
обнаружить всю искомую информацию по ОЭЗ и ее площадкам.
Это уникальный инновационный прием сайтостроения IceWeb и будет выигрышно смотреться относительно сайтов других экономических зон.
Интерактивная карта Свердловской области и близлежащих регионов. Реализована возможность двигать карту в любом направлении , чтобы ознакомиться с областью ближе
Меню-гембургер на сайте раскрывает справа налево строку со всеми пунктами меню
Вкладка со слайдером всех текущих резидентов Особой Экономической Зоны. Здесь кратко указан объем инвестиций и количество рабочих мест каждой организации
Вкладка с переключателями объектов инфраструктуры. Активировав переключатель, на карте отображается соответствующая сеть
Вкладка с последними новостями региона, текущим курсом USD/EUR и погодой на территории площадок. Вкладка разворачивается на главной странице без перехода на новую
Футер на сайте изначально скрыт, но его можно увидеть, проскролив страницу чуть ниже. Притом он никак не мешает пользователю изучать карту Свердловской области
Прототип сайта
Этап прототипирования сайта является важнейшей составляющей, ведь именно хорошо продуманная структура позволяет пользователю без лишних усилий перемещаться по страницам сайта и быстро находить необходимую информацию, что в итоге повышает его лояльность.
Уникальность сайта
Особый интерес представляет интерактивная составляющая сайта. Здесь можно передвигаться по карте Свердловской и близлежащих областей, ознакомиться с инфраструктурой области, информацией о городах, почитать новости и даже узнать актуальные на данный момент курс валют и погоду.
сТРАНИЦЫ ПЛОЩАДОК
Страницы площадок представляют собой интерактивную карту с указанием линий инфраструктуры, информацией о конкретном участке, его статусом и классом опасности, а также фотографией всей площадки со спутника.
Каждый участок на территории площадки кликабелен. Пользователь всегда может посмотреть актуальное состояние каждого участка, узнать какие из них свободны, а какие уже в резерве
На этой части площадки расположена сеть проектируемых Ж/Д путей. Для наглядности здесь используется анимация джижущегося поезда
На странице каждой площадки есть возможность перейти на новую страницу с подробным описанием инфрастурктуры близлежащего города, либо отсюда же переместиться на страницу другой площадки
На этой части площадки находится взлетно-посадочная полоса. Для наглядности здесь используется анимация взлетающего самолета и огней взлетно-посадочной полосы
Вид на территорию площадки со спутником. Его всегда можно открыть на весь экран и подвигать как обычную карту
Вкладка с переключателями объектов инфраструктуры и инженерных сетей. Активировав переключатель, на карте отображается соответствующая сеть
вНУТРЕННИЕ СТРАНИЦЫ
Также были созданы еще 6 внутренних страниц:
аДАПТИВ
Согласно техническому заданию, сайт был детально проработан под 4 основных разрешения экрана:
- Настольный монитор 1600*992px
- Ноутбук 1280*802px
- Планшет 768*1024px
- Мобильный телефон 320*480px
Мобильная версия
Все страницы мобильной версии сохранили полную функциональность сайта. Каждый блок приобрел наиболее удобное для использования на мобильном телефоне графическое решение.
Цвета и типографика
Aa
Aa
FS Albert Pro
#ECECEC
#A4A4A4
#939393
#585858
#E46B00
#014A6E
#1E1E1E