emuravjev (emuravjev) wrote,
emuravjev
emuravjev

Закулисная история создания дизайна макетов интернет-магазину «Баумагазин». Часть 1

Дорогие и многоуважаемые любители закулисных новостей. Я продолжаю серию записей о процессе создания проектов в КреативПипл и сегодня расскажу вам о том, как в марте—апреле 2010 года мы закончили работу над дизайном макетов «Баумагазина» (интернет-магазин по продажи плиток).

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

Получаем от клиента примерную структуру сайта.


Пытаемся разделить меню на горизонтальное и вертикальное. Названия пунктов переписываем в более понятные и говорящие (это должен делать либо редактор в студии, либо сам дизайнер. Лучше дизайнер, конечно). Клиент соглашается на наши предложения по структуре.

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



Продолжаем работу с шапкой сайта и меню. Пытаемся сделать так, чтобы корзина чуть-чуть намекала нам: «Вы пока ничего не заказали».



Определяемся с выводом пустой и заполненной корзины.



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


Придумываем под шапкой принцип промо-блока. Экспериментируем. Вариант первый.



Вышло достаточно примитивно. Думаем дальше.



Да, уже лучше. Отправляем технологу на изучение ковер-флоу (чтобы время не терять), а сами продолжаем рисовать макет дальше. Стоит понимать, что каждое изменение в макете согласовывается с клиентом, если перед этим он утвердил на этом месте что-то другое. Задача дизайнера убедить клиента приводя разумные аргументы в пользу своего решения, а задача руководителя проекта помочь ему в этом (в данном случае я помогал сам себе, что в принципе проще, но всегда лучше, когда на встрече вас двое).

На самом деле были еще какие-то промежуточные решения для меню, новостей, правой мини-галереи и промо-блока. Но трешевые варианты просто на просто не сохраняются (я все равно не показал бы вам их), а какие-то уже не найти в моем огромном архиве. Я никогда не останавливаюсь на первой идее, т.к. она на 90% слабее, чем те, которые еще можно придумать, и самая очевидная (нам такие не нужны).

После 7—8 макетов главной, получаем финальный вариант.



Графические элементы я рисую очень плохо, по этому для футера страницы прошу Андрея Щепкина нарисовать нормальный билборд. После этого, рассказываем технологу о том, какую анимацию мы хотим видеть в ротации графики на билборде, получаем советы и утверждаем все с клиентом (если сайт не встанет на поддержку, то именно клиенту придеться готовить графику). 


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

Кто-то из студии подсказал попробовать создать паттерн из плиток и использовать его частично на фоне сайте. Паттерн нарисовали, но продолжения он не получил.


Контактная информация стала самой изменяемой страницей.


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


Страницу 404 делаем черной. Просто черная страница. Почему бы и нет!



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

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

Руководитель проекта и дизайнер Евгений Муравьёв, технический дизайнер Андрей Щепкин, технический директор Денис Денисов, технолог Анна Селезнева
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 5 comments