Кейс сайта "Учим по ди-джейству"

Проект редизайна сайта школы ScratchDJ School

О проекте: не коммерческий проект
Цель проекта: привлекательный для посетителя проект с атмосферой современной зажигательной музыки. Привести в соответствие зажигательный видео ряд на существующем сайте школы с не выразительным оформлением контента.
Требования: многостраничный сайт адаптированный для различных устройств
Типографика
Цветовые решения
Дизайн проекта и анимация для сайта выполнены с использованием Figma.
Сайт создан на Tilda.
Изображение планшета и компьютера на экранах которых рисунки сайта DJ школы

Учим ди-джейству

DJ School – это творческое пространство для всех, кто любит музыку и хочет реализовать свой творческий потенциал

Страницы преимуществ школы оформлены с рисунками

Рисунок DJ за работой
Рисунок DJ за работой
Записаться на пробный урок
Запишись на курсы
Мы предлагаем специализированные курсы как для начинающих, так и для тех, кто хочет освежить или прокачать уже имеющиеся навыки.
Курсы Beginner, Scratch Dj, true Spin, Level Up, Beatmaking, а также создания музыки в Ableton и др.
Из данных курсов, уроков и тренингов - любой найдет подходящий для себя вариант обучения.

О курсах

Информационные страницы сайта
Послушай трек Послушай трек Послушай трек Послушай трек Послушай трек Послушай трек Послушай трек Послушай трек Послушай трек Послушай трек Послушай трек Послушай трек Послушай трек Послушай трек
Предложен индивидуальный план работы для слушателя курса

Индивидуальная страничка преподавателя школы

Эта кнопка Play активна. Жми смело!

Услуги

Страничка о компании
О компании
Мы поставляем самое необходимое оборудование для диджеинга по всей России более 3-х лет. Мы официальные дистрибьюторы первого в мире контроллера для DVS - Phase
Dj. Консультируем, обучаем и помогаем настроить железо для диджеев как онлайн, так и оффлайн. Приходите в нашу студию Scratch Dj School.

СПАСИБО

Cover designed by Freepik foto

Кейс: интернет-магазин

Действующий сайт: https://tort-moscow.ru
Цель проекта:
О проекте:
Коммерческий проект
Увеличить число продаж через сайт
Требования:
Для кого:
Для заказчика-кулинара
Удобный и интуитивный интерфейс с конструкторами тортов "на свой вкус", позволяющими после выбора ингредиентов сориентироваться по цене торта и сделать заказ.

Сайт интернет магазина "Торты и тарты в Москве"

  • Создать новый сайт на Tilda и заложить элементы фирменного стиля.
  • Создать контент для сайта, создать Каталог продукции, создать карточки товаров.
  • Обеспечить адаптацию страниц и конструкторов под различные устройства.
  • Создать простую форму заказа с калькулятором и с выбором торта по 3 параметрам.
  • Создать альтернативную понятную форму заказа торта с калькулятором и возможностью выбора вкуса и оформления заказа по 7 параметрам, (некоторые параметры представлены с большим разнообразием и предполагают выбор из 14-ти наименований возможных бисквитов или видов мусса).
Встроенный в форму заказа калькулятор предоставляет возможность покупателю сразу оценить стоимость заказа в зависимости от его выбора ингредиентов.

Цветовое решение

Типографика

C3EEE1
37D750
86963E
BEEBC2
E9DD77
A5A1A1
Circe Rounded
Rounded Mplus 1c
-заголовок
-текст
-заголовки H1 и H2
Заголовок Задачи проекта
Вишневое муссовое пирожное
Вишневый компот
Вишневое муссовое пирожное
Кули Вишня
Шоколадный мусс
Вишневое муссовое пирожное
Вишневый компот
Шоколадная глазурь
Кули Вишня
Вишневый компот
350 р.
Шоколадный мусс
Кули Вишня
Шоколадная глазурь
Шоколадный мусс
Заказать
350 р.
Шоколадная глазурь
350 р.
Заказать
Муссовое пирожное Лемон-
Лемонграсс, вес 95 гр.
Муссовое пирожное Лемон-
Лемонграсс, вес 95 гр.
Муссовое пирожное Лемон-
Лемонграсс, вес 95 гр.
Миндально-лимонное сабле
Миндально-лимонное сабле
Миндально-лимонное сабле
Заказать
Взбитый лимонный ганаш
Взбитый лимонный ганаш
Взбитый лимонный ганаш
Лимонное кремю с лемонграссом
Лимонное кремю с лемонграссом
Шоколадная глазурь
Шоколадная глазурь
Ванильная намелака
Ванильная намелака
350 р.
350 р.
Заказать
Заказать
Малиновое муссовое пирожное
Малиновое муссовое пирожное
Шоколадный бисквит
Шоколадный бисквит
Малиновый джем
Малиновый джем
Шоколадный мусс
Шоколадный мусс
Зеркальная глазурь
Зеркальная глазурь
Хрустящий слой
Хрустящий слой
350 р.
350 р.
Заказать
Заказать
Тарт Кокос Карамель
Хрустящий слой с миндальными лепестками
Карамелизированные миндальные лепестки
Кокосовое кремю
Кокосовая карамель
Взбитый кокосовый ганаш
Кокосовое сабле
400 р.
Заказать
Муссовое пирожное Мандарин
Мандариновый джем
Бисквит Джаконда с штраузелем
Мусс из молочного шоколада
350 р.
Заказать
Тарт Маковый
Тарт Маковый
Мандариновое сабле с маком
Мандариновое сабле с маком
Маковый франжипан
Маковый франжипан
Лимонный ганаш
Лимонный ганаш
Лимонная меренга
Лимонная меренга
400 р.
400 р.
Заказать
Заказать

