Дизайн геткурса для школы BlaBlaInvest

Описание задачи

К нам обратилась школа BlaBla за оформлением личного кабинета Геткурс. Была необычная задача — сделать дизайн сказочным и в стиле мультфильма «Алиса в стране чудес». У клиента было изображений, шрифты, дизайн лендинга. Это хороший набор материалов для старта оформления.

Задача

Сделать новый дизайн для школы на Getcourse в волшебном стиле.

Зачем, цель

Клиент мечтал о новом дизайне геткурса. Это всегда была его боль. Сделав новый дизайн мы решаем юзабилити-проблемы текущего дизайна Getcourse. Кроме этого мы связязываем все площадки клиента. .

Бизнес-требования к продукту

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

Отзыв клиента

Результат клиента — x2 в заявках

До оформления заявок в лист предзаписи было 500−600, после анонса оформления — 1200

Дизайн до упаковки

Дизайн геткурса для школы BlaBlaInvest 1
Страница курса
Дизайн геткурса для школы BlaBlaInvest 2
Страница модуля
Дизайн геткурса для школы BlaBlaInvest 3
Страница урока

Процесс

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

А здесь нужно было создать волшебство какое-то. ячфвафывфы

Обновленный дизайн

В новом дизайне нам надо было показать волшебство. Мы добились этого через необычные формы в боковой панели, шрифта, иллюстраций.

Страница курса, когда пользователь не оплатил курс

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

Мы показываем недоступность через создание ч/б эффекта на фото и отделением кнопокой «Провалится глубже в страну знаний»

Дизайн геткурса для школы BlaBlaInvest 4

Страница курса, когда пользователь оплатил курс

Когда пользователь оплатил курс, другие модули курса становятся доступыными. Мы показываем это через удаление ч/б эффекта с фото.

Дизайн геткурса для школы BlaBlaInvest 5

Страница модуля с уроками

Картинки и фон каждого модуля мы из списка модулей передаем в шапку. Чтобы у пользователя оставался фокус и он понимал, куда он попал.

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

Дизайн геткурса для школы BlaBlaInvest 6

Дизайн элементов страницы урока

Я разрабатываю для страницы уроков набор элементов, из которых можно собирать все остальные страницы.

Дизайн геткурса для школы BlaBlaInvest 7

Страница урока

После разработки всех элементов страницы урока я взял одну страницу из уроков клиента и стилизовал ее с новыми элементами.

Дизайн геткурса для школы BlaBlaInvest 8

Блог тестирование, дизайн разных состояний

Цель дизайна — повышать вовлечение. В блоке с заданием я повышал вовлечение с помощью изображения портала.

Я зазываю пользователя в красивый портал срелками. Кликая на него, пользователь начинает отвечать на вопросы.

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

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

Дизайн геткурса для школы BlaBlaInvest 9

Оформление школы на геткурс для ResultSchool

Описание задачи

К нам обратилась школа ResultSchool за оформлением личного кабинета Геткурс. Из фирменного стиля был логотип, шрифты и цвета. Кроме того клиент отправил лендинг, который они сделали для курса. Он и лег в основу оформления геткурса.

Задача

Оформить школу на Getcourse под ключ.

Зачем, цель

Сделав новый дизайн мы решаем юзабилити-проблемы текущего дизайна Getcourse. Кроме этого мы создаем брендированный дизайн. Среди 10 школ с стандартным дизайном, пользователь сразу узнает ResultSchool.

Как выглядит стандартный дизайн Getcourse

Оформление школы на геткурс для ResultSchool 10
Главная страница
Оформление школы на геткурс для ResultSchool 11
Страница стренинга
Оформление школы на геткурс для ResultSchool 12
Страница урока

Оформление школы на геткурс для ResultSchool 13
Страница оплаты

Как стал выглядеть геткурс у школы Result School

Главная страница

Оформление школы на геткурс для ResultSchool 14

Внутри тренинга

Оформление школы на геткурс для ResultSchool 15

Страница урока

Оформление школы на геткурс для ResultSchool 16

Профиль

Оформление школы на геткурс для ResultSchool 17

Настройки уведомлений

Оформление школы на геткурс для ResultSchool 18

Вход и регистрация

Ожидание вебинара и вход в вебинар

Вебинарная комната

Оформление школы на геткурс для ResultSchool 23

Спасибо за оплату и обратная связь

Покупки

Оформление школы на геткурс для ResultSchool 26

Оплата заказа

Оформление школы на геткурс для ResultSchool 27

Прогресс-бар и дополнительная информация

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

Оформление школы на геткурс для ResultSchool 28

Каждый курс имеет свой цвет и под каждую цветовую схему мы подобрали цвета прогресс-баров.

Оформление школы на геткурс для ResultSchool 29

Не забыли и о мобильной версии

Оформление школы на геткурс для ResultSchool 30

Подготовили цвета и компоненты для разработчиков и дизайнеров

Цвета

Оформление школы на геткурс для ResultSchool 31

Компоненты

Оформление школы на геткурс для ResultSchool 32

Дизайн админ-панели для курса Город фотографий

О проекте

Студия Солнышко123 упаковывала эксперта. Для курса им нужно было создать админ-панель, в которой можно было бы:

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

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

Задача

Разработать дизайн админ-панели.

Результат

Дизайн

Дизайн админ-панели для курса Город фотографий 33
Главная страница
Дизайн админ-панели для курса Город фотографий 34
Страница «Сообщение»
Дизайн админ-панели для курса Город фотографий 35
Страница «Мини-чат»

UI-кит

Разработал для верстальщика UI-кит, где лежат все состояния компонентов. Так верстальщик будет знать, какие состояния прописать в коде.

Дизайн админ-панели для курса Город фотографий 36

ТЗ для верстальщика

Кроме UI-кита написал ТЗ для верстальщика, где описал подход к верстк, стэк технологий и поведение элементов.

Дизайн админ-панели для курса Город фотографий 37

Разработка лендинга по аренде и покупке приложений для ABC APPS

О проекте

Зачем, цель

Разработать промостаниц для сбора заявок на покупку или аренду приложений. Сайт помогает потенциальным покупателям ознакомиться с условиями и преимуществами компании.

Пожелания клиента

Клиенту не понравилось, что предыдущий дизайнер разрабатывал дизайн с эмоджи. Надо было этого избежать. Сайт должен быть быть легким и стильным.

В верстке должна быть минимальная анимация, плавный скролл при клике в меню, кнопка наверх.

Дизайн-процесс

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

Поиск референсов

Посмотрели референсы и начали строить стиль.

Разработка лендинга по аренде и покупке приложений для ABC APPS 38

Утверждение

Когда я только начинал работать дизайнером, я отдавал готовый дизайн макета за пару дней до дедлайна. Это опасно, потому что времени на правки мало. А шанс того, что клиенту не понравится какой-то блок или весь макет — велик.

Сейчас утверждение идет так:

  • первый блок в течение 1−2 дней,
  • несколько блоков еще в течение 1−2 дней,
  • за 3−4 дня до дедлайна весь макет.

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

Разработка лендинга по аренде и покупке приложений для ABC APPS 39

Результат

Разработка лендинга по аренде и покупке приложений для ABC APPS 40

Процесс верстки

Я предлагал сверстать сайт на Тильде, но клиент попросил сделать статичную верстку на html, css, js, без использования конструкторов. В этом есть свои преимущества, дальнейшее масштабирование до wordpress или другой cms.

Анимация в первом экране

Клиент попросил сделать интересную анимацию на первом экране. параллакс-эффект. Чтобы при скролле. Максим — верстальщик, придумал сделать перемещение изначальных «пятен» градинета. Получилось легко и залипательно 🙂

Плавный скролл

Посмотреть вживую

https://dev-postnov.ru/sandbox/abcapps/

Отзыв клиента на Хабр Фриланс

Разработка лендинга по аренде и покупке приложений для ABC APPS 41

UI/UX дизайн для сервиса FnBook

Ко мне обратился основатель сервиса FnBook Дмитрий Масланов. Он пришёл с задачей создания сервиса для фанфиков.

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

Описание задачи

Задача

Спроектировать веб-сервис с помощью которого человек может читать и писать фанфики.

Зачем, цель

Сделав удобный веб-сервис мы помогаем легко и просто читать и делиться с другими произведениями. Заработок сервиса строится на платных функциях. Если учтём проблемы и исправим их в нашем сервисе — привчлемём больше бользователей и больше заработаем.

Для кого, целевая аудитория

Люди в возрасте от 14-ти до 50-ти лет, активные пользователи мобильных телефонов и Интернета, которым хочется прочитать сочинения по темам любимых произведений или поделиться своим произведением.

Бизнес-требования к продукту

  • пользователи должны иметь возможность читать фанфики; ставить лайки и голосовать за них.
  • пользователи должны иметь возможность писать фанфики и общаться с аудиторией

Исследования

Исследование в этом проекте проходили в 4 этапа: анализ конкурентов, опрос пользователей, интервью, сбор отзывов с сайтов-агрегаторов.

Анализ конкурентов

Прежде чем пытаться разработать какое-то решение — нужно посмотреть, что сделали конкуренты. В процессе анализа постараться объективно оценить хорошие решения и ошибки.

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

По каждому конкуренту составил заметки с хорошими решениями и ошибками.

UI/UX дизайн для сервиса FnBook 42

Опрос

Для опроса я создал анкету из 6 ответов. В создании вопросов для опроса главное уместить важные вопросы в 3−6 вопросов. Часть простых, часть открытых, чтобы пользователи могли бы рассказать свое видение и подсказать нам направление в работе.

Создал форму в Google Forms.

UI/UX дизайн для сервиса FnBook 43

Для привлечения аудитории к опросу использовал рекламу Вконтакте. Подобрал изображения, написал текст и начал откручивать рекламу. Использовал героев популярных вселенных. Хотя на последнем изображении я явно схалтурил — Фродо или Гендальф подошли бы лучше 🙂

UI/UX дизайн для сервиса FnBook 44

Потратил 100 рублей, получил 81 переход и 29 ответов на анкету, развернутые ответы ниже.

Ответы на вопросы

UI/UX дизайн для сервиса FnBook 45
UI/UX дизайн для сервиса FnBook 46

Интервью

Для интервью я нашёл 5 человек. Все они проводят много времени на сайтах с фанфиками. Кто-то написал много фанфиков, кто-то прочитал и оценил. С некоторым общался созвонившись, с другими в чате.

UI/UX дизайн для сервиса FnBook 47
UI/UX дизайн для сервиса FnBook 48
UI/UX дизайн для сервиса FnBook 49

Один из опытных авторов фикбука общался со мной примерно 40 минут и дал много детальной информации: замечания, идеи, одобрение функций. Просто нужно спросить и слушать.

UI/UX дизайн для сервиса FnBook 50
UI/UX дизайн для сервиса FnBook 51
UI/UX дизайн для сервиса FnBook 52

Все вместе

Я собрал все ответы, со всех интревью и опросов и собрал их в заметке. Поделил на пользователей и авторов.

User flow

Составил User Flow на 2 основные задачи: прочитать фанфик и написать фанфик.

UI/UX дизайн для сервиса FnBook 53

Структура сайта

Составил структуру всех страниц и элементов, которые помогут в решении задач из User Flow. На основани анализа конкурентов, опроса и интервью, снабдил структуру элементами, которые нужны пользователям.

UI/UX дизайн для сервиса FnBook 54
UI/UX дизайн для сервиса FnBook 55

Зарисовки дизайна

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

UI/UX дизайн для сервиса FnBook 56

Прототип

UI/UX дизайн для сервиса FnBook 57
UI/UX дизайн для сервиса FnBook 58

Дизайн

UI/UX дизайн для сервиса FnBook 59

