UI for online-service JATUMBA
Всем привет! Сегодня хотелось бы поговорить о цветовой составляющей и проектировании интерфейса Веб-дизайна.
Как добиться общей гармонии в дизайне? Предлагаю вам обратить внимание на очень важную деталь — выбор определенного тона цвета.
ЗАДАЧА
Свои макеты для сайтов я создаю в основном в программе Photoshop CC, поэтому хочу разобрать пару макетов именно на примере данной утилиты.
Совсем недавно в нашей Веб-студии мы столкнулись с новой задачей создания интерфейса для онлайн-сервиса, который предлагает своим пользователям групповую корректировку и создание музыкальных файлов из различных наборов звуков.
Сразу было понятно, что поле редактировки треков должно было вписаться в высоту одного экрана, то есть без скроллинга. Кстати этот прием для сервисов мы применяем довольно часто, так как пользователю гораздо удобнее «щелкать» по множеству элементов когда они имеют четкую структуру и все на виду.
Главной целью при создании макетов для сайта стало максимальное упрощение и наглядность интерфейса, иными словами чтобы пользователь без труда мог разобраться с панелями управления без специальных знаний и тем более без изучения каких-либо инструкций.
ПРОЦЕСС
На входе у нас был логотип от заказчика и подробный рассказ о том, какие функции на себя берет сервис JATUMBA.
Определение цветовой направленности проекта было возложено на нас. Также заказчик отправил нам неудачную (по мнению клиента) попытку другого веб-дизайнера реализовать интерфейс.
В таком сложном процессе было просто не обойтись без проектирования на бумаге. Поэтому первый день работы над проектом мы посвятили созданию прототипа будущего сервиса. Основной и самой сложной страницей проекта была страница редактирования музыкальных дорожек.
Мы спроектировали боковое меню и выбрали вариант «аккордеон», таким образом при наведении все основные поля сами разворачиваются и пользователь может настраивать нужные параметры или перемещаться по разным музыкальным дорожкам.
Для того, чтобы пользователи, входящие в «банду» могли общаться и оперативно реагировать на внесенные изменения был предусмотрен чат в левой панели.
Одним из важнейших моментов, без которого использование сервиса было бы неудобно является сохраненная история изменений музыкального файла. Ведь каждый пользователь сервиса, имеющий доступ к редактированию того или иного трека может добавлять или удалять звучание разных инструментов с разным ритмом.
Само поле редактирования файлов должно было вместить довольно большое количество параметров и настроек, поэтому для него в нашем веб-дизайне мы отвели большую часть страницы редактирования. На спроектированном интерфейсе сайта можно без труда разобраться какой пользователь добавил дорожку инструмента. Также можно назначить отдельного участника группы на свой инструмент, сделать это его зоной ответственности.
ЦВЕТОВОЕ РЕШЕНИЕ
Для того, чтобы веб-дизайн сервиса выглядел гармонично мы решили использовать цвета из сходной гаммы по тону.
Все серые оттенки в макете имеют один подтон. Когда вы выбираете сразу несколько градаций цветов для сайта, очень важно чтобы они гармонировали друг с другом. Например при выборе серого цвета вы можете столкнуться с множеством серых в разных оттенках, не всегда заметных невооруженному глазу.
Так вы можете выбрать для веб-дизайна в котором преобладает сине-голубой цвет, вспомогательный серый именно из синей гаммы. Не стоит брать серые оттенки из другим гамм, даже если вам кажется что разницы нет.
РЕЗУЛЬТАТ
Мы реализовали веб-дизайн данного сервиса в самые кратчайшие сроки. Для достижения оптимального результата и согласия с заказчиком мы внесли небольшое количество правок в макеты, которые действительно смогли повлиять на удобство для будущих пользователей.
ПОДРОБНЕЕ О ВЕБ-ДИЗАЙНЕ УНИКАЛЬНЫХ СЕРВИСОВ
УЗНАЙТЕ НА САЙТЕ НАШЕЙ ВЕБ-СТУДИИ DIVONE.RU
18,189 просмотров всего, 18 просмотров сегодня