Дизайн страниц сайта адаптирован к различным устройствам

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

Дизайн страниц сайта адаптирован к различным устройствам

Вид страницы каталога тартов на планшете

Для телефонов карточки товаров располагаются в столбик

Предлагаем Вам на выбор 14 вкусов.

Страничка знакомства пользователя с предлагаемыми вкусами.

Состав:
Ванильный бисквит с хрустящим слоем
Начинка: Компот Клубника с кусочками клубники и клубничная намелака
Клубнично-ванильный мусс
Ягодная глазурь
2. Торт Клубничный взрыв
(белый и клубничный шоколад)
  1. Торт Карамельное яблоко
(карамелизированный шоколад)
Состав:
Карамельный бисквит с бобами Тонка и хрустящим карамельным слоем
Начинка: Яблочный компот с кусочками яблок и карамельный ганаш
Карамельный мусс
Карамельная глазурь
3. Торт Кофе-шоколад
(темный, белый и молочный шоколад)
Состав:
Шоколадный бисквит с орехом пекан
Начинка: Взбитый шоколадно-кофейный ганаш и кофейное кремю
Шоколадно-кофейный мусс
Шоколадная зеркальная глазурь
Состав:
Фундучный бисквит с йогуртовым хрустящим слоем
Начинка: Смородиновый джем и взбитый смородиновый ганаш
Йогуртовый мусс со смородиной
Ягодная глазурьелака
Клубнично-ванильный мусс
Ягодная глазурь
4. Торт Смородина Йогурт
5. Торт Пина-Колада
(белый шоколад,ром)
Состав:
Кокосовый бисквит с хрустящим слоем
Начинка: Ананасовый компот с
6. Торт Груша Боб Тонка
(темный шоколад, молочный шоколад)
Состав:
Морковный бисквит
Начинка: Грушевый компот с
Предлагаем Вам на выбор 14 вкусов.

Страничка знакомства пользователя с предлагаемыми вкусами.

Каталог тортов

Фильтр: Все торты
Свадебные торты
Торты скульптуры
Детские торты
Праздничные торты

Окно заказа. Заказчик может сделать индивидуальный выбор вкуса и декора в трех выпадающих окнах

Выбор декора для торта

Отдельный каталог для выбора элементов оформления торта

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

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

Велюр
Желтый
Нежный мусс с пюре манго
Конфи манго-маракуйя с кусочками манго + Креме
экзотик с пюре кокоса
Хрустящая песочная основа
Форма Айсберг

Создайте свой рецепт муссового торта в Конструкторе

1
Выбор формы и размеров торта
2
Выбор покрытия торта
Выбор дополнительного декора
3
Шаг
Шаг
Шаг
Фрезия
Выбор мусса
Выбор цвета
6
5
4
Шаг
Выбор бисквита
Шаг
Выбор начинки
7
Шаг

Конструктор торта по индивидуальному заказу

Здесь вы сможете создать свой неповторимый торт.
Фотография Торт круглый
Фоторгафия торт айсберг
Фотография торт Волны
Фотография торт Любовь
Фотография торт праздничный
Фотография торт праздничный
Вы выполнили
7 шагов и выбрали свой вкус и дизайн торта.
Вам осталось заполнить заказ и наши специалисты свяжутся с Вами.
1
2
3
4
5
6
7

Кейс: двухстраничный сайт с анимацией

Сайт с анимацией "Автомобили Тесла"
-Вращение объектов
-Движение объектов при скроле
-параллакс-эффект
Эффекты использовать
обоснованно по
сценарию
Эффекты анимации:
TildaSans
TildaSans
TildaSans
Типографика:
Georgia
Georgia
Georgia
Future of Driving
Tesla cars come standard with advanced hardware capable of providing Autopilot features, and full self-driving capabilities—through software updates designed to improve functionality over time.
Tesla's Autopilot AI team drives the future of autonomy of current and new generations of vehicles. Learn about the team and apply to help accelerate the world with full self-driving.
На первой страничке сайта используется нейтральный и не отвлекающий от эффектов дизайн.
Главная страница сайта
Три кадра с анимацией автомобиля

Страницы с движением автомобиля при скроле

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

Страницы с информацией дополнены анимацией и параллакс эффектом

Вторая страница сайта отправляет нас в путешествие на марс. Анимация создает необходимую атмосферу

Экскурсия на Тесламобиле на Марс.
На кадрах 1 и 2 видно вращение планеты.
А на кадрах 3,4 и 5 используя параллакс-эффект достигается 3D эффект так как при скроле видна разноудаленность планет от автомобиля, серая планета “обгоняет” остальные.
Эффект движения при скроле и парралакс-эффект на примере сайта в видеоформате
She has been nominated for an Academy Award, two Grammy Awards, and the Mercury Prize
Кейс: сайт Тесла-шоу
.
Цель проекта: Создать сайт для продвижения услуг по проведению тематических шоу

Для кого: Для заказчика-организатора шоу

Требования: Удобный и интуитивный интерфейс с увлекательным повествованием о шоу и возможностью выбрать свой вариант представления его продолжительности, сориентироваться по цене и отправить заказ

Двухстраничный сайт "Тесла шоу"