Дизайн интернет-магазина «Деревенька»

Как вы уже знаете, web дизайн в BONO IDEA – это не просто отрисовка картинки. Это тщательное продумывание интерфейса и механизма работы интернет-магазина (прототипирование, UX дизайн, а уже затем UI). И как мы огорчаемся, когда заказчики, которые пришли для организации интернет-продаж к нам, хотят нарисовать руками нашего дизайнера свою «картинку» не всегда поддающуюся вполне адекватным требованиям современного WEB.

Случай с эко лавкой «Деревенька» оказался как раз таким тяжелым для нас. Но мы вроде бы справились, пришли к общему видению, во многом однако пошли на компромисс, который скажется на SEO продвижении и на скорости загрузки интернет-магазина в целом (обо всем заказчик был предупрежден, его требования были учтены).

Прототипирование и первый вариант UI дизайна

Итак, начали мы как всегда с прототипирования:

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

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

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

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

ecoderevenka-mockup-1В наших дизайнах интернет-магазинов мы стараемся учитывать много факторов. Вот некоторые из них:

  • Специфика компании (продажа молочных продуктов – должно быть легко и свежо).
  • Человек сразу должен понимать куда он попал, не важно на какую страницу магазина, хотя бы даже на 404 ошибку. В случае с «Деревенька» особенно важно было показать сразу в шапке, что этот милый эко магазин не из Московской области как многие в сети, а работает в городе Тольятти.
  • Визуально отделить важные элементы интерфейса. В данном случаем мы выделили легким ненавязчивым фоном каталог продукции слева и баннер (он чуть ниже на втором экране).
  • SEO составляющая. На главной странице мы сразу предусмотрели полезный как для посетителей, так и для поисковых систем текст.

Изменения дизайна

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

Было:

Дизайн эко лавки "Деревенька" 1 вариант

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

Стало:

ecoderevenka-index

Наш дизайнер постарался конвертировать замечания консультанта от лавки «Деревенька» в наиболее адекватный web дизайн. Ярлыки в шапке и лейбл с логотипом внизу нарисованы консультантом от «Деревенька».

В двух словах, наше скромное профессиональное мнение:

  • Шапка стала больше (значит полезной информации и товаров при первом взгляде будет видно значительно меньше), менее информативна.
  • Белые буквы на среднем тоне основного меню будут не очень хорошо различимы на ряде мониторах (особенно при солнечном свете).
  • Фоновые изображения в новой утвержденной шапке способствуют увеличению веса страницы (за счет того, что это будет одна большая фоновая картинка), повернутый текст – это сразу некроссбраузерное, влияющее на скорость рендеринга страницы решение средствами css (если делать картинкой, то это дополнительные трудности в изменении информации о работе магазина для заказчика).
  • Значительно изменились стили оформления каталога (меню слева) и баннера. На вкус и цвет… :)
  • Подвал сайта за счет лэйбла и рисованных полосок стал занимать значительно больше места как в весе (загрузке) страницы, так и на странице в целом. Каждый такой большой второстепенный элемент на странице интернет-магазина отвлекает пользователя от основных действий покупки товара.

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

 

Комментарии: