Elna
Такой же, но совсем другой
Elna
Такой же, но совсем другой
Компания «ЭЛФОРТ» — официальный дистрибьютор двух брендов швейных машин. Для одного из них мы уже делали онлайн-каталог — Janome. Очередь подошла и для второго — Elna.
ELNA — известный европейский бренд, который пользуется признанием среди специалистов швейной отрасли за счёт продуманного дизайна и достойного качества продукции. Дизайнерское бюро ELNA находится в Швейцарии, а сами швейные машины производятся на заводах JANOME в Японии, Таиланде и Тайване.
У нас было четкое понимание структуры проекта и ключевой ориентир — сайт Janome. Заказчику там нравилось всё: структура, лаконичность дизайна, организация каталога. При этом надо было оптимизировать бюджет проекта. Во-первых, за счет отказа от прототипов — структуру страниц решили сохранить от Janome. Во-вторых, за счет частичного использования кодовой базы первого проекта.
Кожевина Анна
Аккаунт-директор
Когда одному заказчику нужны несколько проектов, можно попробовать сократить бюджет на разработку, начиная со второго. Часто нет разницы — задача в редизайне существующего сайта или создании нового «по мотивам» существующего.
За счет чего можно сэкономить:
- Прототипы. Если мы сохраняем структуру страниц — можно использовать существующий сайт в качестве готового прототипа. Увы, вариант не подходит, если основная задача редизайна — улучшить юзабилити.
- Техническое задание. Если логика работы сильно не меняется — на новом проекте будет достаточно краткого бэклога.
- Программирование. Сайт состоит из двух частей — фронтенд и бэкенд. Фронтенд — часть сайта, с которой взаимодействует пользователь. Если мы меняем дизайн, это потребует изменения фронтенда. Бэкенд — это часть сайта, которая работает на сервере и отвечает за логику работы проекта. Если программный код бэкенда хорошо написан и не устарел — его можно использовать в новом проекте (целиком или частично).
Бренды важно было дифференцировать друг от друга. Швейные машинки Janome подходят для бытового использования, Elna — бренд премиального класса, для дизайнеров и ателье. Если структура сайтов идентична — задача решается за счет дизайна.
Надо было найти и использовать визуальные решения, которые не были задействованы в первом проекте. Хотелось каких-то новых фишек для блоков. Мы провели брейншторм и решили, что оптимальный вариант в этом случае — сделать дополнительные мудборды (визуальные брифы) с упором на фишки для каждого из блоков главной страницы.
Надо было найти и использовать визуальные решения, которые не были задействованы в первом проекте. Хотелось каких-то новых фишек для блоков. Мы провели брейншторм и решили, что оптимальный вариант в этом случае — сделать дополнительные мудборды (визуальные брифы) с упором на фишки для каждого из блоков главной страницы.
Мудборд (англ. Mood board — дословно, «доска настроения») — подборка референсов, шрифтов, иконок и т. д., выполненных на одном листе или экране. Необходим, чтобы определиться со стилистикой, направлением и настроением, которые должен передавать будущий продукт.
Мудборд делается дизайнером из тех элементов, стилистику которых действительно можно использовать в конечном продукте. То есть, на выходе у нас получается не нарезка из разрозненных, оторванных от практического применения картинок, а набор образов, подобранных специально для этого проекта.
Чтобы не смущать заказчиков незнакомым словом «мудборд», мы чаще используем термин «визуальный бриф».
Мудборд делается дизайнером из тех элементов, стилистику которых действительно можно использовать в конечном продукте. То есть, на выходе у нас получается не нарезка из разрозненных, оторванных от практического применения картинок, а набор образов, подобранных специально для этого проекта.
Чтобы не смущать заказчиков незнакомым словом «мудборд», мы чаще используем термин «визуальный бриф».
Традиционно визуальный бриф мы готовим для всей дизайн-концепции, перед разработкой прототипа, и актуализируем перед стартом дизайна главной страницы. В этом проекте у нас получился набор мудбордов, которые мы соединили воедино.
Результат: на главной странице каждый экран — как отдельный вид искусства :)
Промоблок
Промоблок и некоторые элементы дизайна выполнены в стиле неоморфизм. Стиль стал актуален в 2020 году, и его популярность продолжает расти. В России он часто используется в телевизионной рекламе технологических гигантов.
Неоморфизм задает тон всему сайту — больше белого пространства, «воздуха». Глаза смотрят и видят ровно то, что хотят увидеть. Никакого мусора.
Неоморфизм задает тон всему сайту — больше белого пространства, «воздуха». Глаза смотрят и видят ровно то, что хотят увидеть. Никакого мусора.
Неоднородные заголовки
Заголовки одного стиля и шрифта, но разного цвета и размера — тоже один из последних трендов в веб-дизайне.
Дизайнерский курсор для блока «Наши достижения»
В этом блоке мы использовали модный прием с изменением внешнего вида курсора при наведении на блок каждого достижения.
Необычный блок для публикаций Клуба шитья
«Клуб шитья» — это, по сути, блог с обзорами определенных моделей швейных машин Elna и полезными мастер-классами по работе с ними. На главной странице выводятся свежие статьи. Когда вы собираетесь выбрать какую-либо из статей — её превью эффектно разворачивается на всю ширину экрана.
Футуристичная пагинация
Кнопки слайдера — словно лейблы одежды. Висят с краю, никому не мешают, радуют глаз. У пагинации свой саксесс-бар.
Блок инстаграм
Вот вам фото для настроения, хэштег и ссылка, как найти официальный аккаунт и вдохновляться чаще :)
Нереально красивый SEO-блок
Как часто вы видите красивые SEO-блоки? Задизайнено!
Кристина
Дизайнер проекта
Понятно, что шитье — это девичья тема. Но бренд Elna — премиальный, а швейные машины Elna рассчитаны на профессионалов. Делать из сайта крафтовый блокнот с пуговицами, строчками и, простигоспади, использовать вензеля — не наш вариант. Поэтому мы ушли в графичные прямые формы: их использовали как в типографике, так и в декоре.
Удобный каталог
Если смотреть на программный код — каталог во многом повторяет каталог Janome. Мы сохранили и удобный фильтр, и предварительный просмотр карточек товаров прямо из списка, и возможность поделиться списком сравнения товаров, и максимально подробную карточку товара с возможностью отметить особенности товара прямо на фотографии. Только завернули все в новый дизайн.
Импорт товаров в каталог организован из csv-файлов. При этом мы сначала проверяем, есть ли в этом файле обязательные столбцы. Если каких-то столбцов нет, записываем в ошибки в лог-файл.
Загрузка файлов выполняется через отдельный интерфейс в админ-панели. При добавлении задачи на импорт файла она встает в очередь. По этой очереди периодически проходится «крон» — системная утилита, которая выполняет задачи по расписанию. Крон сначала проверяет запущенные фоном задачи. Задачи, которые выполняются больше 10 минут, он считает зависшими и помечает их в очереди как ошибки. После этого крон ищет самую старую из добавленных задач и запускает её на выполнение.
Загрузка файлов выполняется через отдельный интерфейс в админ-панели. При добавлении задачи на импорт файла она встает в очередь. По этой очереди периодически проходится «крон» — системная утилита, которая выполняет задачи по расписанию. Крон сначала проверяет запущенные фоном задачи. Задачи, которые выполняются больше 10 минут, он считает зависшими и помечает их в очереди как ошибки. После этого крон ищет самую старую из добавленных задач и запускает её на выполнение.
Выбор магазина
Выбрали швейную машинку? Выбирайте магазин, в котором будете ее покупать.
Регион при выборе магазина выбирается независимо от местоположения пользователя в шапке сайта. При первом переходе в раздел «Где купить» выводятся магазины из региона в шапке. Но если изменить регион в самом разделе, сайт запомнит, какой регион интересует пользователя, и покажет его и для списка специализированных магазинов, и для торговых сетей, и для сервисных центров. При этом местоположение в шапке не поменяется.
Регион при выборе магазина выбирается независимо от местоположения пользователя в шапке сайта. При первом переходе в раздел «Где купить» выводятся магазины из региона в шапке. Но если изменить регион в самом разделе, сайт запомнит, какой регион интересует пользователя, и покажет его и для списка специализированных магазинов, и для торговых сетей, и для сервисных центров. При этом местоположение в шапке не поменяется.
Полина
Руководитель проекта
У нас с заказчиком был четко выстроен контур приемки работ, учитывающий опыт первого проекта. Например, верстку мы показывали с реальным контентом, где это было возможно. Это сильно упростило процесс наполнения контентом и сдачи проекта. Все пожелания к верстке мы учли заранее, и на этапе наполнения уже не приходилось отвлекаться на доработку верстки под неожиданный контент.
Также, благодаря погруженности заказчика в проект, внедрили много улучшений, которые впоследствии забрали и на проект Janome.
На самом деле, мы разрабатываем уже третий проект для этого заказчика. Кроме двух сайтов брендов швейных машин запустили сайт программы лояльности, но об этом в отдельном кейсе :)
Также, благодаря погруженности заказчика в проект, внедрили много улучшений, которые впоследствии забрали и на проект Janome.
На самом деле, мы разрабатываем уже третий проект для этого заказчика. Кроме двух сайтов брендов швейных машин запустили сайт программы лояльности, но об этом в отдельном кейсе :)
Готовый проект
