Website and Managing Panel for Digital Agency V6V

I prototyped a structure, designed and developed a website for Digital Agency. Than restyled it and relaunched due to web-analytics reasons

Задача

Главная задача - разработать дизайн и функциональную часть всего сайта для диджитал-агентства. Чем занимается агентство? Айдентикой, веб-разработкой, рекламой, е-коммерсом и прочим по списку. То есть это агенство полного цикла для цифры. Супер.

О чем проект

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

Данный проект не стал исключением

mockups
36

экранов/состояний

3

концепта

28

проработанных графических элемента

mockups

Инструменты и технологии:

Laravel, MySQL, VueJS, Bootstrap 4, VPS-server, PHP, JavaScript, Adobe Photoshop, Adobe XD, 3D Max

Цель сайта

Цель сайта - вызвать отклик у посетителя и потенциального клиента уже при первом касании.

И потому первая версия херо-экрана представляла из себя вот такой вот канвас с эффектным и красочным опытом для пользователя прямо с первого касания:

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

В качестве основы я взял светлую, почти выбеленную основу, на которой крайне контрастно и насыщенно выделял последующие элементы.

Вот такая получилась концептуальная основа

mockups

Спокойная уверенная монументальная «светлая» сила

И яркие насыщенные элементы, которые притягивают внимание и слегка эпатируют:

mockups

А вот готовый блок с этими элементами:

mockups

В процессе были и другие варианты. Изначально была попытка уйти в «чистые» 3D-модельки:

mockups

Но они оказались слишком скучными и потому были отвергнуты. В итоге элементы демонстрации получились яркие, сочные и провокационные, а элементы, которые касаются денег, оформления и любого прямого контакта с пользователем (читай «заказчиком») сохранили серьезность и минимализм:

mockups

В этом моменте уже никаких заигрываний. При этом экран с демонстрацией «отдает» яркостью:

mockups

А главный «херо-экраны» для разных разделов вообще хочется выделить в отдельный вид искусства, разве нет?

mockups
mockups

Техническая реализация

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

Со стороны разработки реализовано:

  • Аутентификация и авторизация
  • Админ-панель для приема заявок и управления контентом
  • Изолированная мобильная версия для ультра-быстрой загрузки и общей оптимизации
  • Мультиязычность с неограниченным количеством языков
  • Удобный редактор контента на основе EditorJS
  • Блог-система с созданием и редактированием мультиязычного контента
  • SEO-оптимизация всего проекта
  • Система уведомлений при поступлении заявок
Ну и если ломаться, то стильно. 404 экран: