Сайт для нижегородского бизнес-центра: креативный дизайн в действии
Меня зовут Арсений, я занимаюсь дизайном. У меня есть неплохой опыт создания корпоративных сайтов. И сейчас хотел бы рассказать про работу над сайтом бизнес-центра «Corner-place»
617 показов 36 открытий
Я вложил очень много сил и энергии в этот проект, но результат того стоил (звучит по инфоцигански)
*Дизайн является концептом и выполнен не для реального заказчика (поэтому грустно)
Что сразу приходит в голову и ассоциируется с бизнес-центром — наверное у большинства что-то строгое. «Да сделаем все по-простому — обозначим наши преимущества, контакты и помещения для аренды. Даже заморачиваться нет смысла…» С какой-то стороны это верно, ведь для такого бизнеса действует сарафан, но мы не должны забывать про новых клиентов.
КАЖДЫЙ новый клиент, заходя на сайт, хочет прочувствовать атмосферу и вайб данного места (вероятно где ему предстоит очень долго работать) Сайт — это прекрасный инструмент, помогающий реализовать многие задумки и дать первое впечатление о бизнесе.
Задача и цели
Как и для любого проекта основными целями для бизнеса является повышение конверсии и вовлеченности клиента в атмосферу предприятия. То есть мы должны сделать дизайн, который будет вести клиента от начала и до целевого взаимодействия, и при этом мы также должны создать приятный первый контакт.
А как повысить конверсию на простом корпоративном сайте? Просто грамотно преподнести ценность и предоставить удобный и приятный интерфейс.
Поэтапно:
- Создание технического задания и целей (цели отметил выше)
- Сбор реверансов и мудборда (мы должны понять от какого стиля мы будем отталкиваться)
- Исследования и аналитика
- Прототипы и проработка структуры
- Дизайн
- Анимация
Из этих 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