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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Редизайн сайта для Animation School 3
Редизайн сайта для Animation School 4
Редизайн сайта для Animation School 5
Редизайн сайта для Animation School 6

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

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

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

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

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

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

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

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

CJM

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

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

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

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

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

User Flow

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

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

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

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

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

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

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

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

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

Userflow по контенту

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

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

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

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

Выводы

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

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

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

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

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

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

Дизайн

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

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

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

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

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

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

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

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

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

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

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

Задача

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

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

Решение

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

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

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

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

http://animationclub.ru/

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

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

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

Задача

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

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

Что сделали

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

Структура

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

Блоки сайта

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

Тексты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дизайн

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

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

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

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

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

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

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

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

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

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

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

Результат

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

https://remake.space

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

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

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

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

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

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

Задача

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

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

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

Прототип

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

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

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

Дизайн

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

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

Баннеры

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

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

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

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

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

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

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

UI-кит

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

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

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

Поведение

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

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

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

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

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

Проблема

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

Задача

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

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

Старый сайт

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

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

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

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

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

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

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

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

ПК-версия

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

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

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

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

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

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

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

Верстка

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

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

ПК

Мобилка

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

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

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

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

Задача

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

Зачем, цель

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

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

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

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

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

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

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

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

Процесс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Задача

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

Зачем, цель

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

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

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

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

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

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

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

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

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

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

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

Профиль

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

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

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

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

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

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

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

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

Покупки

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

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

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

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

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

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

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

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

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

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

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

Цвета

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

Компоненты

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

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

О проекте

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

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

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

Задача

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

Результат

Дизайн

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

UI-кит

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

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

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

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

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

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

О проекте

Зачем, цель

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

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

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

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

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

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

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

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

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

Утверждение

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

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

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

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

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

Результат

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Задача

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

Зачем, цель

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

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

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

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

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

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

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

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

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

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

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

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

Опрос

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

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

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

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

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

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

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

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

Интервью

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

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

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

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

Все вместе

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

User flow

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

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

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

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

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

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

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

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

Прототип

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

Дизайн

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

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

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

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

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

Desktop-версия

Mobile-версия

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

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

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

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

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

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

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

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

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

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

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

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

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

Сертификаты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мой профиль

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

Мои покупки

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

Оплата

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Задача

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

Зачем, цель

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

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

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

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

Оформление геткурс под ключ для школы YesToday 132
Оформление геткурс под ключ для школы YesToday 133
Оформление геткурс под ключ для школы YesToday 134
Оформление геткурс под ключ для школы YesToday 135
Оформление геткурс под ключ для школы YesToday 136
Оформление геткурс под ключ для школы YesToday 137

Новый дизайн

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

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

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

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

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

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

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

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

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

Подкасты

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

Прямые эфиры

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

Библиотека

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

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

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

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

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

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

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

Мой профиль

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

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

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

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

Оплата

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

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

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

Покупки

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

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

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

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

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

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

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

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

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

Задача

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

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

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

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

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

Решение

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

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

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

Дизайн Getcourse для Marso

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

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

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

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

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

Дизайн Getcourse для Marso 157
Дизайн Getcourse для Marso 158

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

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

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

Дизайн Getcourse для Marso 160
Дизайн Getcourse для Marso 161

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

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

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

Дизайн Getcourse для Marso 163
Дизайн Getcourse для Marso 164

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

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

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

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

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

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

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

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

Задача

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

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

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

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

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

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

reskill design

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

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

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

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

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

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

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

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

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

Библиотека

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

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

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

Прямые эфиры

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

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

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

Войс-чаты

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

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

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

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

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

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

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

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

Мой профиль

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

Вход

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

Регистрация

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

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

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

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

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

Дизайн Getcourse для Alteco

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

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

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

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

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

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

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

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

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

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

Дизайн Getcourse для Alteco 172
Дизайн Getcourse для Alteco 173
Дизайн Getcourse для Alteco 174

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

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

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

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

Задача

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

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

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

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

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

Решение

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

Дизайн

Пк-версия

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

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

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

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

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