Редизайн сайта «Магия Геткурса»

Редизайн сайта «Магия Геткурса» 23

Задача

Петр Петипак обратился с задачей обновить дизайна сайта. Предыдущий вариант был собран на коленке и уже не подходил под солидность бренда «Магия Геткурса».

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

Редизайн сайта «Магия Геткурса» 24

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

Редизайн сайта «Магия Геткурса» 25

Компоненты и UI-кит для разработчика

Редизайн сайта «Магия Геткурса» 26
Редизайн сайта «Магия Геткурса» 27

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

https://gcwithme.ru/getmagic

Редизайн сайта для Animation School

В мае 2022 года ко мне обратился операционный директор Animation School. Они хотели изменить текущий сайт, так как было ощущение, что сайт уже устарел и не такой удобный, как у конкурентов.

Мы долго обсуждали задачу и пришли к нескольким этапам работы:

  1. Исследование, чтобы понимать, что нужно менять и как улучшить пользовательский опыт
  2. Дизайн сайта
  3. Верстка сайта
  4. Программирование сайта в CMS

Текущий сайт у клиента на Wordpress. Мы планировали делать редизайн сайта на Тильду, потому что это дешевле, быстрее и проще в работе. Но у клиента сильная привязка к SEO, а переезд на другую платформу требовал привелечения сторонних специалистов и примерно 100 тысяч бюджета на перенос seo и докупку ссылок для поднятия в выдаче. Поэтому решили остаться пока на Wordpress.

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

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

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

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

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

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

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

Редизайн сайта для Animation School 28
Страница с удачными и неудачными решениями по каждому конкуренту

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

Интервью с учениками и командой

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

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

Вот такой список вопросов был для учеников

Редизайн сайта для Animation School 29

Общение с учениками

Редизайн сайта для Animation School 30
Редизайн сайта для Animation School 31
Редизайн сайта для Animation School 32
Редизайн сайта для Animation School 33

После интервью создал отдельную страницу и собрал все ответы учеников

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

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

Редизайн сайта для Animation School 34

Я не ошибся, я нашел эти вопросы и обязательно уделю им внимание на этапе дизайна сайта.

Ответы команды

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

Итог интервью

CJM

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

У нас получилось 6 шагов:

  1. Мотивация
  2. Поиск в интернете
    • Поисковик
    • Соц.сети
    • Сравнение с другими школами
  3. Проверка школы
  4. Переход на сайт
  5. Оценка курса
  6. Оплата

Как это выглядит

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

User Flow

Юзерфлоу позволяет нам понять путь пользователя. Я, директор или владелец могут понимать, как пользователь передвигается по сайту, что смотрит. Но пока эти данные не выписаны, они так и остаются догадками в головах людей.

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

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

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

Userflow по записи на курс

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

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

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

UserFlow в программе Xmind

Userflow по контенту

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

Анализ проблем и генерация идей

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

Редизайн сайта для Animation School 35

Выводы

После всех этапов ux-исследования собрал все сведения в одном месте и написал итоговый результат исследования.

Редизайн сайта для Animation School 36

Прототип и текст

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

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

Редизайн сайта для Animation School 37

Дизайн

По прототипу и имеющемуся фирменному стилю был разработан дизайн 14 страниц сайта

Редизайн сайта для Animation School 38
Редизайн сайта для Animation School 39
Редизайн сайта для Animation School 40

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

Для каждой из страниц был разработан мобильный вид страницы

Редизайн сайта для Animation School 41

UI-кит, дополнительные элементы

Чтобы разработчикам проще было работать и время не тратилось на объяснение что и как работает, мы разработали UI-кит, в котором отображены все элементы и их поведение.

Редизайн сайта для Animation School 42

Дизайн и верстка сайта на Тильде для клуба поддержки Animation School

Школа Animation School запускает поддержку начинающих специалистов по анимации. Не знаешь как решить проблему → можно просто спросить у специалистов в индустрии.

Дизайн и верстка сайта на Тильде для клуба поддержки Animation School 43

Задача

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

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

Решение

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

Итоговый результат

Дизайн и верстка сайта на Тильде для клуба поддержки Animation School 44

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

http://animationclub.ru/

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

Remake — продукт для готового оформления GetCourse. Команда увидела, что школы заказывают одно и тоже и решила сделать шаблон, который можно поставить за 3 дня. Помогли 24 школам преобразить свои личные кабинеты на GetCourse.

Разработка сайта на Тильде для продукта Remake 45

Задача

Обновить сайт для продукта Remake — готового оформления для школ на Геткурсе. Старый сайт не показывал продукт достаточно хорошо и у пользователей оставалась куча вопросов.

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

Что сделали

  • Написали структуру
  • Написали тексты
  • Продумали погружение и понимание продукта
  • Задизайнили обложки
  • Создали дизайн сайта
  • Заверстали на Тильде
  • Прикрутили анимацию
  • Настроили цели

Структура

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

Блоки сайта

  1. Первый блок — чтобы было понятно, куда попали и что предлагают.
  2. Как будет выглядеть школа — сразу показываем дизайн, который будет после установки.
  3. Можно ли изменить — за показом шаблонного дизайна сразу закрываем вопрос про изменения, надо показать, что менять шаблон можно точечными правками.
  4. Наши клиенты — показываем с кем работали, чтобы покупатель понимал уровень клиентов готового оформления и это вызвало доверие.
  5. Почему работать нужно с нами — надо показать не просто «мы крутые», а объяснить реальные отличия от конкурентов, чтобы пользователь сам себе сказал: «емае, да они крутые!».
  6. Детали продукта — важно показать, что продукт не просто меняет цвета, а добавляет удобство. В Геткурсе много проблем и одним визуалом его не изменить. Поэтому в этом блоке надо показать как продукт решает пролему удобства.
  7. Кейсы с готовым оформлением — показываем как выглядят кейсы, которые купили готовое оформление и сильно его не меняли.
  8. Установка шаблона — показываем видео одного из основателей. Где он показывает установку Ремейка. В Геткурс-тусовке важны сроки. Часто владельцы приходят за дизайном, когда через неделю запуск. Этим блоком показываем, что мы можем сделать это быстро.
  9. Тарифы — после всего что показали, предлагаем сделку. Показываем тарифы.
  10. Триггерный блок уникального дизайна — вдруг человеку нужен уникальный дизайн? Говорим об этом сразу под тарифами. Чтобы когда мысль «Блин, а мне за столько не надо, подешевле да поменьше бы» — блок тут как тут. Нет бюджета или не нужны все страницы — оставьте заявку, обсудим.
  11. Об уникальном дизайне — показываем кейсы уникального дизайна и говорим, что у нас не только шаблоны, а еще уникальность.
  12. Отзывы клиентов — отзывы клиентов делаем не 100 500 штук, важно не показать количество, а показать как мы работаем и результаты клиентов. Качество важнее количества.
  13. Демо продукта — некоторые пользователи могут не доверять, пока не увидят продукт. Предлагаем оставить заявку в обмен на демо-доступ. Пользователь сможет сам зайти, потрогать продукт и решить.
  14. Команда продукта — важно показать, что команда не вчера появилась, а ребята уже с опытом. Показываем имя, регалии, личные сайты. Чтобы можно было зайти и посмотреть, все ли хорошо.
  15. Процесс установки школы — чтобы ввязываться в это дело, нужно понимать какие шаги идут друг за другом. Именно для этого этот блок и нужен. Рассказываем по шагам что будет, кто выдает доступы, когда платят, кто и где тестирует.
  16. Ответы на вопросы — Геткурс и его оформление не простая ниша, могут быть вопросы. Сделали блок с ответами, чтобы не раздувать лендинг.
  17. Триггер обращения к основателю — в конце делаем триггер «Не знаете, что выбрать?». Даем контакт основателя и предлагаем проконсультироваться.

Тексты

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

Разработка сайта на Тильде для продукта Remake 46
Блок из старой версии сайта

Например в блоке преимуществ для владельцев «Оформление геткурса как отстройка конкурентов» понятна каждому владельцу. Это довольно понятная вещь и каждый из исполнителей может написать это на своем сайте.

Разработка сайта на Тильде для продукта Remake 47

Мы решили основываться на том, какие преимущества есть конкретно у продукта, не в целом почему оформление это хорошо, а почему нужно покупать именно этот продукт.

Погружение и понимание продукта

Продукт готового оформления не самый простой. Его сложно описать в двух словах и быстро закрыть все вопросы. Поэтому нужно было погрузить посетителя в продукт. Для этого мы выбрали такие фишки.

Демо изменений

Цель: показать, что шаблон можно менять. Чуть поменял — добавил уникальности.

Что сделали: заскринили главные экраны школ-клиентов, вставили в фигму и записали гифку со сменой страниц.

Разработка сайта на Тильде для продукта Remake 48

Демо установки

Цель: показать, что сроки установки — не маркетиновая уловка, а реальность.

Что сделали: показали урок однго из основателей продукта. С объяснениями как ставить Ремейк видео занимает 16 минут. 3 дня на устанвоку становятся правдивее. В тексте использовали простоватую подачу. Словно берем сами себя «на слабо».

Разработка сайта на Тильде для продукта Remake 49

Краткость отзывов

Цель: сделать так, чтобы отзывы читали. Не просто «сделали в срок, спасибо!» и не поэмы из 10-абзацев.

Что сделали: вычитали отзывы, взяли самое важное, вытащили факты и оформили крупно.

Разработка сайта на Тильде для продукта Remake 50

Дизайн

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

Разработка сайта на Тильде для продукта Remake 51

