ru

Кейс

ОСНОВНЫЕ РЕШЕНИЯ И ПРОЦЕССы

Как я делала сайт

для курса по ИЗГОТОВЛЕНИю декоративных изделий для дома из эпоксидной смолы

обучающую платформу

ОСНОВНЫЕ РЕШЕНИЯ И ПРОЦЕССы

задача

проблематика

Перенести все курсы на собственный сайт. Настроить и оформить личный кабинет для пользователей и автоматизировать процессы

заказчик

Все видео курсы у Юлии находились на разных закрытых аккаунтах в Инстаграм. После известных событий он был в России заблокирован

Юлия Гарипова, создатель декоративных изделий для дома из эпоксидной смолы

перенос курсов

этап 03

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

Этап 02

Видео нельзя было напрямую на сайт загрузить, их нужно было поместить на какой-либо сервис и с помощью html интегрировать на сайт

Скачать все видео из Инстаграм. У Юлии видео не были сохранены. Затем сжать их, чтобы сайт не зависал от перегрузки

Этап 01

#02

погружение в задачу

Все видео были скачены Юлией с Инстаграм и залиты на Яндекс диск. Я получала ссылки на видео с комментариями к какому уроку они относятся

Подготовка

этап 01

Я их обрабатывала, подписывала, сортировала по урокам и писала сопровождающие тексты

Таким образом мы перенесли в общей сложности около 150 видео. Работа длилась примерно 2 месяцa

Подготовлено и обработано около 150 видео

Поддержу с подготовкой контента: при необходимости напишу тексты, проведу фотосессию, обработаю готовые фото, отредактирую видео или подберу иллюстрации

На момент создания сайта я знала 2 сервиса (Vimeo и YouTube), благодаря которым можно было интегрировать видео-уроки на сайт

YouTube не обеспечивал защиту от скачивания контента

интеграция

этап 02

Оплата за пользование Vimeo была заблокирована для России

Но оба не подходили под нашу задачу:

1

2

Поэтому мы решили воспользоваться Dropbox

Так как я не профи в написании кода, то нужна была помощь более опытного разработчика. И с одобрения Юлии я попросила знакомого программиста написать нам код, который защитит контент от скачивания

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

Для интеграции видео-уроков на сайт нужен был ещё промежуточный сервис (видеоплейер), генерирующий ссылку, которую можно было вставить в html-код. Готовый код я вставляла на сайт

3

2

1

HTML кода очень замедляли загрузку сайта, их было много

НО меня не устраивал результат

Осталась проблема с перемоткой и ускорением видео на смартофанах

Сами видео долго подгружались, а на айфонах плеер глючил

клиентка была довольна

Так как это была моя ошибка: не нашла сразу оптимальное решение

Мало ли что может стать с разработчиком, главное, чтобы сайт работал и дальше без моего участия

как я решаю эту задачу

Все видео я перенесла на новую платформу безвозмездно

Я всё таки нашла сервис, в котором был уже встроен удобный плеер, есть защита от скачивания и возможность оплачивать из России

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

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

личный кабинет

этап 03

Есть возможность связаться с техподдержкой (т.е. со мной разработчиком сайта) прямо из каждого урока

С таким дизайном создано 150 страниц. На каждой странице есть от одного до трех обучающих видео с текстовым сопровождением

Кроме 150 видео, о которых я уже упоминала, были обработаны и загружены более 200 изображений готовых изделий

Использованные шрифты: Alegreya Sans и фирменный шрифт Tilda Sans

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

дизайн

4

3

2

1

Общее количество созданных страниц 150

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

техподдержка

вернуться к оглавлению

Дрель, фен
Натуральные камни
Густая смола 450 гр
Жидкая смола 220 гр

Артборд с подрамником
Белый, жемчужный красители
Пигменты gold и white pearl
Всплывающий порошок

Для создания потребовалось:

Часы с ассиметричным расположением циферблата

#ffffff

#f2e7dc

#b18559

#4d484a

На всём сайте использованы языки программирования: Html, Java, CSS. Для оформления, функционала и чтобы сделать приятно ученикам. Пример: персональное обращение по имени на главной странице каждого курса

Видео

Урока

62

53

Тебе доступны

Привет, Татьяна

Расширенный курс

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

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

Важно - забота о пользователях

чТО ЕЩЁ СДЕЛАНО

#03

Важная СОСТАВЛЯЮЩАЯ

Чтобы сайт полноценно работал и смог принимать посетителей

3

Адаптация под все устройства: мониторы разных размеров, планшеты и телефоны

Автоматизированы отправка подтверждение оплаты и данных для доступа в личный кабинет

1

2

Технические штуки: типа домена, оплата, личный кабинет, но без SEO. Сайт скрыт от поиска

обучающее видео

#04

завершающий пункт

Это лишь небольшой отрывок. Юлия получила полное видео. Но мы поддерживаем с ней связь, т.к. на сайте использовался JavaScript и CCS, она не может все делать сама, ей нужна моя помощь

Владелица сайтом может сама управлять сайтом

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

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

Обучающая платформа у меня на постоянной технической поддержке