Website and Managing Panel for Digital Agency V6V
Задача
Главная задача - разработать дизайн и функциональную часть всего сайта для диджитал-агентства. Чем занимается агентство? Айдентикой, веб-разработкой, рекламой, е-коммерсом и прочим по списку. То есть это агенство полного цикла для цифры. Супер.
Любой дизайн и пользовательский опыт есть процесс интеративный. Я делаю, проверяю, переделываю, даю попользовать, получаю фидбек, переделываю и так по кругу. И можно делать так бесконечно число раз.
Данный проект не стал исключением
экранов/состояний
концепта
проработанных графических элемента
Инструменты и технологии:
Laravel, MySQL, VueJS, Bootstrap 4, VPS-server, PHP, JavaScript, Adobe Photoshop, Adobe XD, 3D Max
Цель сайта - вызвать отклик у посетителя и потенциального клиента уже при первом касании.
И потому первая версия херо-экрана представляла из себя вот такой вот канвас с эффектным и красочным опытом для пользователя прямо с первого касания:
- При недостаточно мощном компьютере эта плавная сочная анимация превращается в бесформенную кашу, которая вызывает одно лишь раздражение
- Брендинг и ценности агентства смещены больше в сторону уверенности, профессионализма и стильного прагматизма. А потому сначала пользователь видит «серьезность» и «силу», а уже в следующем момент происходит то самое «красочное» касание:
В качестве основы я взял светлую, почти выбеленную основу, на которой крайне контрастно и насыщенно выделял последующие элементы.
Вот такая получилась концептуальная основа
Спокойная уверенная монументальная «светлая» сила
И яркие насыщенные элементы, которые притягивают внимание и слегка эпатируют:
А вот готовый блок с этими элементами:
В процессе были и другие варианты. Изначально была попытка уйти в «чистые» 3D-модельки:
Но они оказались слишком скучными и потому были отвергнуты. В итоге элементы демонстрации получились яркие, сочные и провокационные, а элементы, которые касаются денег, оформления и любого прямого контакта с пользователем (читай «заказчиком») сохранили серьезность и минимализм:
В этом моменте уже никаких заигрываний. При этом экран с демонстрацией «отдает» яркостью:
А главный «херо-экраны» для разных разделов вообще хочется выделить в отдельный вид искусства, разве нет?
Техническая реализация
Не смотря на яркие концепты, проект выполнен качественно прежде всего в комплексном подходе. В процессе кроме дизайнерских вопросов приходилось решать практические моменты с привлечением смекалки. Например, размещение большого количества блоков так, чтобы это не было простыней:
Со стороны разработки реализовано:
- Аутентификация и авторизация
- Админ-панель для приема заявок и управления контентом
- Изолированная мобильная версия для ультра-быстрой загрузки и общей оптимизации
- Мультиязычность с неограниченным количеством языков
- Удобный редактор контента на основе EditorJS
- Блог-система с созданием и редактированием мультиязычного контента
- SEO-оптимизация всего проекта
- Система уведомлений при поступлении заявок