Дизайн сайта выделяет все самое важное и оставляет за скобками пространственные рассуждения и хваствоство. Сайт рассказыает о продукте просто и по делу. Если отзыв — то не 5 абзацев текста, а факты.

Разработка сайта на Тильде для продукта Remake 52

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

Разработка сайта на Тильде для продукта Remake 49

У потенциальных клиентов есть возможность посмотреть на процесс установки. Ничего не скрывается в недрах команды — установка показана стразу на странице.

Модульность блоков

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

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

Разработка сайта на Тильде для продукта Remake 54

Результат

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

https://remake.space

Сайт попал в подборку Made On Tilda

Сайт попал в галерею лучших сайтов, созданных на Тильде. Нахождение в галерее лучших сайтов на Тильде деет проекту дополнительный трафик. Только за первый день сайт посетили 283 человека, пришедшие с сайта madeontilda.

Разработка сайта на Тильде для продукта Remake 55

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

Разработка сайта на Тильде для продукта Remake 56
Разработка сайта на Тильде для продукта Remake 57

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

Задача

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

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

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

Прототип

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

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

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

Дизайн

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

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

Баннеры

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

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

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

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

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

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

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

UI-кит

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

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

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

Поведение

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

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

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

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

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

Проблема

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

Задача

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

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

Старый сайт

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

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

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

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

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

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

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

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

ПК-версия

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

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

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

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

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

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

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

Верстка

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

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

ПК

Мобилка

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

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

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

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

Задача

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

Зачем, цель

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

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

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

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

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

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

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

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

Процесс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Задача

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

Зачем, цель

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

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

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

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

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

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

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

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

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

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

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

Профиль

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

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

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

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

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

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

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

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

Покупки

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

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

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

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

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

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

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

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

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

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

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

Цвета

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

Компоненты

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

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

О проекте

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

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

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

Задача

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

Результат

Дизайн

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

UI-кит

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

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

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

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

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

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

О проекте

Зачем, цель

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

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

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

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

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

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

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

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

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

Утверждение

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

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

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

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

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

Результат

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

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

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

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

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

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

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

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

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

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

Разработка дизайна сайта FnBook, UX/UI

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

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

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

Задача

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

Зачем, цель

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

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

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

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

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

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

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

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

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

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

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

Разработка дизайна сайта FnBook, UX/UI 115

Опрос

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

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

Разработка дизайна сайта FnBook, UX/UI 116

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

Разработка дизайна сайта FnBook, UX/UI 117

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

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

Разработка дизайна сайта FnBook, UX/UI 118
картинка для сервиса FnBook

Интервью

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

Разработка дизайна сайта FnBook, UX/UI 119
Разработка дизайна сайта FnBook, UX/UI 120
Разработка дизайна сайта FnBook, UX/UI 121

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

Разработка дизайна сайта FnBook, UX/UI 122
Разработка дизайна сайта FnBook, UX/UI 123
Разработка дизайна сайта FnBook, UX/UI 124

Все вместе

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

User flow

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

Разработка дизайна сайта FnBook, UX/UI 125

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

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

Разработка дизайна сайта FnBook, UX/UI 126
картинка для сервиса FnBook

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

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

Разработка дизайна сайта FnBook, UX/UI 127

Прототип

Разработка дизайна сайта FnBook, UX/UI 128
Разработка дизайна сайта FnBook, UX/UI 129

Дизайн

Разработка дизайна сайта FnBook, UX/UI 130

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

Разработка дизайна сайта FnBook, UX/UI 131
Разработка дизайна сайта FnBook, UX/UI 132

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

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

Desktop-версия

Mobile-версия

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

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

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

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

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

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

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

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

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

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

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

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

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

Сертификаты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мой профиль

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

Мои покупки

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

Оплата

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Задача

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

Зачем, цель

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

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

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

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

Оформление геткурс под ключ для школы YesToday 159
Оформление геткурс под ключ для школы YesToday 160
Оформление геткурс под ключ для школы YesToday 161
Оформление геткурс под ключ для школы YesToday 162
Оформление геткурс под ключ для школы YesToday 163
Оформление геткурс под ключ для школы YesToday 164

Новый дизайн

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

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

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

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

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

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

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

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

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

Подкасты

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

Прямые эфиры

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

Библиотека

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

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

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

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

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

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

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

Мой профиль

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

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

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

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

Оплата

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

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

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

Покупки

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

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

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

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

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

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

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

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

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

Задача

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

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

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

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

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

Решение

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

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

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

Дизайн Getcourse для Marso

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

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

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

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

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

Дизайн Getcourse для Marso 184
Дизайн Getcourse для Marso 185

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

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

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

Дизайн Getcourse для Marso 187
Дизайн Getcourse для Marso 188

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

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

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

Дизайн Getcourse для Marso 190
Дизайн Getcourse для Marso 191

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

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

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

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