Обсудить задачу ↗
← Проекты
Дизайн + разработка / CASE STUDY

Just English

Образовательная платформа с уроками, практикой и личным кабинетом.

Моя рольДизайн + разработка
TOOLS / PRACTICENext.js · React · TypeScript · Supabase
Формат кейсаПродукт · интерфейс · реализация
DESIGN + ENGINEERING

Спроектировал и разработал

Мой вклад — проектирование интерфейса и разработка приложения.

01DESIGN02CODE03PRODUCT
В этом проекте
  • Уроки и практика
  • Словарь
  • Кабинет ученика
Just English
Just English / Дизайн + разработка

Задача

Объединить обучение, задания и прогресс ученика в одном продукте.

01 / PRODUCT LOGIC

От первого знакомства — к самостоятельной речи

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

01Знакомство с курсом
02Видео и вопросы
03Диалог и практика
04Слова и повторение
02 / FIRST CONTACT

Сначала попробовать, затем решить

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

Первый экран курса
Вся публичная страница+
Публичная страница целиком
03 / LESSON STRUCTURE

Ученик видит материал и весь план урока

Вкладки «Урок», «Задания» и «Словарь» разделяют форматы работы. План справа сохраняет последовательность: посмотреть видео, ответить на вопросы, выполнить задания. Ученик может вернуться к материалу и повторить попытку.

Объяснение и план урока
04 / SITUATED PRACTICE

Грамматика становится разговором

Встреча в клубе начинается с реплики Ali. Ученик получает роль, читает ситуацию и выбирает ответ на английском. Счётчик 0 / 12 показывает объём задания; имя, реплика и варианты ответа находятся в одной рабочей области.

Начало диалога — реальная практика
05 / ANSWER STATES

Ошибка объясняет, что поправить

При неверном ответе выделяется выбранная строка и появляется короткое объяснение: представиться нужно с I’m. Контекст диалога остаётся на экране, поэтому подсказку можно сразу применить к повторной попытке.

До проверки
Ошибка и объяснение
06 / INDEPENDENT RESPONSE

Без готовых вариантов: свой текст или голос

Самостоятельная практика предлагает представить себя в 3–5 предложениях. Можно написать текст или записать голос; рядом есть критерии самооценки и отметка о полученной помощи. Интерфейс прямо объясняет, что акцент и свободный текст автоматически не оцениваются.

Форма ответа и критерии самооценки
07 / VOCABULARY & REVIEW

Вспомнить слово в контексте

Словарь показывает слово, перевод и фразу из ситуации. Пример можно прослушать; повторение вынесено в отдельный раунд. Подпись объясняет, что слова не блокируют следующий урок: дополнительная практика не превращается в барьер.

Слова, примеры и прослушивание
08 / INTERFACE SYSTEM

Общие правила для разных учебных действий

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

Задание и обратная связь+
Обычное состояние
Состояние исправления
Словарь и самостоятельная практика+
Строки словаря
Поля и критерии
09 / RESPONSIVE PRODUCT

Тот же учебный сценарий на телефоне

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

Курс на телефоне
Диалог на телефоне
VISUAL LANGUAGE

Характер проекта

Тёплый и спокойный интерфейс: светлая основа оставляет место содержанию, а красный акцент выделяет следующий шаг.

TYPOGRAPHY / OnestНачать говорить.Aa Бб Әә Ғғ Ққ Ңң Өө Ұұ Үү Һһ Іі
0123456789
#9D1F15
#2B2320
#FBF9F7
#F4E9E3

Один шрифт, несколько уровней

Onest связывает крупные заголовки, объяснения и элементы заданий. Размер и насыщенность создают иерархию.

Интерфейс поддерживает обучение

Мягкие поверхности объединяют реплику, задание и подсказки. Акцент оставлен для действия и важного фрагмента.

ТЕХНОЛОГИИ РЕАЛИЗАЦИИ
01Next.js02React03TypeScript04Supabase
DELIVERABLE

Что получилось

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

Открыть сайт ↗
Следующий проектFootyTracker ↗
LET’S TALK

Обсудим твою задачу?

Напиши мне в WhatsApp: расскажи о проекте или предложении работы.

Написать в WhatsApp+7 708 903 43 49