Макеты

Проработали техническую организацию макетов для быстрого масштабирования и легкого создания новых страниц на базе разработанного фреймворка.

Атомарный подход.

Система, состоящая из мельчайших частиц.

Начали макетирование с создания типовых мелких деталей — кнопок, полей ввода, переключателей, текстовых групп. Настроили их состояния. Далее собрали компоненты из атомов, как из конструктора.

Компонентная система.

Отредактировал в одном месте один — изменилось везде.

Все элементы, использующиеся более 1 раза обернули в компоненты. Это избавило от рутины при редактировании — компонент нужно изменить 1 раз, чтобы изменения применились ко всем компонентам.

Maket prototypes

Библиотеки стилей.

Нетоксичный подход к уникальности сущностей.

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

Организация макетов.

Когда все понятно с первого взгляда и все на своем месте.

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

Интерактивный прототип

Преобразовали статичные макеты в рабочий кликабельный прототип с навигацией, модальными и всплывающими окнами — чтобы уже на этом этапе иметь возможность протестировать взаимодействие с сайтом

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

Maket relation prototypes

Структура

Спроектировали простую и логичную архитектуру сайта с учетом потребностей пользователй и целей бизнеса.

Корпоративный сайт

  • Главная страница

  • Виртуальные серверы

  • Администрирование

  • Дата центры

  • Информационные страницы

Панель управления

  • Проекты

  • Серверы

  • Создание сервера

  • Настройка сервера

  • Аккаунт

  • Баланс

  • Техподдержка

Админ панель

  • Управление пользователями

  • Управление услугами

  • Уведомления, заглушки

  • Статистика

Визуальный стиль

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

Наше решение

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

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

Medialand —

  • современный
  • свежий
  • аккуратный
  • серьезный
  • простой
  • минималистичный
Website mockup
Website mockup

Типографика

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

RobotoRoboto
Alphabet

Цветовая палитра

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

Monochrome pallet

Монохромные

Основной набор для интерфейсных элементов — цвета текстовых блоков, страниц, карточек, элементов.

Accent pallet

Акцентные

Важные элементы страниц — кнопки, ссылки, активные элементы. Данные цвета используются в иллюстрациях.

System pallet
System pallet

Системные

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

Изображения

Мы отрисовали с нуля авторские векторные иллюстрации для этого проекта в стиле минималистичном flat стиле. Изометрическая проекция удачно гармонирует с визуальной концепцией проекта.

Image set
Image set

Иконки

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

Icons set

Детальные

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

Icons set

Material icon pack

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

Стайлгайд

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

Icons set
Corporate web site mockup
Читайте далее

Корпоративный сайт

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

Интересует похожий проект?

You read about mockup