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

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

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

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

Задача

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

Зачем, цель

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

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

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

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

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

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

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

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

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

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

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

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

Опрос

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

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

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

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

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

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

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

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

Интервью

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

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

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

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

Все вместе

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

User flow

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

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

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

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

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

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

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

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

Прототип

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

Дизайн

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

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

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

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

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

Desktop-версия

Mobile-версия

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

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

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

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

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

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

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

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

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

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

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

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

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

Сертификаты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мой профиль

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

Мои покупки

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

Оплата

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Задача

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

Зачем, цель

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

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

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

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

Оформление геткурс под ключ для школы YesToday 45
Оформление геткурс под ключ для школы YesToday 46
Оформление геткурс под ключ для школы YesToday 47
Оформление геткурс под ключ для школы YesToday 48
Оформление геткурс под ключ для школы YesToday 49
Оформление геткурс под ключ для школы YesToday 50

Новый дизайн

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

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

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

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

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

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

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

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

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

Подкасты

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

Прямые эфиры

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

Библиотека

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

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

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

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

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

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

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

Мой профиль

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

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

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

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

Оплата

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

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

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

Покупки

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

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

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

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

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

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

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

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

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

Задача

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

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

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

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

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

Решение

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

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

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

Дизайн Getcourse для Marso

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

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

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

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

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

Дизайн Getcourse для Marso 71
Дизайн Getcourse для Marso 72

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

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

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

Дизайн Getcourse для Marso 74
Дизайн Getcourse для Marso 75

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

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

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

Дизайн Getcourse для Marso 77
Дизайн Getcourse для Marso 78

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

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

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

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

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

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

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

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

Задача

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

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

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

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

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

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

reskill design

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

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

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

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

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

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

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

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

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

Библиотека

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

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

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

Прямые эфиры

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

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

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

Войс-чаты

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

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

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

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

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

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

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

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

Мой профиль

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

Вход

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

Регистрация

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

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

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

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

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

Дизайн Getcourse для Alteco

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

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

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

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

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

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

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

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

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

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

Дизайн Getcourse для Alteco 87
Дизайн Getcourse для Alteco 88
Дизайн Getcourse для Alteco 89

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

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

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

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

Задача

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

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

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

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

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

Решение

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

Дизайн

Пк-версия

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

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

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

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

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

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

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

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

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

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

Задача

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

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

Решение

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

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

Пк-версия

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

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

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

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

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

UI-кит

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

Отзыв

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

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

https://methed.ru/

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

Задача

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

Решение

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

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

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

https://baev.willteach.ru/

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

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

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

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

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

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

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

Подкасты

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

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

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

Оплата

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мой профиль

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

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

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

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

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

Мои покупки

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

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

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

Чат

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

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

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

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

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

Дизайн лендинга регистрации на онлайн-курс 130

Задача

В сжатые сроки разработать дизайн лендинга для вебинара «Не как у всех: сложный свет для фотографов» по готовой структуре и текстам. Нужен был современный и креативный дизайн.

Решение

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

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

Дизайн лендинга регистрации на онлайн-курс 131

Дизайн планшетной и мобильной версии

Дизайн лендинга регистрации на онлайн-курс 132