Разработка продукта
Миссия бренда — помочь каждому почувствовать уверенность в работе с HTML, CSS и JavaScript, показав, что веб-вёрстка — это не сложно, если понимать логику и соблюдать порядок.
Суть
Суть бренда
Название
Название «ADivC» объединяет основной бренд ADC с ключевым HTML-тегом <div>, который является фундаментальным строительным блоком веб-вёрстки.
Ценности
Преимущества
Характер
Логотип
Логотип представляет полное название «ADivC». Квадратики в углах имитируют маркеры выделения элементов в графических редакторах и интерфейсах, которые появляются при клике на объект для его редактирования. Иконка упрощает логотип до первой буквы «А», сохраняя те же угловые маркеры.
Фото: фавикон.
Главная страница
Главная страница
Главная страница представляет собой разводящий лендинг, рассказывающий об онлайн-учебнике и его структуре обучения. Вначале пользователь видит hero section с призывом начать обучаться. Далее идет блок с карточками основных преимуществ платформы. Ниже размещен баннер о целевой аудитории. После идет визуализация учебной программы с 7 модулями, от введения и настройки окружения до публикации готового сайта. В конце находится призыв к действию, кнопка перехода к учебнику и футер с информацией о проекте.
Страница учебника
Страница учебника представляет собой каталог всех модулей обучения с развернутой структурой образовательной программы. Вверху страницы размещен hero section с крупным заголовком и визуальными элементами на фоне. Далее последовательно идут карточки всех 7 модулей курса. Каждый модуль представлен отдельным блоком с номером, названием, кратким описанием содержания и списком тем внутри модуля. К каждой теме указано время прохождения и стрелка для перехода к материалу. Часть тем скрыта под выпадающим списком с кнопкой «Свернуть» или «+2 темы» для удобства навигации. Под каждым модулем размещена синяя кнопка «Перейти к модулю» для начала обучения.
Фото: страница учебника. Мобильная версия.
Страница учебника
Страница модуля
Страница модуля
Страница модуля представляет собой детальный обзор конкретного раздела обучения с визуализацией его содержания. Центральную часть занимает hero section. Под ним размещена информационная карточка с указанием номера урока, общим временем прохождения и графикой. Далее следует список тем модуля, оформленный в виде кликабельных карточек с номерами, названиями уроков и указанием времени прохождения каждой темы.
Страница урока
Страница урока
Страница урока представляет собой полноценную обучающую статью с теоретическим материалом, практическими примерами и интерактивными заданиями. Hero section содержит крупный заголовок урока с информацией о номере урока и времени прохождения. Основной контент структурирован в виде последовательных блоков, левая боковая панель с оглавлением урока для быстрой навигации по разделам, правая область с материалом урока. В конце урока находится раздел «Полезные ссылки» с внешними ресурсами и блок обратной связи «Была ли эта статья полезной?» с кнопками «Да» и «Нет».
1. Страница урока. Планшетная версия 2. Страница урока. Мобильная версия
Структура страницы о проекте
Страница о проекте
Страница о проекте представляет собой презентационную материал, раскрывающую философию и структуру образовательной платформы. Вверху размещены макеты страниц проекта, который будет создаваться пользователями во время обучения. Ниже следует блок статистики с информацией, что получат студенты, пройдя этот курс. В конце блок с призывом к обучению.
Структура лендинга
Лендинг
Лендинг представляет собой приветственную страницу с акцентом на доступность и простоту обучения. Вверху размещен hero section с краткой характеристикой учебника. Ниже следует блок из шести карточек с ключевыми преимуществами. В конце блок с призывом «Учебник скоро откроется для всех» и формой email-подписки.
Лендинг
Сайт онлайн-учебника спроектирован на основе компонентной архитектуры. Наименования компонентов и их иерархия организованы по принципам Universal Design Framework. Такой подход ускоряет поиск нужных элементов в структуре проекта и дизайн-системе, а также облегчает их изоляцию и переиспользование.