Было отрисовано порядочно интерфейсных деталей

UI/UX дизайн для сервиса FnBook 60
UI/UX дизайн для сервиса FnBook 61

Кликабельный прототип

Разрабтал кликабельный прототип в Figme, чтобы можно было протестировать всё на этапе прототипирования.

Desktop-версия

Mobile-версия

Дизайн для соц. сетей

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

Дизайн сторис

Несмотря на то, что инстаграм заблокировали — сторисы есть в ВКонтакте. Поэтому их оформление ещё может быть актуально.

Мои работы по дизайну сторис:

Дизайн для соц.сетей 62
Дизайн для соц.сетей 63

Дизайн постов

Дизайн для соц.сетей 64
Дизайн для соц.сетей 65

Обложки для сообществ в ВК

Дизайн для соц.сетей 66
Обложка сообщества для Псковской дверной фабрики
Дизайн для соц.сетей 67
Обложка для сообщества автошколы

Дизайн баннеров

Ниже дизайн баннера для сайта Krasnodar-room. В статье рассказал подробнее о дизайне, вёрстке и программировании.

Запрос промокода
Запрос данных
Результат
Дизайн для соц.сетей 68

Сертификаты

Дизайн для соц.сетей 69

Объявления а4

Дизайн для соц.сетей 70

Готовое решение Remake для Getcourse

В июне 2021 заканчивая очередной проект по оформлению Getcourse, я понял, что по факту мы делаем одно и тоже. Клиенты тратят от 200 000 рублей и от 2 месяцев работы, чтобы оформить геткурс. Надо было упростить жизнь всем. Клиентам меньше платить и быстрее получать результат, нам меньше кодить и дизайнить.

Тогда мы придумали Remake — готовое решение из 14 22 страниц для геткурса. Оформление занимает 2 дня. Стоимость такого решения 90 000₽.

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

Ниже представлен дизайн готового решения. Он уже заинтегрирован и готов к установке.

Главная страница

Готовое решение Remake для Getcourse 71

Страница курса

Готовое решение Remake для Getcourse 72

Страница урока

Готовое решение Remake для Getcourse 73

Вход, регистрация, обратная связь

Готовое решение Remake для Getcourse 74
Готовое решение Remake для Getcourse 75
Готовое решение Remake для Getcourse 76

Мой профиль

Готовое решение Remake для Getcourse 77

Мои покупки

Готовое решение Remake для Getcourse 78

Оплата

Готовое решение Remake для Getcourse 79

Благодарность за оплату

Готовое решение Remake для Getcourse 80

Ожидание вебинара

Готовое решение Remake для Getcourse 81

Вход на вебинар

Готовое решение Remake для Getcourse 82

Вебинарная комната

Готовое решение Remake для Getcourse 83

Готовое решение уже установили 10 школ, среди них: YesToday, Reskill, Alteco, Marso

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

Главные страницы этих школ

Готовое решение Remake для Getcourse 84
Главная страница геткурс школы Marso
Готовое решение Remake для Getcourse 85
Главная страница Alteco
Главная страница геткурса школы Reskill
Главная страница геткурса школы Reskill
Главная страница геткурс школы YesToday
Главная страница геткурс школы YesToday

Для заказа интеграции пишите в телеграм @daniilpostnov

Оформление геткурс под ключ для школы YesToday

Задизайнено на базе Remake

Описание задачи

К нам обратилась школа YesToday за оформлением личного кабинета Геткурс. Из фирменного стиля был логотип. Кроме логотипа клиент прислал несколько референсов, которые ему нравились визуально.

Задача

Сделать новый дизайн для школы на Getcourse.

Зачем, цель

Сделав новый дизайн мы решаем юзабилити-проблемы текущего дизайна Getcourse. Кроме этого мы создаем брендированный дизайн. Среди 10 школ с стандартным дизайном, пользователь сразу узнает YesToday.

Бизнес-требования к продукту

  • пользователи должны иметь тот же функционал, но в новом дизайне
  • найти моменты, который можно улучшить в стандартном дизайне Getcourse.

Предыдущий дизайн

Оформление геткурс под ключ для школы YesToday 86
Оформление геткурс под ключ для школы YesToday 87
Оформление геткурс под ключ для школы YesToday 88
Оформление геткурс под ключ для школы YesToday 89
Оформление геткурс под ключ для школы YesToday 90
Оформление геткурс под ключ для школы YesToday 91

Новый дизайн

Главная страница

На главной странице добавили блок с анкетой участника. Это анкета, которую должны заполнить все ученики перед началом обучения. Часто ученики не заполняют её, поэтому мы решили вынести это на главную страницу большим блоком и написать тест в мире читателя. В чем его интерес заполнять эту анкету.

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

Оформление геткурс под ключ для школы YesToday 92

Страница курса

Разработали страницу модулей или подтренингов. У каждого модуля есть визуальное отображение его статуса.

Оформление геткурс под ключ для школы YesToday 93

Страница модуля

Оформление геткурс под ключ для школы YesToday 94

Подкасты

Оформление геткурс под ключ для школы YesToday 95

Прямые эфиры

Оформление геткурс под ключ для школы YesToday 96

Библиотека

Библиотека это набор полезных материалов для учеников в разных форматах: ссылки, документы, книги.

Оформление геткурс под ключ для школы YesToday 97

Страница урока

На странице урока задизайнили и запрограммировали все элементы, которые могут пригодится для стилизации конкретного урока. Администраторы будут копировать элементы с страницы-шаблона и использовать их на странице уроков.

Оформление геткурс под ключ для школы YesToday 98

Вход, регистрация и обратная связь

Оформление геткурс под ключ для школы YesToday 99
Оформление геткурс под ключ для школы YesToday 100
Оформление геткурс под ключ для школы YesToday 101

Мой профиль

Полностью переработали страницу «Мой профиль». Разделили данные на на обязательные и системные. В правой колонке находятся те поля, которые отвечают за доступ. Поля слева необязательны для заполнения.

Оформление геткурс под ключ для школы YesToday 102

Настройка уведомлений

Оформление геткурс под ключ для школы YesToday 103

Оплата

Оформление геткурс под ключ для школы YesToday 104

Благодарность за оплату

Оформление геткурс под ключ для школы YesToday 105

Покупки

Оформление геткурс под ключ для школы YesToday 106

Ожидание вебинара

Оформление геткурс под ключ для школы YesToday 107

Вход в вебинар

Оформление геткурс под ключ для школы YesToday 108

Вебинарная комната

В вебинарной комнате оставили то же размещение элементов, но поменяли их дизайн.

Оформление геткурс под ключ для школы YesToday 109

Дизайн лендинга для веб-разработчика

Задача

Обратился разработчик с задачей разработки лендинга портфолио. У него был старый сайт, но не подходил по дизайну и функциональности.

В планах сделать полноценный сайт с кейсами и блогом. Пообщавшись, мы пришли к выводу, что нам нужно сначала сделать лендинг, чтобы клиенты уже могли его найти.

После этого уже можно вторым этапом делать кейса, а третьим этапом блог.

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

Также у клиента был ограниченный бюджет — 20 000₽. Я предложил только ПК версию и с ограничением в 6 блоков.

Решение

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

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

Дизайн лендинга для веб-разработчика 110

Дизайн Getcourse для Marso

К нам обратилась школа интерьера Marso для оформления школы на Getcourse.

У них уже был фирменный стиль, нам нужно было разработать дизайн страниц для Getcourse.

Дизайн главной страницы

Дизайн Getcourse для Marso 111

Вход, регистрация

Дизайн Getcourse для Marso 112
Дизайн Getcourse для Marso 113

Страница курса

Дизайн Getcourse для Marso 114

Обратная связь, благодарность за оплату

Дизайн Getcourse для Marso 115
Дизайн Getcourse для Marso 116

Страница модуля

Дизайн Getcourse для Marso 117

Оплата, рейтинг учеников

