Разработка дизайна для школы Apeiron

Задача проекта

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

На главной странице (изображение) нужно было обновить дизайн. Нехватало акцентного первого блока. Блоки учебных материалов не привлекали внимание.

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

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

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

Разработка дизайна для школы Apeiron 2

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

Разработка дизайна для школы Apeiron 3

Новый дизайн

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

Разработка дизайна для школы Apeiron 4

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

Разработка дизайна для школы Apeiron 5

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

Разработка дизайна для школы Apeiron 6

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

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

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

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

Задача

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

Зачем, цель

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

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

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

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

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

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

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

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

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

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

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

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

Опрос

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

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

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

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

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

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

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

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

Интервью

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

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

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

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

Все вместе

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

User flow

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

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

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

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

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

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

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

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

Прототип

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

Дизайн

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

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

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

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

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

Desktop-версия

Mobile-версия

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

Задача

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

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

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

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

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

Решение

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

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

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

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

Задача

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

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

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

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

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

Решение

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

Дизайн

Пк-версия

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

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

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

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

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

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

Задача

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

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

Решение

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

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

Пк-версия

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

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

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

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

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

UI-кит

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

Отзыв

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

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

https://methed.ru/

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

Задача

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

Решение

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

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

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

https://baev.willteach.ru/

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

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

Задача

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

Решение

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

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

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

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

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

Дизайн лендинга для компании General Soft

Клиент обратился ко мне за разработкой нового сайта. Планировался сайт на Wordpress с блогом и кейсами. Но для начала мы решили сделать лендинг.

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

Дизайн лендинга General Soft
Дизайн лендинга General Soft

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

Задача

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

Решение

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

Приложение

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

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

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

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

http://fullled.ru/

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

Обращение

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

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

Задачи

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

Результат

Пк-версия

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

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

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

Компоненты

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

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

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

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

Задача

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

Результат

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

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

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

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

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

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

Дизайн и вёрстка многостраничного сайта 74
Дизайн и вёрстка многостраничного сайта 75
Дизайн и вёрстка многостраничного сайта 76
Дизайн и вёрстка многостраничного сайта 77
Дизайн и вёрстка многостраничного сайта 78
Дизайн и вёрстка многостраничного сайта 79

Новый дизайн

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

Каталог игр

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

Контакты

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

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

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

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

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

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

Серверы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Задача

Дмитрий поставил задачу — сделать дизайнсайта рекламного агенства.

Пожелания от клиента: минимализм, структура как у сайта конкурентов. Это краткая выдержка из брифа. В брифе было указано:

  • Количество цветов
  • Пожелания по стилю
  • Данные о компании
  • Пожелания по шрифтам

Результат

Задизайнил 6 страниц для ПК и мобильных с сохранением структуры прежней структуры.

Улучшили юзабилити сайта, посетителям стало проще ориентироваться на странице и анализировать информацию.

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

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

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

Дизайн лендинга для компании по вывозу лома

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

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

Разработал прототип, компьютерную и мобильную версию дизайна. Лендинг вышел в 7 экранов. Стиль лендинга — строгий, как и сама компания: приезжают вовремя, не обманут с взвешиванием, уберут за собой.

Дизайн

Дизайн лендинга для компании по вывозу лома 99