пройдите тест и узнайте,
какая дизайн-профессия подойдет именно вам

Дерзость и наука: дизайнер из Самары сделала лендинг для Cafe Mimi и Ecolatier

Дерзость и наука: дизайнер из Самары сделала лендинг для Cafe Mimi и Ecolatier

Дизайнер Ольга Коробицына искала прибыльную специальность и стала изучать UX/UI. Во время учебы в Contented Ольга прошла стажировку и сделала лендинг для крупных косметических брендов — Cafe Mimi и Ecolatier. Что понравилось ей больше всего, а с чем возникли трудности — читайте в этой статье.

От интерьеров — к интерфейсам

Ольга Коробицына

23 года

Город:
Самара

Образование:
Колледж сервисных технологий и дизайна, дизайнер по отраслям

Место работы:
графический дизайнер в типографии

Курс Contented:
Профессия UX/UI-дизайнер с нуля до ПРО

Я с детства хотела заниматься дизайном, но не могла определиться с направлением. Поэтому поступила в колледж на дизайнера по отраслям. Это прикладная специальность, которая сочетает разные направления: мы изучали натюрморт, живопись, делали дизайн квартир в ArchiCAD. Для дипломной работы выбрала дизайн интерьера актового зала. 

Дипломная работа в колледже
Дизайн актового зала — дипломная работа Оли в колледже

Во время учебы поняла, что мне гораздо интереснее графический дизайн, и записалась на курс к своему преподавателю из колледжа. Там изучила основные программы: Photoshop, Illustrator и InDesign

В 2023 году задумалась о том, чтобы получить более актуальную и прибыльную профессию. Изучала вакансии, советовалась с родственниками и выбрала UX/UI. Поступила в онлайн-школу дизайна Contented. Поначалу было трудно, поскольку приходилось совмещать учебу с работой, но спустя два года наконец получила диплом. 

дизайн приложения на курсе
Дизайн приложения, который Оля сделала на курсе Contented

Лендинг для Cafe Mimi: девчачий, но не розовый

Одна из причин, почему выбрала Contented, — это возможность пройти стажировку у крупных брендов. Во время первой делала лендинг для бренда Cafe Mimi. 

Заказчику нужен был визуально чистый, но динамичный сайт, который презентует бренд, передает яркость и «вкус» продуктов. При этом хотелось избежать стереотипной розовой темы и оскорбительной дерзости на грани.

главный референс
Референс к проекту
мудборд линейки
Мудборд, который составила Оля

Я изучила референсы и взяла за основу голубые и зеленые оттенки, они отлично подходят для молодежи — целевой аудитории бренда. Сделала блоки, которые просил заказчик: 

— новинки;

— хиты продаж;

— каталог. 

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

хиты продаж
Раздел с хитами продаж

Последними блоками довольна не до конца, потому что время было ограничено и не успела довести до ума. Еще расстроило, что мы просто отправили ссылку и не было возможности презентовать проект, показать, как он должен работать, — так решил сам партнер.

кафе мими о нас
натуральность ингредиентов
Фрагменты лендинга

Это был интересный, но трудный кейс, потому что я делала лендинг одна и могла рассчитывать только на свои силы. Зато научилась грамотно оценивать объем работы и пользоваться Figma.

В дизайне Cafe Mimi понравился свежий взгляд со стороны, однако было видно, что у студентов мало опыта для таких проектов. Однозначно стоит развивать насмотренность и, возможно, изначально закладывать более комфортные сроки.

Дарья, Chief Product Officer в Greencosmetics

Дизайн без папоротников для Ecolatier 

Вторым проектом во время стажировки был лендинг для бренда Ecolatier. Мы делали его в команде, и это было гораздо легче, чем работать одной. 

У бренда был дизайн упаковки, который не совсем подходит сайту, поэтому его хотели переделать. Главное пожелание заказчика — избегать полей с подорожником, изобилия папоротников и других аналогичных ассоциаций, потому что идея бренда должна строиться вокруг научности, экологичности и эстетики.

референс компании
Референс к проекту
мудборд партнеров
Материалы от партнера

Для главного экрана выбрали космический фон и добавили летящие звезды. Анимацию лого делала в Adobe After Effects — программа тяжелая и часто вылетает, поэтому работа заняла два дня, но результат очень порадовал. При скролле лого превращается в текст: «Погрузись во вселенную Ecolatier», после зума надпись исчезает. Появляется увеличенный фон с пузырями, который добавляет объем, но при этом не нагружает пользователя лишними деталями.

Анимация на главной лендинга Ecolatier

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

Этот экран делала в Spline — это новый инструмент для меня, на курсе еще не дошли до 3D-анимации. Училась использовать инструмент сразу на практике — это огромный плюс стажировки.

Соловьева Дарья, графический дизайнер, участница команды

эколатье о нас
коллекции эколатье

На сайт добавили блоки, которые просил заказчик:

  • о нас;
  • о продукте;
  • магазин с описанием коллекций;
  • хиты продаж;
  • новинки;
  • каталог.

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

новинки эколатье
Темная тема сайта
каталог эколатье
Светлая тема сайта

Для экрана о бренде взяли мою идею горизонтального скролла. Видела ее у разных студий и на прошлом хакатоне в лендинге АСТ. Но там была немного другая концепция — сайт был полностью горизонтальный, как книга. А здесь использовали комбинацию: сначала листаем вниз, потом вбок и т.д. Такая верстка выглядит современно и очень необычно, что подходит под характер бренда.

Соловьева Дарья, графический дизайнер, участница команды

пример горизонтального скролла
Горизонтальный скролл на сайте Ecolatier

Я верстала лендинг в Figma. Это удобный инструмент для совместной работы, где легко вносить правки. Для анимации с шариками использовала Spline — это онлайн-сервис, где есть библиотека готовых элементов, которые можно адаптировать и применять в своих проектах. Это очень упрощает работу, т. к. мы выбрали 3D, но ранее никто с ним не работал.

Чуприна Елизавета, графический дизайнер, участница команды

Работать над этим кейсом было легче, потому что была команда, на которую можно положиться. Мы оттачивали навыки, которые получили на курсе, учились общаться и вместе работать над одним проектом.

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

Дарья, Chief Product Officer в Greencosmetics

Как поменять специальность, если страшно 

Сейчас я продолжаю работать графическим дизайнером в типографии — это стабильная работа с хорошим окладом. Возможно, скоро решусь уволиться и пойти стажером в UX/UI на небольшую зарплату. Только так можно набраться опыта и составить портфолио.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Читайте также

Подпишитесь сейчас на нашу рассылку

Мы присылаем отличные материалы и никогда не спамим. Отписаться можно в любой момент