Ребрендинг, позиционирование, разработка интернет-магазина, а так же нюансы ниши бонсай в России.
Привет vc.ru!
Решил из многолетнего наблюдателя сайта перейти в участника повествования)
Меня зовут Евгений Медведев и я дизайнер из Москвы. Вместе со своей небольшой командой я создаю бренды и сайты.
⠀⠀
Бонсай — это моё хобби, которое принесло мне этого клиента, чему я бесконечно был рад. Ведь я занимался двумя любимыми делами — дизайном и изучением бонсай.
Мы с командой реализовали этот проект за 3 месяца. Большое внимание было уделено исследованию бизнес-процессов для постройки грамотной структуры сайта, а так же различным улучшениям и оптимизациям этих самых процессов с помощью дизайна.
⠀⠀
⠀⠀
Так выглядит сайт «до», который был создан лет 20 назад
⠀
⠀
Логотип
Логотипы компаний, занимающихся бонсай в России, очень похожи между собой. На них, как правило, красный круг — символ японии / солнца и на переднем плане дерево.
Да и в целом это выглядит, как стандартный лого по запросу из гугла. Такая ситуация по всему миру, потому что те, кто занимаются бонсай — это люди в возрасте и диджитал ещё пока до них не дошёл.
⠀⠀
Когда новый покупатель ищет себе дерево, он проходит все сайты с бонсай (их всего около 5) и затем выбирает понравившееся дерево в одном из магазинов.
Чтобы выделиться среди одинаковых конкурентов, но не потерять в аутентичности, был разработан логотип, представленный ниже. «B» это как отсылка к бонсай, так и к имени основателя — Валерий.
⠀⠀
⠀
⠀
⠀⠀
Фотосъёмка
Одна из самых главный задач при создании сайта была передать атмосферу, показать место и самое главное — деревья. Поэтому фотосъёмке уделялось особое внимание.
⠀
⠀
Создание сайта
new.bonsaisale.ru (сайт наполняется заказчиком)
Остальные магазины бонсай в России выступают лишь как перекупы, с растениями, находящимися в подвалах, и содержащихся в ненадлежащих условиях. BONSAI SALE же напротив — большая теплица с тысячами разных и редких деревьев.
Поэтому всё что нужно было сделать — это просто показать это место с разных сторон и сместить позиционирование с безликого магазина на людей.
Тёмный фон был выбран не случайно. Опытным путём выяснилось, что кора и листья деревьев на графитовом фоне выглядят красивее всего.
⠀
⠀
Интернет-магазин
В магазине представлены более 100 категорий разных деревьев. Мы сделали удобное меню, в котором просто ориентироваться, а так же добавили самые часто используемые фильтры на основе старого сайта.
Отдельное внимание мы уделили мобильной версии — для простоты ориентирования мы разбили процесс выбора растения на несколько шагов. Но при желании можно легко переключаться между категориями и подкатегориями.
⠀
⠀
Карточка товара
В карточке товара собрана вся необходимая информация: описание породы, общие рекомендации по уходу, а также история формирования растения. Ещё здесь собраны отзывы о магазине из открытых источников для повышения доверия к магазину.
⠀
⠀
Автоматизированная персонализация
После оплаты своего заказа человек получает на почту PDF-файл с инструкцией по уходу. Каждый файл уникален и автоматически генерируется из двух вещей — информации об уходе о конкретной породе из админки и фотографии растения, которое купили. Для этого специально была отдельно написана программа.
⠀
⠀
Теория
Ещё одна особенность данной ниши в том, что большинство людей сначала приходят узнать о бонсай. Источников не так много и теперь данный сайт это самая подробная и структурированная база знаний о бонсай в России. Была проведена большая работа по структурированию и редактированию десятков статей.
⠀
⠀⠀
⠀⠀
⠀
Напоследок пара UX-фишек, которые я обнаружил по ходу создания
Чтобы не потерять выбранную подкатегорию, когда раздел свёрнут — красный нотификейшн рядом с разделом.
⠀
⠀
Хлебные крошки могут быть полезнее.
⠀
Ну и приятная пасхалка в виде параллакса фоновых изображений, привязанного к гироскопу смартфона.
⠀
⠀⠀
Конец
На этом всё, спасибо за внимание. Это мой первый пост на этом сайте, поэтому очень интересна обратная связь. Как вам проект? Поделитесь в комментах плиз!
⠀
——
Потыкать сайт самостоятельно — new.bonsaisale.ru
Посмотреть другие мои работы — evgmed.com
Красивое. Но вот параллакс на гиро избыточен, когда рядом два блок с этим эффектом, если не держать телефон ровно на месте, прям укачивает
Скажем прямо... Бесит просто этот параллакс.
ага, отключим
понимаю о чем вы ....
сами попросили потыкать сайт.
- коллекционный ( выглядит убого)
- Оплата Юридическим лицам/В подарок/Физическим лицам
Написано "Надо заполнить" , что/где/куда - не понятно.
- Инструкция по уходу, не активна, а почитать хотелось, чтобы знать с чем столкнусь.
- О нас, видео расположено как-то странно. Смотреть его нет желания.
- В разделе "Хвойные" зачем нужны пустые категории Подокарпус/Араукария/Псевдолиственница и.т.д.
- дерево за 710к написано "Бесплатная доставка" и рядом же по М.O. "Бонсай 40 ₽/км" так она бесплатная или платная?
- БОНСАЙ-КЛУБ, за 10-15 серфинга по сайту так и не понял что это.
- В блоге нет единого стиля оформления превью.
также еще пяток мелких косяков, которые лень описывать.
Дерево за 710К? Однаааако.
Дизайн двадцатилетней давности вызывает уважение.
Поподробнее расскажите, в каких блоках проявляется дизайн 20-летней давности? С примерами, если можно. Ответ "Во всех" не принимается.
А как по мне наоборот очень новомодно
Респект за обилие изображений, особенно за обтравки. Самый сильный путь в дизайне. Есть пара вопросов.
1. Сейчас на сайте используются 2 типа шрифта - с засечками для заголовков и зауженный гротеск для основного текста. Вижу, что в вашей презентации используется только гротеск и заглавные буквы в заголовках. Почему эти решения не дошли до финала? Клиент не определился, что ему ближе - старина или современность и решил смешать все в кучу?
2. По поводу того, "что кора и листья деревьев на графитовом фоне выглядят красивее всего". Не поленился сделать сравнение. Темные деревья на темном фоне теряются, в то время как на светлом фоне и темные, и светлые деревья видны лучше в сравнении. Темный фон несомненно усиливает цвет, но для этого у картинок должна быть ретушь, как на крайнем правом примере. Речь идет не про абстрактную красоту, а про контраст.
Товар на картинке должен соответствовать продаваемому товару. (Публичная оферта) Т.е. цветовая гамма должна быть не измененной, в противном случае я покупал красное дерево, а мне продали зеленое. Вот тут с цветовой гаммой нужно быть аккуратным.
Да и выглядят они пластмассовыми.
Похвалил наполнение сайта, а сами создатели похоже его не так сильно любят, раз обтравку на фоне, которая является украшением дальнего плана, сделали в 4 раза больше фото товара, который продается на сайте. Раз делаете сайт фулл хд, используйте ширину эффективно.
К слову про шрифты, они вообще куда то теперь пропали. Кто-то забыл корсу настроить, все уехало и стало страшно дефолтным
Видимо темный выбрали из-за хреновой обтравки. Она заметна только при зуме.
В целом правы, фоткам уделили очень мало внимания, пусть и "заполняется заказчиком". Сейчас деревца смотрятся оч дешево.
Комментарий недоступен
Хороший сайт, бонсай пушка но дорогой
Что по вычитке?
Может понравится, а может и не понравится
неприятно
Заменить на "Похожие"
Просто хочу поддержать. Свой взгляд на вещи дорогого стоит, спасибо, что поделились им. Хорошая работа!
Параллакс выглядит несколько вульгарно. Он как бы типа такой "вау, вот это да, картинка шевелится", но это не то что бы вызывает вау-эффект. Допустим, что часть пользователей пришла в восторг, но следом привыкла к этому приему и он, скорее, стал отвлекать, нежели впечатлять. Надеюсь, эта обратная связь будет полезной.
Спасибо за проект!
спасибо) ага, параллакс уберём
Вместо того, чтобы снимать деревья на белом фоне и делать потом кривую обтравку, можно было просто снять их на чёрном фоне и почти ничего не делать.
Необходимо поработать над SEO-сайта (вбей просто в поиске url:new.bonsaisale.ru* и станет понятно), убрать параллакс (чисто ЧСВшная штука разработчиков, которая не влияет на продажи) и поработать над копирайтингом УТП и офферов..
Ну и на страницах статей слишком много пустого пространства, которое могло бы ПРОДАВАТЬ что-то с других страниц. В общем, путь клиента не проработан.
Ну а сам дизайн - норм.
Комментарий недоступен
Многие из тех, кто пишет критику - не понимают, что такое работа с заказчиком.
Отлично. Вот тогда и надо только вместе с заказчиком заходить на этот сайт и пользоваться им, нахваливая друг друга.
Комментарий недоступен
Поддержу! Это та покупка, с учётом цены, которую просто необходимо обойти со всех сторон.
Круто! Старый лучше.
О, отличная идея! Мне очень нравится концепция, новый логотип и отображение идеи :) Правки в графику и строение сайта внесёте, ведь всегда первичку корректируют и меняют. А вот то, что вы рассказали и сами здесь написали - респект и уважение 😎🙏🏻😎
Не стесняйтесь комментов, делитесь и другими работами, очень интересно
Комментарий недоступен
Мне интересно, после карты идёт раздел блог. Обычно в лендинге карта это финальный аккорд и есть ли риск, что пользователь, увидев кусок карты в экране, не станет скролить дальше?
Как меня это бесит, кстати. Карта в середине сайта и с мобильного её фиг пролистнешь... Только как-то по краю экрана проведёшь если.
Решается маской на карту. Но как правило, многие разработчики забывают про это.
Вам с командой у себя нужно кое-что поправить
Это креативная фишка! Автор из 2010
Не заметили страсть к исковерканным шрифтам?))
:)
мне очень понравился, ваш сайт, выглядит очень интересно
Комментарий недоступен
Отличная, продуманная и очень красивая работа! Подскажите, а какая CMS используется для этого сайта?
Возможно Wagtail
Красивый. но графиками местами плохого качества.
Хорошо. Успокаивает
Получилось круто, прямо живой уголок
Получилось очень даже свежо, мне нравится
Как суперски выглядит!
Валерий – мастер своего дела. Покупали с женой у него грунт для нашего бонсая, он так интересно рассказывал чем они отличаются и почему в одних растет , а в других нет. Хотя внешне достаточно суровый мужчина на крузаке )
:))
Комментарий недоступен
Очень удобный в пользовании сайт, выглядит премиально
Комментарий недоступен
:) ♥
Видно, что старались. Поправьте заголовки (CORS), так как шрифты не грузятся:
Ребят, скорректируйте текст в первом блоке: "Магазин лучших бонсай в России из Японии". Нельзя писать "лучший". Ну либо сослаться в чем именно "лучший" - на основании каких характеристик и как это подтверждается. В противном случае конкуренты могут накатать заяву и вас оштрафуют до 3 млн. за нарушение закона о рекламе.
бонсаи топ,сайт мне не по вкусу
По приколу вбил в гугле бонсай сейл, там вышел только старый сайт.
очевидно что сначала сайт доделают( донаполнят), а потом уже он переедет на основной домен, т.е. заменит собой старый сайт, не?
А этот домен чисто под разработку.
По приколу обратите внимание на адрес сайта в статье - NEW.bonsaisale.ru
Мобильная верстка - слабовата с точки зрения Ux.
Пытался найти для себя товар - везде товар отсутствует , нашёл только в акциях : ножницы и одно дерево .
Декспотная версия - мне понравилась , есть нюансы , но это не критично .
Пустые разделы, естественно, скроем когда клиент всё заполнит, сейчас просто меню бы не было если их скрыть
Оригинальное решение показывать иероглифы при наведении мышки на меню.
Ребят, всё супер, единственное что на мобилке нужно убрать горизонтальный скролл.
Крутой сайт, мне понравился) Дизайн интересно продуман!
Крайне интересное хобби, раньше не слышал о подобном, благодарю за информацию !
PS/ работа бомба, мне зашло
Капец конечно. На странице каталога вверху было сложно продублировать пэйджер?
Получается, я листаю каталог вниз. И только там могу перейти на следующую страницу?
И если мне что-то запомнилось вверху я должен опять прокрутить вверх, а потом, чтобы перейти - опять вниз.
стиль подсветки пэйджера такой, что не понятно на какой странице ты находишься.
Да и вообще, зачем перезагрузка страницы? через динамику никак не сделать?, чтоб этого "моргания" не было?
Ну и кэшировать пару ближайших гридов. Чтоб пользователь пока смотрит один грид - фоном подгружалось остальное. Это же не сложно.
Карточку товара тоже показывать в динамике, чтоб ползьователь не метался по страницам, а детализировал информацию от точки своей заинтересованности и возвращался к ней легко, а не через квесты возвратов и т.д.
Обработка картинок - это что-то с чем-то.
Шрифты не подгружаются.
При переходе по меню верхней панели написанной в верхнем регистре у активной ссылки меняется регистр. Выглядит (вместе с поехавшими шрифтами жутко)
В разделе "О нас" фоновое изображение так и должно "елозить"? Выглядит, как баг css, когда где-то не учтен скрытый overflow...
а нет, посмотрел... значит специально. Уж не знаю, по мне так не очень.
и вот это вот.
Домен bonsaisale.ru не добавлен в панели
vip19.hosting.reg.ru 26 Aug 2022 07:19
Что случилось?
Чудеса.
Искренне рад за автора, что у него сложилось поработать над таким проектом. Работа проделана огромная. Созидать всегда не просто. Хорошего дня!
Сейчас бы взять весь сайт и упростить. Про главную.
— На главной стр. 3 размера шрифта для параграфов (16, 18, 20).
— На экране 1440х900 (2880х1800 ретина) все элементы просто циклопические, если уменьшить масштаб то лучше, но тогда ковер летит.
— Контакты и доставка в меню выглядят как одно слово, почему не разделить как другие рядом?
— Плашка меню сливается с чёрным фоном, оч странное ощущение, подгони под тон карточек или лучше на ковере чёрный слегка осветлить, тем самым отделишь от фото мастера?
— Кнопку "Смотреть каталог" прикрепить к низу на нужном расстоянии, при изменении масштаба (экрана) кнопка скачет. Не люблю тени в кнопках, но тут она как будь то вырезает кусок фото, может стоить широкую мягкую тенюшку под кнопку?
— В форме "поможем с выбором" еле разглядел поля ввода, добавь обводку как на кнопках при наведении.
— "Всё о бонсай" (плашки) стрелки ни очевидны, ни понятно толи это дизайн толи это кнопки. Влепи лёгкие кнопки из обводки или фона на этих плашках под текстом.
— Соц. сети на ковере ни кто ни когда не найдёт, так как не ожидает, или красить надо.
— "БОНСАЙ-КЛУБ" может лучше растянуть до краёв, а то в карточках теряется и по высоте больше можно.
— Хвойные/ Вечнозелёные... непонятно. Слишком приклеены к карточкам, может сделать целый блок и запихать туда весь каталог, как в разделе каталоге только горизонтально или просто одну кнопку тогда.
— "Смотреть все бонсай" хватит "Все бонсай", "Смотреть все"
— "приходите в гости"? Ждём, заходите, работаем, открыты...
— Карта выглядит нелепо, может затемнить или просто ссылку на карту в виде картинки, есть сервисы которые дизайн карт меняют ну или края хотя бы закруглить.
— В футере адреса не хватает, там искать будут, а к Катре надо возвращаться.
— Ещё на фото мастера вроде есть коррекция, а на других фото нет, если честно фотки на чёрном вырви глаз, пригасить может на 3-5%.
— Большой недостаток в том, что в лого используешь серифы, а на сайте ни как не отображаешь этого, попробуй в заголовках заменить.
— Да и ещё лого студии в футере зачем это клиенту?
Удачи. :)
спасибо :)
одним словом - херня
Привет! какой стек на фронте?
Tailwind CSS, Webp, ES6
Вот на этой странице глаза можно сломать,так мелко и блекло написано
https://new.bonsaisale.ru/knowledge/istoriya/
Да не, вроде норм. А вот гироскоп бесит. Хочется покинуть этот дебильный сайт...
Написано норм, но тут интерактива нет - читать явно я не буду все )
На 10 000 рублей потянет.
Там одной обтравки на 20)
Работа достойная конечно, но вот не задача про владельцев macOS позабыли, safari выдает вот такое увы ...
Странно, пнг везде должны грузиться
Safari уже давно поддерживает Webp
Big Sur всёнорм.
Графика не оч
Гироскоп бесит. Хочется покинуть такой дебильный сайт...
если конкурентов всего пять, и все заказчики не импульсивные тёлки с покупкой сумочки, сайт не слишком перегружен красотой и функциональностью?
Комментарий недоступен
По мне так наоборот, недожатые. Пнг по 7 мегабайт)
Шрифт логотипа нечитабельный, в остальном, все понравилось. Удачи!)
А зачем сохранять фото убитые атефактами сжатия JPG в PNG, ради маски? (на странице товара). Много категорий ведут к сообщению - К сожалению, по вашему запросу еще нет товаров. Вместо того что бы предложить что то другое. Какие-то детские недоработки у сайта, как будто в первый раз этим занимаетесь.
А как вы бы прозрачность делали?
Пнг норм, но стоит все же поменьше сделать. 7мб на картинку жёстко
Логотип классный! Сайт не идеален, зато отличается от рядового
Бледный трудночитаемый с телефона текст,одного меня бесит?
Потдерживаю, тонкий шрифт мусор.
Я занимаюсь фронтендом и даже не знал, что можно параллакс на гиро сделать, шок. Хотя после этого сайта я не хочу его делать, реально раздражает.
Это стиль на сайте стекломорфизм называется? Вроде бы неплохо смотрится, но слишком много его.
Интересно как реализовано закрытие модальных окон свайпом на мобилке, видел некоторые реализации, но там колхоз какой то, хочу себе тоже добавить на сайт один
.
Меня одного бесят вертикальные расположения слов? Например, в разделе "Коллекционные", слово "коллекционный". Почему я, как пользователь, постоянно должен поворачивать свою голову, чтобы прочитать этот чертов текст? Это не только к этому дизайну относится. Жутко неудобно.
Вот тут Полив и Наложение смотрятся как не активные разделы.
И сайт капец как долго грузится. И вот эта загрузка и круглое дупло крутящаеся - дурной тон и моветон. Никто не хочет смотреть на это, открывайте сразу сайт, хоть можно будет начать что-то читать. Лучше видеть прогресс, а не дырку от бублика.
Так же не удачная главная фотка, смотрится оч дешево.
По поводу "на черном фоне лучше всего", вот смотрите https://yandex.ru/images/search?text=%D0%B1%D0%BE%D0%BD%D1%81%D0%B0%D0%B9
Моментами сайт Bork напоминало
А какова ориентировочная стоимость такой работы?
Классный сайт, хороший дизайн.
Сколько стоил сайт, если не секрет?
Я понимаю, что вы просто дизайнеры и кодеры.
Но, что у вас с русским языком?
Почему не склоняете нормально слово Бонсай.
Магазин лучших бонсаев, а не магазин лучший бонсай. Разве нет?
Такая же ошибка на сайте кипдубай про недвижимость.
Лучшая недвижимость Дубай. Это сео запрос такой ? Это как написать "Мы продаем лучшую недвижимость в Москва".
В текстах на сайтах орфографические ошибки. Если с бонсаями еще ладно.
То челы, которые продают Дубай, но не умеют его склонять это смешно)
Видимо, верное склонение для продаж не обязательно)
Зашел. Акуел от цен. Заказал за 1500 к на Алишке такое же...
Показалось, чёрного очень много. Бонсай у меня со светлыми цветами ассоциируется.
со шрифтами проблема и обрезка фоток сделана плохо, аж в глаза попадается
Комментарий недоступен
Комментарий недоступен
Скажу как любитель бонсай , ничерта не смыслящий в сайтостроении: мне зашло. Красиво , выдержано , стильно.
Описание явно не от пульвелизатора. И там же, если навести курсор на "Аксессуары" в хлебных крошках, будет выпадающее меню совсем не в тему
просто потыкал сайт, и вот сразу нашёл над чем ещё поработать
Логотип и шрифт очень круто. Но ваш тег в подвале просто кровь из глаз >_<
Интересный проект, очень стильно подошли к делу)
В первом блоке я бы чуть больше поломала "камень", слегка теряется в десктопной версии. И заметила недостающую запятую в окне "Поможем с выбором". Удачи!)
Комментарий удален модератором
Красиво и приятно сделано.👍🏻 Хотелось бы рассказ о технической части. Как и на чем всё делалось, с какими трудностями столкнулись.