КЕЙСИ

Вебдизайн та морозиво. Концепції для Mr. Pops від студентів

Студенти курсу Web Design Junior розробили концепції вебсайту для морозива Mr. Pops. Додали можливість онлайн-замовлення та використали елементи айдентики бренду.

Кейс #1. Автор — Антон Герасимович

Випускник Projector Антон Герасимович
Для мене важливим було вкласти в проєкт якусь ідею, думку. Розповісти історію компанії через дизайн її сайту. Адже, як пише Кармін Галло, за кожним брендом стоїть історія становлення, певний посил, цінності, з якими бренд завойовує лояльних користувачів.

Часом виявляється, що найбільш вдалі рішення є результатом логічного ланцюжка досліджень. Ось так і тут, для фіналізації ідеї, необхідно було ретельно дослідити історію компанії. Побачити її меседжі, цінності, які вона прагне донести до користувача. Вивчити її основні ЦА. Розібратися у цілях та завданнях, які б компанія прагнула вирішити за допомогою цього сайту.

Головною ціллю сайту була підтримка іміджу бренда, але з можливістю онлайн замовлення морозива та пошуку партнерів для колаборації. У дизайні клієнт хотів бачити імплементовані елементи своєї нової, більш мінімалістичної айдентики для підтримки нового іміджу. "Без надмірного фану, але щоб хотілося лизнути-кусьнути."
Концепція сайту Mr Pops від студентів Проджектора
Головний екран
З головної сторінки сайту можливо одразу вибрати місто, адже від цього залежить кількість одиниць доставки та ціна морозива: у кожному місті вона трохи відрізняється. Для зручності користувача, одразу можна "набрати" собі торбинку морозива, не переходячи до каталогу.

Для клієнта було важливим донести унікальність продукту, його історію, рецептуру та спосіб виробництва, тож я розмістив ці блоки-оповідки на головній сторінці слідом. Адже технологія та поєднання смаків є авторською розробкою.
Концепція сайту Mr Pops від студентів Проджектора 2
Картка товару
Концепція сайту Mr Pops від студентів Проджектора 3
Каталог
У повноцінному каталозі є можливість сортувати і фільтрувати асортимент. Тут також зберігається кольорова ідентифікація карток у колір морозива. Для кращої конверсії, на смаках застосовані позначки зі знижками та «новенькими» пропозиціями, адже кожного сезону колекція може змінюватись.
Концепція сайту Mr Pops від студентів Проджектора 4
Модель морозива
Невеличким випробуванням стало моделювання візуального контенту – 12 смаків морозива. У нас не було фотоконтенту для розміщення на сайті, тож довелося моделювати, текстурувати та рендерити смаки.
Концепція сайту Mr Pops від студентів Проджектора 5
Кошик
Щоб трохи розбавити формальний інформаційний стиль тексту, та перейти у теплі, дружні відносини з користувачем, я вирішив додати трохи фану, як то таця-кошик, яка заповнюється поступово: чим більше замовиш, тим більше морозива стирчить з неї.

Кейс #2. Авторка — Катерина Колісниченко

Випускниця Projector Катерина Колісниченко
Робота над проєктом Mr.Pops почалася з походу в магазин за морозивом. Треба ж було спробувати продукт перед тим як створювати сайт для них. Наш куратор Діма знайомий особисто з хлопцями з Mr Pops, тому він описав їх стратегію, цілі і їх позиціонування на ринку. Потрібно було зрозуміти їх настрій і передати його користувачам через сайт.

Робота була цікавою, тому що хотілося зробити щось яскраве та емоційне (морозиво все-таки). Хоча було непросто знайти ідеальне поєднання яскравого і строгого, але при цьому незвичайного стилю.
Концепція сайту Mr Pops від студентів Проджектора 6
Головний екран
Концепція сайту Mr Pops від студентів Проджектора 7
Кошик
Концепція сайту Mr Pops від студентів Проджектора 8
Сторінка замовлення
Після того як накидали кілька десятків різних референсів і концептів, руки опустилися, бо все було не те. Потім я по шматочках почала збирати головний екран, і задавати колірну гаму і стилі всім іншим сторінкам. Був момент коли зрозуміла, що мені зовсім не подобається, і зробила абсолютно в іншому стилі концепт, але за порадами Діми повернулася до першого варіанту.
Концепція сайту Mr Pops від студентів Проджектора 9
Картка товару
Було дуже круто робити 3D форму морозива, ніколи до цього не зіштовхувалася з Cinema 4D, але разом з Дімою й іншими хлопцями, ми стали пізнавати світ 3D і це було дуже цікаво.

Також хотілося зробити прикольну анімацію на головному екрані, і в цьому знову допоміг Діма та After Effects. Дивлячись зараз на цю роботу, вона мені подобається навіть більше, ніж тоді. Напевно, тому що свіжим поглядом оцінюю і згадую скільки сил було вкладено. І розумію, що воно все було того варте.

Кейс #3. Авторка — Ольга Литвиненко

Випускниця Projector Ольга Литвиненко
Весь макет мав викликати емоцію, що ти хочеш спробувати це морозиво. Найважче було робити шрифти та 3D, але в роботі дуже допомагали куратори.

Щодо шрифтів — я дуже багато варіантів перепробувала і куратору багато з них не подобалося. Йому дуже хотілося потрапити в настрій, а я не розуміла, який саме це настрій. З одного боку — це морозиво і воно викликає радість, але один тільки шрифт не передасть цієї радості.

Власне морозиво робили в After Effects, звичайно ж допомагав куратор Діма. У мене вийшло трохи криве морозиво, тому я взяла версію куратора. Далі перефарбувала його, підібрала кольори і під ці кольори вже робила фінальну версію.
Концепція сайту Mr Pops від студентів Проджектора 12
Каталог морозива
Концепція сайту Mr Pops від студентів Проджектора 13
Картка товару
Концепція сайту Mr Pops від студентів Проджектора 14
Оформлення замовлення
Концепція сайту Mr Pops від студентів Проджектора 15
Кошик
Концепція сайту Mr Pops від студентів Проджектора 15
Картка товару
Випускниця Projector Катерина Дейнека
Кейс #4. Авторка — Катерина Дейнека
Концепція сайту Mr Pops від студентів Проджектора 16
Головна
Концепція сайту Mr Pops від студентів Проджектора 17
Каталог
Концепція сайту Mr Pops від студентів Проджектора 18
Історія бренду
Концепція сайту Mr Pops від студентів Проджектора 19
Сторінка з чат-ботом
Концепція сайту Mr Pops від студентів Проджектора 20
Футер
Для тих, хто сам хоче навчитися вебдизайну, маємо два курси для початківців Web Design Beginning та Web Design Junior.

Якщо маєте уточнення або ж потребуєте консультації, то наші менеджери завжди готові допомогти. Зв'язатися можна за телефоном (+380 97 015-92-72) або ж надіслати лист на пошту – hello@prjctr.com.ua
Кейс зібрав: Денис Пристай
Courses
Сподобалась стаття?