Дизайн Getcourse для Marso 118
Дизайн Getcourse для Marso 119

Страниц оплаты

Дизайн Getcourse для Marso 118

Страница урока

Дизайн Getcourse для Marso 121

ReSkill — дизайн и интеграция Getcourse

Задизайнено на базе Remake

К нам обратилась компания Reskill с задачей оформления Getscourse. 10 декабря они планировали запустить новый поток с дизайном.

Из фирменного стиля было только 4 цвета. Другая группа дизайнеров должна была предоставить фирменный стиль по ходу работы над оформлением личного кабинета. Кроме самого редизайна, надо было создать страницы: войс-чаты, прямые эфиры.

Задача

  • Разработать дизайн 14 стандартных страниц Getcourse.
  • Разработать дизайн страниц «Войс-чат» и «Прямые эфиры»
  • Редизайн страницы «Библиотека»
  • Интегрировать разработанный дизайн в Getcourse

Главная страница

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

дизайн геткурса

Страница курса

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

reskill design

Настройка уведомлений

дизайн геткурса для страницы уведомлений

Страница покупок

дизайн геткурса для страницы покупок

Страница урока

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

дизайн геткурса для страницы урока

Страница модуля

дизайн геткурса для страницы уроков

Библиотека

дизайн геткурса для страницы библиотека

Ожидание вебинара

дизайн геткурса для страницы ожидания вебинара

Прямые эфиры

дизайн геткурса для страницы прямых эфиров

Запись прямого эфира

дизайн геткурса для страницы прямого эфира

Войс-чаты

На этой странице кураторы размещают записи аудио-созвонов с учениками. Ученики смогут еще раз прослушать аудио после созвона.

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

Благодарность за оплату

дизайн геткурса для страницы бладарности за оплату

Обратная связь

дизайн геткурса для страницы обратной связи

Страница оплаты

дизайн геткурса для страницы оплаты заказа

Мой профиль

дизайн геткурса для страницы мой профиль

Вход

дизайн геткурса для страницы входа

Регистрация

дизайн геткурса для страницы бладарности регистрации

Мобильная версия

ReSkill — дизайн и интеграция Getcourse 122
ReSkill — дизайн и интеграция Getcourse 123

Было отрисовано порядочно интерфейсных деталей

ReSkill — дизайн и интеграция Getcourse 124

Дизайн Getcourse для Alteco

Дизайн главной

Дизайн Getcourse для Alteco 125

Дизайн внутренних

Дизайн Getcourse для Alteco 126

Актуальные события выполнены в стиле календаря. Так проще ориентироваться в событиях. Важным выделены число и дата. Название является ссылкой. При клике попадаем на страницу события.

Страница модуля

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

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

Дизайн Getcourse для Alteco 127

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

Дизайн Getcourse для Alteco 128
Дизайн Getcourse для Alteco 129
Дизайн Getcourse для Alteco 130

Страница урока

Для страницы урока мы создали множество элементов, из которых можно собирать разнообразные страницы для каждого урока.

Дизайн Getcourse для Alteco 131

Дизайн сайта для курса TanyaChange

Задача

Ко мне обратился Роман с задачей разработки лендинга и сбора фирменного стиля. Он сам создал дизайн текущего лендинга, но для нового лендинга захотел привлечь профессионала.

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

Нужно было сделать лёгкий и современный дизайн для женщин 35−50 лет. Не перегруженный, но эстетичный

Старый дизайн

Дизайн сайта для курса TanyaChange 132

Решение

Разработали прототип и дизайн лендинга на 15 секций. Определились с цветами и элементами для фирменного стиля.

Дизайн

Пк-версия

Дизайн сайта для курса TanyaChange 133

Мобильная версия

Дизайн сайта для курса TanyaChange 134

Модальные окна

Дизайн сайта для курса TanyaChange 135

Дизайн лендинга для курса Notion Pro

Дизайн лендинга я делал для своего курса Notion Pro. Делать дизайн своим продуктам очень сложно — никто не подгоняет и не даёт правок. Можно растягивать проект до бесконечности.

