Дизайн

Сайт-блог для компании GetTech Петра Петипака

Задача

Разработать сайт-блог из 3 страниц: главная, категория, страница статьи. Петр будет собирать авторов, а они будут писать статьи на тему Геткурса.

Сайт должен разделяться на статьи для предпринимателей и технических специалистов.

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

Прототип

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

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

Сайт-блог для компании GetTech Петра Петипака 1

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

Сайт-блог для компании GetTech Петра Петипака 2

Сайт-блог для компании GetTech Петра Петипака 3

Сайт-блог для компании GetTech Петра Петипака 4

Баннеры

Разработал два вида баннеров.

Одна группа баннеров для рекламы услуг, сервисов от компании GetTech.

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

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

Сайт-блог для компании GetTech Петра Петипака 5

Сайт-блог для компании GetTech Петра Петипака 6

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

Сайт-блог для компании GetTech Петра Петипака 7

UI-кит

Разработал UI-кит для дизайнеров и верстальщиков. Чтобы дизайнеры и верстальщики имели все состояния элементов и согласовывали внешний вид элементов.

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

Сайт-блог для компании GetTech Петра Петипака 8

Поведение

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

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

Сайт-блог для компании GetTech Петра Петипака 9

Разработка сайта на Тильде для продажи гайда

Ко мне обратился Александр Фирсов, основатель школы BlaBlaInvest. Он продает свой гайд, где рассказывает об инвестициях. Гайд называться «Метавселенским». Целевая аудитория 35+.

Проблема

Текущий сайт не отражает безумности метавселенных, не дает нужного настроя. Хочется чтобы было бодро.

Задача

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

После дизайна заверстать на Тильде с анимацией.

Старый сайт

Разработка сайта на Тильде для продажи гайда 10

Поиск концептов

Видео из сторис @danya_postnov

Итоговый концепты

Концепты получились в разных стялях.

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

Разработка сайта на Тильде для продажи гайда 11

Реакция клиента

Разработка сайта на Тильде для продажи гайда 12

ПК-версия

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

Разработка сайта на Тильде для продажи гайда 13

Я не одобрил такой варинант. Слева миньон болтался без дела совсем. Он не выглядывал как в мобилке. Справа объезьяна с фиолетовым облаком оттягивала все внимание. Верстка ушла на доработку.

Разработка сайта на Тильде для продажи гайда 14

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

Разработка сайта на Тильде для продажи гайда 15

На выходе получился вот такой дизайн и я понял, что это то, что нужно.

Верстка

Версталось все на Тильде с сложной и базовой анимацией.

Итоговый сайт

ПК

Мобилка

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

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

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

Задача

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

Зачем, цель

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

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

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

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

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

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

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

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

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

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

Процесс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Задача

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

Зачем, цель

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

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

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

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

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

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

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

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

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

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

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

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

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

Профиль

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

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

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

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

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

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

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

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

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

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

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

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

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

Покупки

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

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

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

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

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

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

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

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

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

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

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

Цвета

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

Компоненты

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

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

О проекте

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

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

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

Задача

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

Результат

Дизайн

Дизайн админ-панели для курса Город фотографий 50 — Страница «Мини-чат»

UI-кит

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

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

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

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

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

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

О проекте

Зачем, цель

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

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

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

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

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

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

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

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

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

Утверждение

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

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

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

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

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

Результат

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Задача

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

Зачем, цель

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

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

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

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

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

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

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

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

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

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

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

Опрос

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

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

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

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

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

Интервью

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

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

Все вместе

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

User flow

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

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

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

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

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

Прототип

Дизайн

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

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

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

Desktop-версия

Mobile-версия

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

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

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

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

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

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

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

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

Дизайн для соц.сетей 80 — Обложка для сообщества автошколы

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

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

Сертификаты

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

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

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

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

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

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

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

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

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

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

Мой профиль

Мои покупки

Оплата

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

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

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

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

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

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

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

Готовое решение Remake для Getcourse 97 — Главная страница геткурс школы Marso

Готовое решение Remake для Getcourse 98 — Главная страница Alteco

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

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

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

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

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

Задача

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

Зачем, цель

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

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

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

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

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

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

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

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

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

Новый дизайн

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

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

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

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

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

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

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

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

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

Подкасты

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

Прямые эфиры

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

Библиотека

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

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

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

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

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

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

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

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

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

Мой профиль

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

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

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

Оплата

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

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

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

Покупки

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

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

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

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

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

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

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

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

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

Задача

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

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

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

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

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

Решение

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

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

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

Дизайн Getcourse для Marso

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Задача

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

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

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

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

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

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

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

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

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

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

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

Библиотека

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

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

Прямые эфиры

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

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

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

Войс-чаты

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

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

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

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

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

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

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

Мой профиль

Вход

Регистрация

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

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

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

дизайн мобильной версии геткурса для ReSkill

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

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

Pages: 1 2

Дизайн Getcourse для Alteco

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

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

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

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

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

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

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

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

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

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

Задача

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

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

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

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

Решение

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

Дизайн

Пк-версия

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

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

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

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

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

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

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

Задача

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

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

Решение

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