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

Задача

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

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

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

Прототип

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

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

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

Дизайн

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

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

Баннеры

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

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

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

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

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

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

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

UI-кит

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

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

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

Поведение

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

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

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

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

О проекте

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

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

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

Задача

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

Результат

Дизайн

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

UI-кит

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

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

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

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

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

UX-дизайн для сервиса по подбору репетитора

Это учебный проект курса UX в Tilda School, на котором я опробовал все знания, которые получил на курсе.

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

Задача

Спроектировать веб-сервис с помощью которого человек может выбрать для себя репетитора для обучения (по нужной теме).

Зачем, цель

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

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

Люди в возрасте от 18-ти до 60-ти лет, активные пользователи мобильных телефонов и Интернета, которым периодическу нужна помощь репетитора в обучении.

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

  • пользователи должны иметь возможность искать репетитора по теме;
  • пользователи должны иметь возможность получить всю необходимую информацию о репетиторе:
    • имя, фамилия;
    • опыт;
    • стоимость;
    • отзывы.

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

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

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

Идём в поисковик и ищем сайты по прямому запросу.

UX-дизайн для сервиса по подбору репетитора 15

Отобрал 12 сайтов-конкурентов. Я ставлю перед собой задачу пройти путь клиента и посмотреть:

  • было ли мне комфортно?
  • решил ли я свою задачу?

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

UX-дизайн для сервиса по подбору репетитора 16

Внутри страниц скриншоты элементов, блоков, страниц и вывод по ним. То, что мне показалось удобным или неудобным.

UX-дизайн для сервиса по подбору репетитора 17
UX-дизайн для сервиса по подбору репетитора 18

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

UX-дизайн для сервиса по подбору репетитора 19

Интервью

Вопросы для интервью

UX-дизайн для сервиса по подбору репетитора 20

Было проведено 5 интервью. Созванивались по телефону, в зуме или переписывались в чате. Результат по каждому интервьюеру:

UX-дизайн для сервиса по подбору репетитора 21

Опрос

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

UX-дизайн для сервиса по подбору репетитора 22

Анализ ответов на опрос

Всего было 22 ответа.

Выводы:

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

Общие проблемы:

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

Полевые исследования

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

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

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

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

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

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

Систематизация и анализ полученных данных

Профили пользователей

UX-дизайн для сервиса по подбору репетитора 23

Customer Journey Map

UX-дизайн для сервиса по подбору репетитора 24

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

По каждой проблеме из CJM прописал решения в виде карты Xmind.

UX-дизайн для сервиса по подбору репетитора 25

Требования и ценность

Функциональные требования

UX-дизайн для сервиса по подбору репетитора 26

Технические требования и ограничения

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

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

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

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

Не должно быть всплывающих чатов и окон

Переход на карточку при клике на всю карточку репетитора

Форма отправки обратной связи по карточке репетитора. Сделать теги: «Нужно фото», «Нужно расписание», «Нужна видео-презентация». Чтобы репетитора в личку задалбывало и он видел, сколько теряет клиентов.

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

Ценность продукта

Что: Веб-сервис для поиска репетитора.

Для кого: Люди, которые заинтересованы в получении и применении знаний для себя или своих близких.

Как: Сайт, где можно найти и выбрать репетитора писать,

User Flow

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

UX-дизайн для сервиса по подбору репетитора 27

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

В xmind создал структуру будущего сайта. Синим пометил ключевые элементы, которые влияют на конверсию сайта.

UX-дизайн для сервиса по подбору репетитора 28

Прототип

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

UX-дизайн для сервиса по подбору репетитора 29

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

Редизайн 10 страниц веб-сервиса

Задача

Создать дизайн для мобильной и ПК-версии приложения по структуре текущих страниц.

Решение

Обновил дизайн 10 страниц веб-версии сервиса и разработал 9 экранов мобильной версии.

Приложение

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

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

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

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

http://fullled.ru/

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

Обращение

Ко мне обратился Ярослав Мирошник с просьбой сделать дизайн личного кабинета для курса фотографа Богдана Богданова.

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

Задачи

  1. Повышение общей эстетики, «современности» дизайна
  2. Улучшение UX
  3. Допродажа более дорогого тарифа

Результат

Пк-версия

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

Версия для мобильных

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

Компоненты

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

О каждом решении расказывал заказчику

Дизайн личного кабинета для онлайн-курса 33
Дизайн личного кабинета для онлайн-курса 34

Дизайн и вёрстка многостраничного сайта

Задача

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

Результат

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

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

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

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

Заказчик — Павел Соболев.

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

Дизайн и вёрстка многостраничного сайта 35
Дизайн и вёрстка многостраничного сайта 36
Дизайн и вёрстка многостраничного сайта 37
Дизайн и вёрстка многостраничного сайта 38
Дизайн и вёрстка многостраничного сайта 39
Дизайн и вёрстка многостраничного сайта 40

Новый дизайн

Дизайн и вёрстка многостраничного сайта 41

Каталог игр

Дизайн и вёрстка многостраничного сайта 42

Контакты

Дизайн и вёрстка многостраничного сайта 43

Личный кабинет

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

Дизайн и вёрстка многостраничного сайта 44

Во второй вкладке расположились реферальная и партнерские программы. В реферальной программе время от рефералов и реферальная ссылка, можно скопировать её кликнув на иконку справа от ссылки.

Дизайн и вёрстка многостраничного сайта 45

Серверы

На странице «Серверы» пользователи могут просматривать нагрузку и статус серверов, а также сортировать их по параметрам.

Дизайн и вёрстка многостраничного сайта 46

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

Дизайн и вёрстка многостраничного сайта 47
Дизайн и вёрстка многостраничного сайта 48

Список выполненной работы

  1. Брифинг
  2. Анализ конкурентов
  3. Прототипирование
  4. Дизайн
  5. Вёрстка
  6. Программирование дополнительных функций
  7. Монтаж видео
  8. Отрисовка баннера

Посмотреть сайт

https://dev-postnov.ru/works/vpngame/

Разработка проекта «Психосоматика»

Разработал проект с психосоматическими причинами болезней для более удобного поиска

Задизайнил, сверстал и запрограммировал 6 страниц.

Договорился с гипно-терапевтом Максимом Марковым об использовании контента на этом сайте.

Посестить сайт: psihosomatic.ru

Интернет-магазин для дверной фабрики

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

Задача

Создать дизайн, вёрстку и запрограммировать сайт-витрину для дверной фабрики.

Результат

Нанял фотографа и организовал фотосъемку на заводе. Провёл работу над контентом и структурой сайта. Проработал прототип и дизайн сайта. Показал профессионализм и серьёзность компании. Раскрыл больше информации о производстве — материалах и внешнем виде.

Дизайн

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

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

Каталог

Image gallery image

Блог

Image gallery image

Категория

Image gallery image

Страница товара

Image gallery image

О производстве

Image gallery image

Статья

Image gallery image

Вёрстка

Список сверстанных страниц

Список выполненной работы

  1. Анализ конкурентов
  2. Фото-сессия фабрики
  3. Прототипирование
  4. Создание дизайна
  5. Вёрстка сайта
  6. Создание админ. панели для сайта
  7. Наполнение сайта