Как добиться гармонии в общем дизайне сайта. Мои секреты в отрисовке макетов Веб-дизайна. Проектируем UI для онлайн-сервиса JATUMBA.

UI for online-service

UI for online-service JATUMBA

Всем привет! Сегодня хотелось бы поговорить о цветовой составляющей и проектировании интерфейса  Веб-дизайна.

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

ЗАДАЧА

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

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

Сразу было понятно, что поле редактировки треков должно было вписаться в высоту одного экрана, то есть без скроллинга. Кстати этот прием для сервисов мы применяем довольно часто, так как пользователю гораздо удобнее «щелкать» по множеству элементов когда они имеют четкую структуру и все на виду.

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

ПРОЦЕСС

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

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

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

Мы спроектировали боковое меню и выбрали вариант «аккордеон», таким образом при наведении все основные поля сами разворачиваются и пользователь может настраивать нужные параметры или перемещаться по разным музыкальным дорожкам.

Для того, чтобы пользователи, входящие в «банду» могли общаться и оперативно реагировать на внесенные изменения был предусмотрен чат в левой панели.

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

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

ЦВЕТОВОЕ РЕШЕНИЕ

Для того, чтобы веб-дизайн сервиса выглядел гармонично мы решили использовать цвета из сходной гаммы по тону.

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

Так вы можете выбрать для веб-дизайна в котором преобладает сине-голубой цвет, вспомогательный серый именно из синей гаммы. Не стоит брать серые оттенки из другим гамм, даже если вам кажется что разницы нет.

РЕЗУЛЬТАТ

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

ПОДРОБНЕЕ О ВЕБ-ДИЗАЙНЕ УНИКАЛЬНЫХ СЕРВИСОВ

УЗНАЙТЕ НА САЙТЕ НАШЕЙ ВЕБ-СТУДИИ DIVONE.RU

6,315 просмотров всего, 3 просмотров сегодня

Бюджетный логотип для интернет-магазина кофе и чая. Перевод логотипа на английский и обратно!

На примере разработки простого бюджетного логотипа для интернет-магазина объясняю разные варианты и интерпретации. С самого начала логотип для allcoffee  я представила себе в виде бирки. Это похоже на фирменный знак или бирку на фирменной дорогой одежде. Поэтому было решено «вписать» композицию в неправильный квадрат.

1

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

Когда форма была выбрана, а реалистичные изображения не допустимы, осталось пробовать компоновать слова. Вариантов получилось довольно много, но были отобраны всего 6 для выбора направления, в которое стоит двигаться.

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

2

Также был выполнен пример уже готового магазина с одним из логотипов, для того, чтобы было наглядно и понятно как «квадратная» концепция впишется в структуру современного сайта.

 

dom_coffee_prev

 

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

3

 

13,030 просмотров всего, 6 просмотров сегодня

Частичный редизайн сайта. Меняем элементы обратной связи.

Еще один вариант частичного редизайна — это изменение форм обратной связи.

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

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

  • Часто ли ими пользуются гости сайта?
  • Удобны ли такие формы для быстрого заполнения?
  • Возможно ли вообще найти эти заветные окошки на сайте?
  • Предоставляете ли вы на выбор несколько видов контактной связи с вами?
  • Побудительна ли форма для заполнения или пассивна?

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

Если вы «застряли» на нескольких вариантах и не знаете что выбрать, обратитесь к АВ-тестированию. Вы сможете на практике проверить эффективность той или иной формы, замерить все необходимые результаты. Здесь одним из лучших помощников станет сервис Яндекс.Метрика.

13,805 просмотров всего, сегодня нет просмотров

Частичный редизайн сайта. Обновление главной страницы — решение проблемы?

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

Главная страница в большинстве случаев является наиболее ярким отражением общей концепции и миссии проекта. Часто главная является основной «входной» страницей на сайт для посетителя. И читатель моментально считывает ваш посыл. Если он не увидит основную цель существования вашего проекта, то скорее всего он покинет его.

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

  • Это существенно экономит ваш бюджет в сравнении с полным редизайном сайта.
  • Вы сможете более гибко простраивать дизайн сайта под ваши цели. Вести посетителя по определенному сценарию.
  • Отсутствуют «рамки» бренд-бука.
  • Возможность заложения в главную страницу концепции Landing Page.
  • Выделение вас среди конкурентов яркой и креативной главной страницей может значительно повысить шансы на успех в глазах пользователя.

Перед постановкой такой задачи перед веб-дизайнерами, убедитесь в четкости миссии проекта. Определите целевую аудиторию, на которую ориентирован ресурс. Наличие яркого слогана, который отображает всю суть вашей идеи поможет дизайнерам буквально «проникнуться» духом проекта и предложить вам подходящую концепцию.

Не стоит бояться «запускать» первые варианты макетов в дело, ведь при наличии надежного дизайнера и верстальщика вы сможете «редактировать» мелочи уже после. Если вы планируете позже перейти к полному редизайну проекта, то стоит получить от дизайнера «исходники» — макеты, которые ускорят темпы работы.

5,509 просмотров всего, 3 просмотров сегодня