Web Sitesi Mockup

web sitesi mockup

Прототипы, дизайн

Макеты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Структура

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

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

Главная страница
Виртуальные серверы
Администрирование
Дата центры
Информационные страницы

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

Проекты
Серверы
Создание сервера
Настройка сервера
Аккаунт
Баланс
Техподдержка

Админ панель

Управление пользователями
Управление услугами
Уведомления, заглушки
Статистика

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

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

Наше решение

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

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

Medialand —

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

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

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

Типографика

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

RobotoRoboto

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

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

Монохромные

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

Акцентные

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

Системные

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

Изображения

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

Иконки

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

Детальные

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

Material icon pack

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

Стайлгайд

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

Читайте далее

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

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

Читать подробнее

Not Found

Banners with shadows isolated on white background. Realistic material vector illustration of paper strip. Web site header and banner set. Mock up for graphic designer portfolio presentation
598700918
from portfolio Voin_Sveta

approved 2017.03.12 (2297 days ago)

Keywords:
paper, banner, 3d, white, isolated, vector, shadow, footer, mockup, document, set, realistic, portfolio, bookmark, header, blank, website, sticker, abstract, business, design, frame, illustration, label, poster, sale, template, graphic, web, presentation, print, branding, text, promotion, interface, brand, stationery, material, element, mock-up, identity, horizontal, empty, mock, web banner, up, mock up, page, promo

nest...

157270 157271 157272 157273 157274