Как сделать прототип сайта для обучающей платформы медицинского стартапа?
Создание дизайн-макета для интерактивного 3D-атласа. Показываем, как соединить футуристичность, обучение и интерактивную составляющую.
О ПРОДУКТЕ:
Systema - это интерактивный анатомический атлас, который предназначен для изучения строения человеческого тела в более наглядном виде, чем может предложить напечатанный учебник. Согласно задумке, этот атлас позволяет детально рассмотреть все системы органов человека и отдельные их составляющие. Объекты можно поворачивать, увеличивать, подсвечивать и читать интересную информацию о них. Кроме того, Systema предполагает взаимодействие с другими информационными материалами, такими как лекции и заметки. Основная аудитория, на которую рассчитано приложение - это учащиеся и преподаватели
ПОЖЕЛАНИЯ ЗАКАЗЧИКА:
Для клиента было важно, чтобы дизайн был современным и интуитивно понятным, а также чтобы в нем фигурировали визуальные материалы, которые уже имелись в наличии (3D-модели органов и детализированные рисунки). Кроме того, было высказано несколько пожеланий относительно содержания блоков. Важно было упомянуть про:
- информацию о работе интерактивной составляющей (точки интереса, гиперссылки и т.д.)
- лекционный материал
- ценность и практичность для конечной аудитории
- ценность для организаций
ПЕРЕД НАЧАЛОМ РАБОТЫ:
Прежде, чем начать работу над проектом, мы выяснили у заказчика, как он видит конечный продукт и какое оформление предпочитает. Обработав всю информацию, мы сошлись на том, что в дизайне будем придерживаться ярких цветов и футуристичной концепции. Вот, какие референсы и стилистические приемы мы предложили:
3D - эффект
Градиенты, небольшие яркие элементы
Выделение с помощью форм и их комбинаций
В конечном итоге были выбраны следующие составляющие дизайна:
Цветовые решения:
- Темный интерфейс. Цифровые продукты с темным интерфейсом ассоциируются с мощью, элегантностью и загадочностью. Он [хорошо подходит для создания эффектного образа.
- Контраст. Мы решили использовать светлые тона для элементов (кнопки, карточки, текст). Например, пульсирующий и меняющий цвет градиент привлекает ваше внимание и заставляет нажать на кнопку, чтобы увидеть, что произойдет после этого действия
Формы:
- Мокапы. Они помогут быстро продемонстрировать продукт клиенту и упростят коммуникацию.
- Прямоугольник со скругленными углами. Он легче воспринимается глазом и смотрится органично при нашем цветовом решении
Пространство:
- Пустое пространство помогает пользователю разделить контент на удобные для восприятия части и сфокусироваться на деталях
ХОД РАБОТЫ:
В процессе работы было создано несколько дизайн-макетов с опциональными изменениями. Был полностью продуман дизайн и наполнение первого экрана и дальнейших блоков, а также расставлены смысловые и визуальные акценты. Мы предложили клиенту несколько цветовых решений, чтобы он мог выбрать для итоговой доработки любой понравившийся вариант.
Это варианты первого экрана. Макет головы будет анимирован и адаптирован под интерактив: его можно будет покрутить, открыть ему глаза и т.д.:
Еще один вариант первого экрана с человеком в полный рост. Он тоже будет анимирован и адаптирован для взаимодействия:
В итоге заказчиком был выбран третий вариант с изображением нервной системы мозга на главном экране. Здесь же мы разместили кнопку для скачивания и информацию о преимуществах продукта:
Ниже располагается более подробная информация о самом продукте и о том, чем он полезен целевой аудитории:
Также мы встроили экран с пояснением по навигации и формату работы на платформе:
Одним из пожеланий заказчика был блок с так называемым "Дневником разработчика". Это аналог ленты обновлений, по которой пользователи могут отслеживать изменения в атласе и его материалах:
ИТОГ:
У нас получился современно выглядящий дизайн-макет, который полностью соответствует пожеланиям заказчика и отражает все необходимые моменты, связанные с продуктом. Мы органично расположили в прототипе все разделы, которые хотел видеть клиент, и при этом сохранили функциональность и привлекательность продукта для изучения конечным потребителем.
Если вам понравился наш подход и вы хотите посотрудничать с нами напрямую, то добро пожаловать на сайт: www.crocobusiness.com