Я решил флексить. Поставить себе срок 3 дня и сделать сайт. Этот дизайн лендинга удалось сделать за несколько часов.

Дизайн лендинга для курса Notion Pro 136

Дизайн сайта для курса по вёрстке

Задача

Ко мне обратилась компания MethEd. Им нужно было создать дизайн лендинга для курса по вёрстке. Они запускали первый поток через несколько недель.

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

Решение

В сжатые сроки разработал дизайн лендинга в 2 разрешениях: пк и мобильный. Разработал UI-кит, дизайн модальных окон. Клиент остался доволен и планирует продложать работу над расширением объёма и функциональности сайта.

Итоговый дизайн

Пк-версия

Дизайн сайта для курса по вёрстке 137

Мобильная версия

Дизайн сайта для курса по вёрстке 138

Модальное окно

[изображение удалёно из-за наличия иконок компаний запрещенной в России организации Meta]

UI-кит

Дизайн сайта для курса по вёрстке 139

Отзыв

Аудио отзыв Максима Лескина, спикера курса.

Ссылка на сайт

https://methed.ru/

Дизайн лендинга для онлайн-курса «Свет по Баеву»

Задача

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

Решение

Разработал дизайн лендинга в 3 разрешениях: компьютер, планшет, мобильный. Клиент остался доволен креативностью и стилем лендинга.

Дизайн лендинга для онлайн-курса «Свет по Баеву» 140
Дизайн лендинга для онлайн-курса «Свет по Баеву» 141

Ссылка на сайт

https://baev.willteach.ru/

Доработка дизайна геткурс школы «Город»

Ярослав Мирошник в составе компании Солнышко123 заказал у меня доработку дизайна геткурса школы «Город».

У школы уже был фирменный стиль и готова часть страниц кабинета. Мне нужно было разработать дизайн 11 страниц.

Страница курса

Доработка дизайна геткурс школы «Город» 142

Страница урока

Доработка дизайна геткурс школы «Город» 143
Доработка дизайна геткурс школы «Город» 144

Подкасты

Доработка дизайна геткурс школы «Город» 145

Страница подкаста

Доработка дизайна геткурс школы «Город» 146

Оплата

Доработка дизайна геткурс школы «Город» 147

Ожидание вебинара

Доработка дизайна геткурс школы «Город» 148

Обратная связь

Доработка дизайна геткурс школы «Город» 149

Запись вебинара

Доработка дизайна геткурс школы «Город» 150

Страница отсутствия доступа

Доработка дизайна геткурс школы «Город» 151

Вход на вебинар

Доработка дизайна геткурс школы «Город» 152

Вебинарная комната

Доработка дизайна геткурс школы «Город» 153

Мобильная версия

Доработка дизайна геткурс школы «Город» 154

Оформление Геткурс для школы Sensei

Ярослав Мирошник от лица компании Солнышко123 обратился ко мне по поводу дизайна школы Sensei. Планировался запуск и нужно было оформить геткурс в фирменном стиле.

Главная страница

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

Оформление Геткурс для школы Sensei 155

Страница курса

Оформление Геткурс для школы Sensei 156

Страница урока

Оформление Геткурс для школы Sensei 157
Оформление Геткурс для школы Sensei 158

Настройка уведомлений

Оформление Геткурс для школы Sensei 159

Мой профиль

Оформление Геткурс для школы Sensei 160

Страница оплаты

Оформление Геткурс для школы Sensei 161

Вход, регистрация и обратная связь

Оформление Геткурс для школы Sensei 162
Оформление Геткурс для школы Sensei 163
Оформление Геткурс для школы Sensei 164

Мои покупки

Оформление Геткурс для школы Sensei 165

Благодарность за оплату

Оформление Геткурс для школы Sensei 166

Чат

Мобильная версия

Оформление Геткурс для школы Sensei 169

Компоненты и описание отношений элементов в дизайне

Оформление Геткурс для школы Sensei 170