Skin Level — разработка лендинга

Skin Level

Landing page

Сайт бьюти-проекта Skin Level

Мир красоты — благодарная тема для работы над сайтом, и компании из этой индустрии выбирают нас регулярно: портфолио тому подтверждение. Этот проект отмечен наградами за инновации и оформление, и пользователям он нравится.

Задача

Создать сайт, который выделяется в насыщенной нише и при этом остаётся удобным для посетителя.

Что отличает бьюти-сегмент

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

Что входило в работу

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

Красота и удобство одновременно

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

Реализация

Начало работы – это всегда погружение всей команды в бизнес заказчика.

Мы собрали самые реактивные умы нашей компании, создав команду мечты: персональный project - менеджер, арт директор, шеф - дизайнер, team lead от back и front end разработчиков, маркетолог. При необходимости, мы расширяем команду, а также вылетаем на личные встречи с заказчиками.

Вся отчётность, скайп-коллы и контроль сроков в ответственности project-менеджера. Все задачи разложены по дням и часам. Чтобы каждый этап был выполнен на 100 из 100.

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

Аналитика

Первой к работе приступила наш маркетолог Светлана:

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

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

Совместно с Александром, нашим UX - UI дизайнером, было продумано расположение всех полей, кнопок и информации. Мы очень быстро согласовали макеты и торжественно передали наводить красоту нашим художникам»

Дизайн

Благодаря правильной и живой коммуникации с заказчиками, наши художники чётко поняли задачи и занялись разработкой уникального дизайна, над которым ломали голову наши разработчики, но об этом позднее! Какие идеи и приёмы были применены на сайте расскажет наш шеф-дизайнер Дарья:

«Я очень люблю этот проект. Творчество так и кружило день ото дня в офисе. Совместно с арт - директором мы взяли за основу идею горизонтального скролла, вокруг которой закрутилось все остальное. Мы, конечно, поставили нелёгкую задачу фронтам, но результат же имеет wow-эффект, да? Мы соединили все страницы едиными анимированными элементами - листьями через все экраны и добавили глубины, благодаря эффекту параллакса. Могу бесконечно бродить по страничкам.. Уместно и с задумкой!

Я также не один час провела в поиске идеальных качественных картинок, которые будут максимально релевантны теме и образам с moodboard. Наш перфекционизм воплотился даже в Яндекс - карте! Было принято решение её кастомизировать под цвета сайта. Теперь точно нет лишних деталей, все максимально органично концепции дизайн проекту сайта»

Работа над UX-UI

«На основе моих исследований, я также посоветовал создать закреплённое вертикальное меню справа и систему навигации, которая будет подсказывать на какой странице находится пользователь. В итоге, Дарья придумала стильно ныряющие вперёд цифры в процессе горизонтального скролла, которые выглядят очень круто, а главное, это нужно нашим пользователям. Я всегда за разум в потоке вдохновения художников. Идея может быть сколь угодно крутой, но непонятной именно вашему потребителю, красота ради красоты – не про нас. Сайт должен работать. Все эти бесценные данные подтверждают целесообразность дизайна Дарьи».

Все-таки, командная работа-самая эффективная! После того, как нарисовалась полная картина будущего сайта, осталось нашему frontend разработчику Артёму вдохнуть в неё жизнь, а backend - программистам закрепить результат. Однако, нашими художниками был разработан достаточно сложный дизайн, который заставил попотеть в процессе реализации.

Функционал

«Да уж, дизайн действительно непростой, но тем и интереснее. Он включил в себя эффекты свободного перелистывания страниц с привязкой к экранам, да ещё и со смежными областями. Сложность в том, что для реализации такого уникального дизайна не было готовых ни платных ни бесплатных решений, поэтому пришлось реализовывать данную функциональность с нуля. Несколько бессонных дней и ночей и всё готово!

Однако, пришлось также позаботиться и продумать проработанную оптимизацию. Поскольку сайт вмещает в себя 12 одновременно отображаемых страниц, сильно загруженных графикой и контентом, пришлось реализовывать постепенную загрузку ресурсов и инициализацию модулей по мере скролла сайта. Такое решение было самым оптимальным и положительно сказалось на производительности и оценке скорости. Уменьшилось количество запросов к серверу на 83% и объем загружаемый данных на 7 мегабайт. Теперь красота, которую Дарья напридумывала стала реальной! Естественно, был сделан полный адаптив на все устройства, ниже можете полистать на телефоне, планшете и десктопе»

Результаты работы

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

На мой взгляд, это очень цельная и глубоко проработанная работа на каждом этапе. Это важно, когда присутствие любого элемента можно обосновать. Сегодня дизайн перестал быть субъективным, благодаря исследованиям, знаниям основ психологии и современным технологиям, мы создаём эффективные сайты, работающие на ваши задачи. В подтверждении этих слов – высокий показатель индекса скорости загрузки по статистикам сайта Page Speed Insights.

Ну и, конечно, высокая оценка пользователей- одна из наград за наши старания. Была отмечена эстетичность и цельность всей работы, без навязчивых элементов, всё удобно и «дорого». Сайт легко и быстро открывается на любых устройствах, за счёт полной адаптации и грамотного программирования.

Награды сайта Skin Level

Мне отдельно приятно сообщить, что этот проект и работу моей команды не оставили без внимания эксперты digital-сферы.

Сайт Skin Level отмечен жюри одного из самых престижных конкурсов России Рейтинг Рунета 2019 года в номинации «Красота и здоровье».

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

А уже осенью 2019 года сайт получил одну из престижных наград Международного рейтинга AWWWARDS- премию Honors.

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