Расширяли гайды Skysmart и искали детей моделей — как мы делали магазин мерча. История в мемах
Привет! На связи Pragmatica, и в июне 2021 к нам обратилась онлайн-школа для детей и подростков Skysmart с задачей запустить интернет-магазин мерча.
Мы хотим запустить сайт интернет-магазина, при этом развить стиль и увидеть свежую интерпретацию текущей айдентики Skysmart
Команда Pragmatica расскажет о работе над проектом: как за два месяца прошли путь от концепции до работающего интернет-магазина и сделали для Skysmart не только сайт, но и контент к нему.
Концепция дизайна и глобальное решение
Бренд Skysmart живой, яркий, содержит нестандартные приемы. Мы начали думать, как в этих условиях можно выгодно подсветить товары. Посмотрели референсы — нашли сайт мерча от Netflix с тематическими фонами для каждой коллекции. И у нас родилась идея перенести визуальный стиль Skyeng на фотографии товаров.
Мы сохранили айдентику Skysmart: взяли для фото фирменные цвета, формы и шрифты. При этом сайт оставили нейтральным и усилили типографику.
Ответ Skysmart был жесток, но справедлив:
Выглядит как идея классно, но концепция слишком зависима от того, как пройдет фотосессия. Есть риск, что мы согласуем это решение, а в реализации все рассыпется. Предлагаю вам самим провести черновую фотосессию и поместить в дизайн, посмотрим, что выйдет
Мы были уверены в идее, поэтому ушли делать фотосессию. Об этом подробнее расскажет Лера — она руководила проектом.
Пробная фотосессия
Первую фотосессию мы провели из подручных материалов: взяли из офиса поп-ит, плюшевую собаку и другие вещи, которые по стилю и цветам напоминали мерч Skysmart.
На съемки позвали Лешу Пьянкова, арт-директора Pragmatica, его родного брата, менеджерку проектов Кристину Черноскутову и модель.
Параллельно дизайнеры начали рисовать и анимировать макеты. Как только фото были готовы, мы объединили нашу идею, пробную фотосессию, макеты и пошли показывать это команде Skysmart.
Заказчик принял концепцию, и мы занялись разработкой сайта. Передаем слово разработчикам.
Выбор конструктора и верстка
Мы проанализировали варианты, как оптимально реализовать сайт в плане верстки, бэкенда, работы с контентом и поддержкой. От Webflow отказались, так как у них не поддерживается оплата из России, хотя это более профессиональный и гибкий инструмент. Остановились на Tilda.
Позже с конструктором возникли сложности из-за кастомного дизайна. Многие идеи оказалось сложно реализовать, поэтому мы подключили к проекту силы фронтенда.
Например, мы изменили расстояния между фото, названием товара и ценой на главной странице. Благодаря скрипту она стала выглядеть лучше.
При передаче заказчику, чтобы упростить работу сайта с новыми скриптами, Никита (наш разработчик) переписал весь код практически с нуля.
Вот что я вам скажу про работу с Tilda: программист прошедший через этот конструктор уже не мальчик, но муж. Ему можно доверять, ведь он фактически умер и возродился снова. Но мы справились с ограничениями конструктора, и у нас появилась отдельная сетка под мобильные устройства и планшеты.
Параллельно с версткой основного каталога мы продолжили работать над дизайном. Сделали отдельные страницы под разные коллекции и категории товаров и рассказали о доставке.
Мы проработали карточку товара, следуя правилу мерч-first — сохраняя акцент на товаре.
Создали систему баннеров, которые можно использовать, как обложки под новые коллекции мерча и подборки.
Важно было не потерять в качестве на этапе продакшена. Чтобы отловить все возможные баги, мы провели тестирование. Параллельно с работой в Екатеринбурге, Илья с Лерой отправились в Москву на съемки контента для сайта.
Фотосессия с детьми в офисе Skyeng
Сначала мы планировали провести только тестовую фотосессию. Для передачи заказчику сделали подробную инструкцию с референсами, но в этом случае мы не отвечали за конечный продукт. Поэтому вскоре решили провести съемку сами, чтобы получить предсказуемый результат.
К тому же ресурсы маркетинга клиента были перегружены. Мы со Skysmart действовали, как одна команда, и быстро подхватили эту задачу.
Мой опыт работы в event пригодился в организации фотосессии. Я собрала подробную смету, и также стала мини-кастинг-агентом. Снимать решили в студии Skyeng в Москве: заказали свет, позвали фотографа и стилиста.
Самое интересное — это было работать с моделями для съемок. Skysmart обучает детей, поэтому мы искали моделей от 7-ми до 15-ти лет. Найти их оказалось непросто — среди моих друзей не так много людей с детьми.
Детям сложно долго удерживать внимание на чем-то одном, а еще они могут просто отказаться фотографироваться, даже если мы договорились с их родителями. Так что нам пришлось побыть аниматорами и проводить игры на сплочение, чтобы модели не скучали и сохраняли интерес к съемке.
Результат
Skysmart пришли с конкретной задачей: запустить интернет-магазин и расширить видение текущего стиля. Мы справились, и клиенту понравился результат.
Сейчас сайт запущен в первой версии. Вы можете посмотреть его по ссылке. Мы продолжаем дальше развивать магазин — скоро появятся фильтры, категории, поиск, новые товары.
Для нас этот проект о том, что важно не только рисовать макеты и исследовать, но и идти в бой — самим готовить контент. Особенно, когда он становится частью дизайн-концепции.
А еще важно работать, как одна команда. Выручать клиента, если у него нет возможности дожать задачу. Ведь для нас классный результат — это повод развиваться дальше.
И... бесценный отзыв заказчика о работе:
Неприлично хорошо, так нельзя работать
Подписывайтесь на телеграм-канал Senior designer — обучаемся и обсуждаем рост цифрового дизайнера, критикуем рынок, рассказываем о Pragmatica. Дизайнерам от дизайнеров.
Все отлично, но вот эти ваши феминитивы 🙃 менеджерка звучит как оскорбение, не?
не
А зачем такие муки с Тильдой? Почему бы просто на Вордпрессе не сделать?
На крайний какой-нибудь wysiwyg подрубить, если в верстку лезть не хочется.
Честно говоря, внутри таких специалистов нет. В моем мире Вордпресс какой-то морально отживший. Выбирали из того, с чем имели уже дело сами :)
Привет!
А Саша Лагута вам тоже помогал?
нет, только по кейсу, и там буквально пару часов, по-дружески :)
Евгений, а вы сначала в фигме делаете макеты страниц или сходу в тильде?