Пример дизайн-макета для медицинского стартапа

О продукте:

Systema - это интерактивный анатомический атлас, который предназначен для изучения строения человеческого тела в более наглядном виде, чем может предложить напечатанный учебник. Согласно задумке, этот атлас позволяет детально рассмотреть все системы органов человека и отдельные их составляющие. Объекты можно поворачивать, увеличивать, подсвечивать и читать интересную информацию о них. Кроме того, Systema предполагает взаимодействие с другими информационными материалами, такими как лекции и заметки. Основная аудитория, на которую рассчитано приложение - это учащиеся и преподаватели

Пожелания заказчика:

Для клиента было важно, чтобы дизайн был современным и интуитивно понятным, а также чтобы в нем фигурировали визуальные материалы, которые уже имелись в наличии (3D-модели органов и детализированные рисунки). Кроме того, было высказано несколько пожеланий относительно содержания блоков. Важно было упомянуть про:

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

Перед началом работы:

Прежде, чем начать работу над проектом, мы выяснили у заказчика, как он видит конечный продукт и какое оформление предпочитает. Обработав всю информацию, мы сошлись на том, что в дизайне будем придерживаться ярких цветов и футуристичной концепции. Вот, какие референсы и стилистические приемы мы предложили:

3D - эффект

Градиенты, небольшие яркие элементы

Выделение с помощью форм и их комбинаций

В конечном итоге были выбраны следующие составляющие дизайна:

Цветовые решения:

- Темный интерфейс. Цифровые продукты с темным интерфейсом ассоциируются с мощью, элегантностью и загадочностью. Он [хорошо подходит для создания эффектного образа.
- Контраст. Мы решили использовать светлые тона для элементов (кнопки, карточки, текст). Например, пульсирующий и меняющий цвет градиент привлекает ваше внимание и заставляет нажать на кнопку, чтобы увидеть, что произойдет после этого действия

Формы:

- Мокапы. Они помогут быстро продемонстрировать продукт клиенту и упростят коммуникацию.
- Прямоугольник со скругленными углами. Он легче воспринимается глазом и смотрится органично при нашем цветовом решении

Пространство:

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

Ход работы:

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

Это варианты первого экрана. Макет головы будет анимирован и адаптирован под интерактив: его можно будет покрутить, открыть ему глаза и т.д.:

Еще один вариант первого экрана с человеком в полный рост. Он тоже будет анимирован и адаптирован для взаимодействия:

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

Ниже располагается более подробная информация о самом продукте и о том, чем он полезен целевой аудитории:

Также мы встроили экран с пояснением по навигации и формату работы на платформе:

Одним из пожеланий заказчика был блок с так называемым "Дневником разработчика". Это аналог ленты обновлений, по которой пользователи могут отслеживать изменения в атласе и его материалах:

Итог:

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

ПОДРОБНЕЕ ОБ УСЛУГЕ