Дизайн на растерзание
Поп-панк-дев артель "Вудумедиа", за глаза называемая некоторыми ее участниками "Бочарский и батраки" заканчивает работу над дизайном интернет-магаза радостных покупок Toyzez.ru.
Собственно хочу комментариев. На днях отдаем макет на верстку, после чего вносить изменения уже не хотелось бы (деньги, как никак). Так что буду признателен замечаниям.
Ну а чтобы было легче (а может и интереснее) посмотреть процесс в развитии, ниже - основные этапы развития макета с комментариями, а также избранное из переписки.
Итак, начнем собственно с чистовой версии.
Готовность: 90% мы еще долизываем мелочи, плюс доделываем служебные страницы. Небольшие трансформации идут, но в целом нам все нравится. А вам?
0. ЧИСТОВАЯ ВЕРСИЯ (картинки кликабельне, на Яндексфотках можно посмотреть в большем размере, ну или говорите, я подложу исходники в размере 1024*..., чтоб было видно, как оно в натуральную величину смотрится)
0.1. Морда
0.1.1. Морда - 2
То же самое, только картинку у главного продукта заменили
0.2. Продукт
0.3. Страница рубрики
Что особенно вштырило из находок:
а). Лого в виде элемента пазла, который играет роль "дудла" -- тема, придуманная гуглом: тематические лого. В нашем случае можно ставить любую картинку, угадываемый фон, надпись и ок...
цитируем первоисточник:
"логотип мне самому нравится, такой маскот и логомутант, да, как у гугла, можно по праздникам стилизовывать, можно еще фотки голых телок засовывать"
Да!
б) Большое количество "точек входа"
...вообще "точки входа" - наше любимое с Ф. волшебное слово. когда мы его произносим, все получается. однажды с его помощью мы выиграли 1 млн рублей для нашего стартапа на Фонде Бортника. Я вел презентацию, а Ф. сказал всего одну фразу "...точка входа..." и мы победили, правда потом я этот миллион проебал, но это уже другая история... так что вот: "точка входа, точка входа, точка входа". уф... нам повезет!
В данном же случае, "точка входа" означает то, что с каждой страницы у тебя много "кротовых нор" в самые разные части сайта -- к разным товарам.
Это и
- традиционные "с этим товаром покупают также.."
- подсмотренные у Попотам.ру идея выводить на странице товара лентой (небольшими картинками) все содержимое каталога, чтобы пользователь не нажимал Back, а наглядно видел что еще похожего есть и переходил сразу на нужный товар
- текстовые какушки (Ф. считает, что текстовые анонсы работают лучше банеров)
- банерки для анонсов скидок, промокодов, новых товаров и пр. (за это рубилась Лена)
и вроде бы не хаос хаос при этом
Ну а начиналось все это так...
1. ИСТОРИИ ИГРУШЕК: ГришаДетектед.
1.1. Морда.
Идея заключалась в том, чтобы сделать интернет-магазин живым и дружелюбным. Если посмотреть по Алексе например тот же Boomboomroom, то обнаруживаешь, что посещаемость там так себе. А правда, зачем туда ходить? Сколько бы ты не зашел, на морде будет всегда одно и то же - один товар хедлайнер и два пристяжных. Даже если включить рандомную смену картинок, все равно тоска. Нет, с точки зрения дизайна все красиво, а вот мотива заходить нет. Да и если уж зашел, то дизайн никак не помогает продажам. Все скрыто в каталоге. Нужно заходить в каждый раздел, смотреть, что там. Пока не надоест. Успел - повезло, устал раньше - товыры скрытые в недрах рубрикатора так и не найдут своего покупателя.
Моя идея началась с того, что я поначалу фотал наши игрушки, когда с ними возился Гришка.
Например вот, вот и вот (это старая версия html-макета, не пугайтесь)) ). Ну и писал вот такие посты: раз, два, три.
В результате появилась идея сделать магазин разговорного жанра, в котором приходящие товары инспектируются, опробываются на близких и затем уже продаются в сопровождении соответствующих обзоров.
Обратимся к документам:
(избранные места из переписки)
...а теперь про мысль, которая в итоге снесла мне голову сегодня
я продумал всю эту тему, и мне показалось что идея потрясающая и вы гении))) не просто впаривать какую-то фигню в онлайне, а делать магазин-блог, где есть герой Гриша, приглашающий поиграть в магазин и приобщиться к такой субкультуре, то есть это не какая-то маркетинговая херня, легенда и миссия, а живая правдивая история в прямом эфире, не знаю, с чем сравнить, ну с уютным семейным ресторанчиком где-нибудь в италии, где все посетители др друга знают, что ли
кароче, если бы вы меня спросили:
1) идея магазина-рассказа -- ахуенная, поэтому я даже специально наделал там немножко шума, чтобы было много всяких милых (ну я надеюсь, что милых))) подробностей, которые просто интересно рассматривать, даже если покупать не хочешь, за этим рассказом-сайтом просто интересно следить
2) было бы здорово, если бы все в магазине вертелось вокруг Гриши, он такой смешной, ну и истории с ним это очень круто, вообще это уже не магазин даже, а сайт Гриши, и если тебе это все симпатично, ты берешь и заказываешь что-то такое же, поэтому я предложил бы выдержать такой стиль везде на сайте, вплоть до названия. ну блин, мамабама или тойзез -- это вроде все нормально смотрится, но в свете всего сказанного, понимаешь вдруг, как много ты теряешь с такими названиями, когда есть такой герой, и эти названия вдруг кажутся совсем пустыми, Гришаужеувидел это один из вариантов, может не самый удачный, но это как-то необычно, цепляет, располагает и пр. Такое запоминается, и на домен тут уже насрать, потому что все равно продвигаться эта штука будет по сарафану, ссылку никто запоминать не будет в любом случае, такие штуки сразу идут в закладки, ну может надо поиграть еще с "историей игрушек", "Гришиными игрушками", "Игрушкигриши" или назвать это все просто "У Гриши"))) только не убейте меня пожалуйста!)))
Я вот вспоминаю как в свое время меня долбануло название какой-то камерной хипстерской вечеринки "Вася, ты не с той живешь", сразу чувствуешь себя в кругу родных и близких)) еще раз простите)
Ну и немного уточняющей инфы по макету:
...текстовая строка с картинкой вверху (там ща про кораблик), такой ситуативный, по случаюс рекламный анонс, какой-то мифический опыт подсказывает, что его кликать будут гораздо лучше, чем просто какую-графическую дуру, в эту строку можно забивать и 8 марта, и производителей, ставить туда в ротацию сразу несколько строк, наконец, но подумайте пжлст еще, если все же нужно еще рекламное место (хотя уверяю, это будет засер простите протите:)) то я подумаю где его еще можно найти
минипосты тоже есть, собственно вся правая колонка это последние посты из вашего блога про то как гриша тестирует игрушки, то есть вместо просто заголовков там можно давать еще и лид какой-то, другое дело что я предложил это похерить и давать заги + скрытый копилайн, ну там указывается какая вещь тестируется и ссылка на нее дается, где ее можно купить, то есть мы еще раз с морды подталкиваем юзера к покупке, ну подумайте еще пжлст пжлст...
2. БОКСИНГ И АНБОКСИНГ.
Макет из п.1 вставил нас нереально. Он правда какой-то удивительно прекрасный и сбалансированный. Но включив в голове кнопку "эффективность", мы поняли вот что:
Задача магаза все-таки продавать. И довольно глупо отводить собственно под функцию продаж менее половины экрана (три товара жалко сгрудились в левом углу). Блог же напротив, хоть и кажется, что анонсирует товары, на самом деле уводит покупателя из воркфлоу покупки -- читать посты. И фиг его знает, вырулит ли он обратно, или дочитав пост тупо уйдет куда-то еще.
Ну и, конечно, было стремно так уж сильно впрягать в это Гришу. Одно дело, фотосессия по случаю, другое... сами понимаете.
И тогда ВудуМедиа родила новый макет.
2.1. Морда.
2.1.2. Морда с добавками
2.2. Рубрика
2.3. Продукт.
Этот макет столкнулся с моим оголтелым сопротивлением:
а) мне не понравилась идея "резиновых" по высоте боксов с товарами - "неаккуратненько")) плюс жрет кучу места
б) "дыры" на странице продукта из-за "вытянутости".
Правда Ф. сказал, что это не дыры, что я еще дыр не видел, и он еще покажет мне, что такое настоящие дыры, и слово свое сдержал.)))
Вот, например, дыра, сказал он:
-- Если контента в центральной колонке мало, то при длинном правом меню, читателю предстает пустая страница. Это некрасиво. Вот это я называю дырой, а пустоты в сайдбарах - не проблема. Контент же есть...
В результате, отвезя Лену на Subday up Market, я купил яиц, колбасы и кхмели-сунели, приехал к Ф., пожарил яичницу, мы подключили йоту и начали курочить.
Так появилась версия, которая нам очень понравилась во всех своих вариациях, дело было только за техническими доработками. Итак
3. ПРЕ-ФИНАЛИСТ. РОВНЕНЬКО И ЧИСТЕНЬКО.
3.1. Ровненько, чистенько.
Посмотреть на Яндекс.Фотках
3.2. Текстовые какушки
Посмотреть на Яндекс.Фотках
тут мы добавили немного текстовых какушек - слева и справа от товара-хедлайнера.
А вот наша попытка спасти блог:
3.3. Спасем блог!
Посмотреть на Яндекс.Фотках
Изюминку позаимстовали у Лебедева, по ощущениям просился какой-то корнерстоун.
Но в результате, такое представление блога все же забанили (Лена до сих против, но мы ищем варианты эту идею спасти).
Кроме того, оказалось, что по вертикали продукты в первой линии не помещаются на первый экран. В общем, дело было за подгонкой.
Собственно, что получилось в результате - вы видели. См. п.0.
Ну и вот вести с фронта веб-дизайна приносят такие уточнения:
4. ДОРАБОТКИ.
4.1. Морда.
Служебные страницы снесли в подвал, чтобы левая колонка была по-короче и не было "дыры" (тм) на информационных страницах, где немного текста.
А вот собственно и информационная страница
Посмотреть на Яндекс.Фотках
Пока все.
Что скажете?
Собственно хочу комментариев. На днях отдаем макет на верстку, после чего вносить изменения уже не хотелось бы (деньги, как никак). Так что буду признателен замечаниям.
Ну а чтобы было легче (а может и интереснее) посмотреть процесс в развитии, ниже - основные этапы развития макета с комментариями, а также избранное из переписки.
Итак, начнем собственно с чистовой версии.
Готовность: 90% мы еще долизываем мелочи, плюс доделываем служебные страницы. Небольшие трансформации идут, но в целом нам все нравится. А вам?
0. ЧИСТОВАЯ ВЕРСИЯ (картинки кликабельне, на Яндексфотках можно посмотреть в большем размере, ну или говорите, я подложу исходники в размере 1024*..., чтоб было видно, как оно в натуральную величину смотрится)
0.1. Морда
0.1.1. Морда - 2
То же самое, только картинку у главного продукта заменили
0.2. Продукт
0.3. Страница рубрики
Что особенно вштырило из находок:
а). Лого в виде элемента пазла, который играет роль "дудла" -- тема, придуманная гуглом: тематические лого. В нашем случае можно ставить любую картинку, угадываемый фон, надпись и ок...
цитируем первоисточник:
"логотип мне самому нравится, такой маскот и логомутант, да, как у гугла, можно по праздникам стилизовывать, можно еще фотки голых телок засовывать"
Да!
б) Большое количество "точек входа"
...вообще "точки входа" - наше любимое с Ф. волшебное слово. когда мы его произносим, все получается. однажды с его помощью мы выиграли 1 млн рублей для нашего стартапа на Фонде Бортника. Я вел презентацию, а Ф. сказал всего одну фразу "...точка входа..." и мы победили, правда потом я этот миллион проебал, но это уже другая история... так что вот: "точка входа, точка входа, точка входа". уф... нам повезет!
В данном же случае, "точка входа" означает то, что с каждой страницы у тебя много "кротовых нор" в самые разные части сайта -- к разным товарам.
Это и
- традиционные "с этим товаром покупают также.."
- подсмотренные у Попотам.ру идея выводить на странице товара лентой (небольшими картинками) все содержимое каталога, чтобы пользователь не нажимал Back, а наглядно видел что еще похожего есть и переходил сразу на нужный товар
- текстовые какушки (Ф. считает, что текстовые анонсы работают лучше банеров)
- банерки для анонсов скидок, промокодов, новых товаров и пр. (за это рубилась Лена)
и вроде бы не хаос хаос при этом
Ну а начиналось все это так...
1. ИСТОРИИ ИГРУШЕК: ГришаДетектед.
1.1. Морда.
Идея заключалась в том, чтобы сделать интернет-магазин живым и дружелюбным. Если посмотреть по Алексе например тот же Boomboomroom, то обнаруживаешь, что посещаемость там так себе. А правда, зачем туда ходить? Сколько бы ты не зашел, на морде будет всегда одно и то же - один товар хедлайнер и два пристяжных. Даже если включить рандомную смену картинок, все равно тоска. Нет, с точки зрения дизайна все красиво, а вот мотива заходить нет. Да и если уж зашел, то дизайн никак не помогает продажам. Все скрыто в каталоге. Нужно заходить в каждый раздел, смотреть, что там. Пока не надоест. Успел - повезло, устал раньше - товыры скрытые в недрах рубрикатора так и не найдут своего покупателя.
Моя идея началась с того, что я поначалу фотал наши игрушки, когда с ними возился Гришка.
Например вот, вот и вот (это старая версия html-макета, не пугайтесь)) ). Ну и писал вот такие посты: раз, два, три.
В результате появилась идея сделать магазин разговорного жанра, в котором приходящие товары инспектируются, опробываются на близких и затем уже продаются в сопровождении соответствующих обзоров.
Обратимся к документам:
(избранные места из переписки)
...а теперь про мысль, которая в итоге снесла мне голову сегодня
я продумал всю эту тему, и мне показалось что идея потрясающая и вы гении))) не просто впаривать какую-то фигню в онлайне, а делать магазин-блог, где есть герой Гриша, приглашающий поиграть в магазин и приобщиться к такой субкультуре, то есть это не какая-то маркетинговая херня, легенда и миссия, а живая правдивая история в прямом эфире, не знаю, с чем сравнить, ну с уютным семейным ресторанчиком где-нибудь в италии, где все посетители др друга знают, что ли
кароче, если бы вы меня спросили:
1) идея магазина-рассказа -- ахуенная, поэтому я даже специально наделал там немножко шума, чтобы было много всяких милых (ну я надеюсь, что милых))) подробностей, которые просто интересно рассматривать, даже если покупать не хочешь, за этим рассказом-сайтом просто интересно следить
2) было бы здорово, если бы все в магазине вертелось вокруг Гриши, он такой смешной, ну и истории с ним это очень круто, вообще это уже не магазин даже, а сайт Гриши, и если тебе это все симпатично, ты берешь и заказываешь что-то такое же, поэтому я предложил бы выдержать такой стиль везде на сайте, вплоть до названия. ну блин, мамабама или тойзез -- это вроде все нормально смотрится, но в свете всего сказанного, понимаешь вдруг, как много ты теряешь с такими названиями, когда есть такой герой, и эти названия вдруг кажутся совсем пустыми, Гришаужеувидел это один из вариантов, может не самый удачный, но это как-то необычно, цепляет, располагает и пр. Такое запоминается, и на домен тут уже насрать, потому что все равно продвигаться эта штука будет по сарафану, ссылку никто запоминать не будет в любом случае, такие штуки сразу идут в закладки, ну может надо поиграть еще с "историей игрушек", "Гришиными игрушками", "Игрушкигриши" или назвать это все просто "У Гриши"))) только не убейте меня пожалуйста!)))
Я вот вспоминаю как в свое время меня долбануло название какой-то камерной хипстерской вечеринки "Вася, ты не с той живешь", сразу чувствуешь себя в кругу родных и близких)) еще раз простите)
Ну и немного уточняющей инфы по макету:
...текстовая строка с картинкой вверху (там ща про кораблик), такой ситуативный, по случаюс рекламный анонс, какой-то мифический опыт подсказывает, что его кликать будут гораздо лучше, чем просто какую-графическую дуру, в эту строку можно забивать и 8 марта, и производителей, ставить туда в ротацию сразу несколько строк, наконец, но подумайте пжлст еще, если все же нужно еще рекламное место (хотя уверяю, это будет засер простите протите:)) то я подумаю где его еще можно найти
минипосты тоже есть, собственно вся правая колонка это последние посты из вашего блога про то как гриша тестирует игрушки, то есть вместо просто заголовков там можно давать еще и лид какой-то, другое дело что я предложил это похерить и давать заги + скрытый копилайн, ну там указывается какая вещь тестируется и ссылка на нее дается, где ее можно купить, то есть мы еще раз с морды подталкиваем юзера к покупке, ну подумайте еще пжлст пжлст...
2. БОКСИНГ И АНБОКСИНГ.
Макет из п.1 вставил нас нереально. Он правда какой-то удивительно прекрасный и сбалансированный. Но включив в голове кнопку "эффективность", мы поняли вот что:
Задача магаза все-таки продавать. И довольно глупо отводить собственно под функцию продаж менее половины экрана (три товара жалко сгрудились в левом углу). Блог же напротив, хоть и кажется, что анонсирует товары, на самом деле уводит покупателя из воркфлоу покупки -- читать посты. И фиг его знает, вырулит ли он обратно, или дочитав пост тупо уйдет куда-то еще.
Ну и, конечно, было стремно так уж сильно впрягать в это Гришу. Одно дело, фотосессия по случаю, другое... сами понимаете.
И тогда ВудуМедиа родила новый макет.
2.1. Морда.
2.1.2. Морда с добавками
2.2. Рубрика
2.3. Продукт.
Этот макет столкнулся с моим оголтелым сопротивлением:
а) мне не понравилась идея "резиновых" по высоте боксов с товарами - "неаккуратненько")) плюс жрет кучу места
б) "дыры" на странице продукта из-за "вытянутости".
Правда Ф. сказал, что это не дыры, что я еще дыр не видел, и он еще покажет мне, что такое настоящие дыры, и слово свое сдержал.)))
Вот, например, дыра, сказал он:
-- Если контента в центральной колонке мало, то при длинном правом меню, читателю предстает пустая страница. Это некрасиво. Вот это я называю дырой, а пустоты в сайдбарах - не проблема. Контент же есть...
В результате, отвезя Лену на Subday up Market, я купил яиц, колбасы и кхмели-сунели, приехал к Ф., пожарил яичницу, мы подключили йоту и начали курочить.
Так появилась версия, которая нам очень понравилась во всех своих вариациях, дело было только за техническими доработками. Итак
3. ПРЕ-ФИНАЛИСТ. РОВНЕНЬКО И ЧИСТЕНЬКО.
3.1. Ровненько, чистенько.
Посмотреть на Яндекс.Фотках
3.2. Текстовые какушки
Посмотреть на Яндекс.Фотках
тут мы добавили немного текстовых какушек - слева и справа от товара-хедлайнера.
А вот наша попытка спасти блог:
3.3. Спасем блог!
Посмотреть на Яндекс.Фотках
Изюминку позаимстовали у Лебедева, по ощущениям просился какой-то корнерстоун.
Но в результате, такое представление блога все же забанили (Лена до сих против, но мы ищем варианты эту идею спасти).
Кроме того, оказалось, что по вертикали продукты в первой линии не помещаются на первый экран. В общем, дело было за подгонкой.
Собственно, что получилось в результате - вы видели. См. п.0.
Ну и вот вести с фронта веб-дизайна приносят такие уточнения:
4. ДОРАБОТКИ.
4.1. Морда.
Служебные страницы снесли в подвал, чтобы левая колонка была по-короче и не было "дыры" (тм) на информационных страницах, где немного текста.
А вот собственно и информационная страница
Посмотреть на Яндекс.Фотках
Пока все.
Что скажете?