Дизайн

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-версия

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

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

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

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

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

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

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

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

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

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

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

Сертификаты

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

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

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

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

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

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

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

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

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

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

Мой профиль

Мои покупки

Оплата

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

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

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

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

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

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

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

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

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

Для заказа интеграции пишите в телеграм @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 62

Оплата

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

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

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

Покупки

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

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

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

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

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

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

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

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

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

Задача

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

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

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

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

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

Решение

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

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

Дизайн Getcourse для Marso

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Задача

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

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

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

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

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

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

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

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

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

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

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

Библиотека

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

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

Прямые эфиры

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

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

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

Войс-чаты

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

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

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

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

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

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

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

Мой профиль

Вход

Регистрация

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

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

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

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

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

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

Pages: 1 2

Дизайн Getcourse для Alteco

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

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

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

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

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

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

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

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

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

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

Задача

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

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

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

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

Решение

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

Дизайн

Пк-версия

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

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

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

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

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

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

Задача

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

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

Решение

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

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

Пк-версия

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

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

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

UI-кит

Отзыв

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

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

https://methed.ru/

Pages: 1 2

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

Задача

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

Решение

Разработал дизайн лендинга в 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 126 — Список чатов

Оформление Геткурс для школы Sensei 127 — Список чатов

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

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

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

Задача

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

Решение

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