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

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

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

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


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

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



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



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



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


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



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



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

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

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



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


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

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


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


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


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



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

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

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

Справочник издателя и автора А. Мильчина — настольная книга любого дизайнера

В офисе КреативПипла появился Справочник издателя и автора (за что спасибо Владимиру Родионову). Еще до работы в КреативПипл я был знаком с предыдущим изданием справочника и считаю, что данная «библия» обязана стать практическим пособием для любого дизайнера. Справочник позволяет заполнить пустые пиксели в голове, заставляет начать уважать российскую типографику, и просто расширяет кругозор, как дизайнера, так и любого другого человека. 



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

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

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

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

На данный момент справочник стоит 1 700 рублей, приобрести его можно в магазине Студии Лебедева.

Придумываем подачу биографии для сайта А. Муранова

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

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

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



Вышло очень просто, добавляем объем и кладем на поверхность.



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



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



Делать личные сайты — это огромное мучение.

Возможно, позже будут еще записи о Лантурно, Облаке один, личном сайте Муранова и так далее. Если вам интересно узнавать о некоторых закулисных новостях и производстве — дайте знать. Я с радостью расскажу, как мы решали проблемы с утверждением идеи, покажу первые макеты, которые уходят клиенту, о первой презентации и остальных тонкостях в веб-дизайне. 

Принимали участие Евгений Муравьёв, Владимир Родионов, Денис Денисов. КреативПипл.

Заглушка сайта компании Cloud One

На время разработки сайта компании «Облако один» я создал заглушку на основе фирменного стиля. И первое и второе сделано в КреативПипл. Заглушка коротко и ясно рассказывает о компании и её услугах. Веселенько вышло. 

Разработка сайта швейцарской группы компаний «Лантурно». Часть 1

Первая часть   Вторая часть

Когда в компанию приходит иностранный клиент — это всегда праздник. А если этот клиент крупное швейцарское объединение компаний — праздник в двойне. Когда студия узнает, что эта компания занимается нефтью, углем, инвестициями и консалтингом, то радости становится столько, что хочется ею делиться со всеми. Вам же я расскажу о пути к этой радости — о том, как в КреативПипл создавался сайт «Лантурно».

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

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

Зарубежный клиент очень сильно по мышлению и принятию решений отличается от российского. 

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

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


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

Следующим этапом (2 из 5) стало создание сайта подразделения занимающимся экспортом угля. Вот, что было изначально у клиента:


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


Доводим картинку до ума, рисуем детали и получаем финальную картинку.



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

Закулисная история создания сайта «Объект»

Для крупнейшего в Европе стрелкового комплекса «Объект» требовалось создать сайт, который с главной страницы наглядно показывал бы, что в нем происходит, каким образом можно пострелять и самое главное — стрельба ведется на 180 градусов. Это не тупо тир. Я расскажу некоторые моменты создания сайта, не углубляясь в детали.

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

Начинаем от определенной идеи, прорисовываем ее и развиваем. Первая идея заключалась в том, чтобы не пытаться прям-таки показать стрельбу в движении на 180 градусов, а просто на просто написать это словами — крупно и доступно, к тому же это проще сделать. Рисуем макет, потом смотрим на фотки экстерьера комплекса и рисуем макет еще раз.








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

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

Выезжаем делать первую фотосессию, собираем народ, нагоняем массовку, продумываем сценарии. Один из которых — сбор пистолета «Сфинкс» на скорость владельцем клуба.



Получилось всего около семи сценариев, которые посмотреть можно на сайте, обновляя страницу. Согласование фото-материала стало самым болезненным за весь проект. Я выезжал три раза, и три раза мы переснимали сценарии с учетом комментариев или допущенных ошибок. В итоге фоток набралось на 15 Гб.

В каждом сценарии по 150—250 фотографий, нужно сделать выборку фоток так, чтобы логика покадровой съемки сохранилась и сайт грузился достаточно быстро. Причем фотографировали так, чтобы действия все происходили как можно ближе к центру (по вертикали и горизонтали), т.к. сайт у нас резиновый — нужно учитывать, чтобы при нормальном разрешении, браузер не закрывал самое сладкое.

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



Показываем клиенту еще раз.



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



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

Еще одним интересным моментом в создании сайта было рисование карты проезда. Процесс эволюции:



Самое интересное было в согласовании расположения знаков, указателей ближайших шоссе, а также элементов на крыше здания. Лазили на ближайшую ТЭЦ, чтобы сфоткать крышу Объекта и отрисовать его более детально. Иллюстратор карты, кстати Андрей Щепкин.

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

Дизайнер и руководитель проекта Евгений Муравьёв, второй айдентщик Сергей Калюжный, иллюстратор и тех. дизайнер Андрей Щепкин, фотографы Виталий Кислов и Андрей Ефимов, ведущий технолог Денис Денисов, программист Сергей Репков, технолог Аня Козловская, контент-менеджер Алена Комарова.

Александру Ковальскому спасибо за участие в проекте, советы и помощь в проектировании первых макетов.

Работа делалась в CreativePeople.

История одной шестерки

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



Дизайнер Дмитрий Уваров, тайный советник Евгений Муравьёв

Windosill — новый подход к логическим играм




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

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

Мне очень жаль, что ни одна из наших "креативных" студий даже не делала попытки выпустить подобные игрушки, пусть даже за 4 доллара.

Мне на каждый этап уходило в среднем от 30 сек. до двух минут.

Говорят, что идеи ничего не стоят


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

Что по этому поводу думаете вы? Считаете ли, что идеи действительно ничего не стоят, если да то почему. Мне вот допустим, иногда не хочется публиковать макеты с не принятыми идеями к сайту, но которые смогут найти свое применение на других.