Сайт для нижегородского бизнес-центра: креативный дизайн в действии

0

Меня зовут Арсений, я занимаюсь дизайном. У меня есть неплохой опыт создания корпоративных сайтов. И сейчас хотел бы рассказать про работу над сайтом бизнес-центра «Corner-place»

740 показов 42 открытия

Я вложил очень много сил и энергии в этот проект, но результат того стоил (звучит по инфоцигански)


                    Сайт для нижегородского бизнес-центра: креативный дизайн в действии

*Дизайн является концептом и выполнен не для реального заказчика (поэтому грустно)

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

КАЖДЫЙ новый клиент, заходя на сайт, хочет прочувствовать атмосферу и вайб данного места (вероятно где ему предстоит очень долго работать) Сайт — это прекрасный инструмент, помогающий реализовать многие задумки и дать первое впечатление о бизнесе.

Задача и цели

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

А как повысить конверсию на простом корпоративном сайте? Просто грамотно преподнести ценность и предоставить удобный и приятный интерфейс.

Поэтапно:

  1. Создание технического задания и целей (цели отметил выше)
  2. Сбор реверансов и мудборда (мы должны понять от какого стиля мы будем отталкиваться)
  3. Исследования и аналитика
  4. Прототипы и проработка структуры
  5. Дизайн
  6. Анимация

Из этих 6 пунктов я наверное пропущу первые 2, тк я думаю по ним все более или менее понятно)

Исследования и аналитика

Исследование пользователя. Кто пользователь? Мы буквально берем и изучаем основные характеристики типового пользователя.


                    Сайт для нижегородского бизнес-центра: креативный дизайн в действии

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

Итоги анализа (требования):

  • Обеспечить доступность всей информации (качественные фото, читаемый текст), правильно расставленные акценты
  • Обозначить условия и преимущества
  • Возможность оставить отзыв или пожелание
  • Сделать контакты всегда доступными
  • … к нам приходит представление о дизайне

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

Прямой конкурент Corner Place — это бизнес-центр лобачевский plaza, который находится на той же улице. По большому счету дизайн их сайта устарел, есть ошибки в ux, но я решил позаимствовать идею — использование очень простой навигации.
У основных конкурентов ровно также реализован простой корпоративный сайт или даже лендинг, особо ничем не отличающийся от других. Из общего анализа конкурентов я сделал вывод:

Акцент сделать именно на креативном дизайне, с интересной композицией

Прототипы

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

На главной мы отмечаем преимущества, инфраструктуру и возможность оставить пожелания или отзыв.

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


                    Сайт для нижегородского бизнес-центра: креативный дизайн в действии

Дизайн

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

Купить рекламу Отключить

Как я уже отмечал, стиль — минимализм, совмещенный с простой сеткой. Информационная часть сайта разделена на две части в соотношении 30/70, где меньшая часть выделена на заголовки и второстепенный текст, а большая на основной текст и изображения.

Всего использовано 2 цвета: белый и серо-черный (# 181818). Что позволяет сконцентрироваться на информации, качественных изображениях и видео.

Страница «расположение» рассказывает об основных преимуществах расположения, стиле улицы и здания. 3 блоком должна быть обычная встроенная карта)


                    Сайт для нижегородского бизнес-центра: креативный дизайн в действии


                    Сайт для нижегородского бизнес-центра: креативный дизайн в действии


                    Сайт для нижегородского бизнес-центра: креативный дизайн в действии


                    Сайт для нижегородского бизнес-центра: креативный дизайн в действии


                    Сайт для нижегородского бизнес-центра: креативный дизайн в действии

Графический дизайн

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

[{"title":"","image":{"type":"image","data":{"uuid":"cbd8d0a2-212d-5754-9e72-b1a6a7547ccf","width":2401,"height":1553,"size":1953261,"type":"png","color":"41403d","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQIAHAAcAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAKAAoDAREAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAgYHCP/EACMQAAEDAgcAAwAAAAAAAAAAAAECAwQABwUGERIhIzEUIlL/xAAXAQEBAQEAAAAAAAAAAAAAAAACAwEE/8QAHxEBAAIBAwUAAAAAAAAAAAAAAQACEgMRkRMUITFR/9oADAMBAAIRAxEAPwBYuZLuZnG17+UrlXgcxOG+23PZizcOZVIadSjelCXBotKtOCoE+kEVHuW++ndU5i6BRLUqDxM6Jtrg+0d8o8e/MSKzCvyPJlendssKd+5PpVyTVrAepzVV8wwy1oOpHn5FGKf/2Q=="}}},{"title":"","image":{"type":"image","data":{"uuid":"0e177b86-7c4d-5caf-bcd8-668044541dd6","width":2401,"height":1596,"size":1332907,"type":"png","color":"110f0f","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQIAHAAcAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAKAAoDAREAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAwQGCP/EACIQAAIBAwQCAwAAAAAAAAAAAAECAwQFBgARIUEHEyIxQv/EABgBAAMBAQAAAAAAAAAAAAAAAAABAgME/8QAHxEAAgICAgMBAAAAAAAAAAAAAQIAAxFxMTMEEhOx/9oADAMBAAIRAxEAPwDCeD4fjGR3KC1VNOaiOmeQz1EU3rMsQ/QHW3J7J31lY5VcjmdFNa2Pg8SWyGy09tv9zt1NYKtYaWsmhjV6gFgquQAT2dhoV8qDmJ6/ViuOIXBvj5BxyJeEmudLHIo+nQyqCpHYI4I0Xdbai8ftXYinkJ3jz7JURyqreKwAA7AD3PxqautdCXeT9W2f2f/Z"}}},{"title":"","image":{"type":"image","data":{"uuid":"e44006d1-c27f-5978-a73f-c19c69d3017c","width":2682,"height":3798,"size":553799,"type":"png","color":"1c1c1b","hash":"","external_service":[],"base64preview":"/9j/4AAQSkZJRgABAQIAHAAcAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAKAAoDAREAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABgAI/8QAHhAAAQQCAwEAAAAAAAAAAAAAAQIDBAYAEQUSITH/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAv/EABcRAQEBAQAAAAAAAAAAAAAAAAEAAhH/2gAMAwEAAhEDEQA/AMX1y/Gj8Dy9PaiQZrNhiuMvTXR2XHQ630UEgb3rQUPfoGQ4XRoajQZTkdFerygFC3Rxsb9aUDl0xzErEv/Z"}}}]

Итог

Дизайн готов для верстки или переноса на тильду.

Он закрывает базовые потребности пользователя, а точнее является презентацией компании и просто дает связаться с менеджерами. Главное — качественно реализован контент в связке с изображениями.

В общей сложности на разработку ушло около 120 часов, но проект получился довольно интересным)

Жду вашего мнения.

кстати мой телеграм канал на котором рассказываю про все этапы проектирования интерфейсов и о своих кейсах.

либо написать мне

Источник: vc.ru

Leave A Reply

Your email address will not be published.