Дизайн промостраницы для интенсива
Категория: UI
Разработка дизайна для школы Apeiron
Задача проекта
Заказчик обратился с задачей редизайна главной страницы и страницы модуля.
На главной странице (изображение) нужно было обновить дизайн. Нехватало акцентного первого блока. Блоки учебных материалов не привлекали внимание.
На странице модуля было краткое описание и форма заявки. Нужно было добавить дополнительные блоки, чтобы рассказать подробнее о модуле.
Старый дизайн
Главная страница
Страница модуля
Новый дизайн
Главная страница
Страница модуля
Мобильная версия
UI/UX дизайн для сервиса FnBook
Ко мне обратился основатель сервиса FnBook Дмитрий Масланов. Он пришёл с задачей создания сервиса для фанфиков.
Фанфики — любительское сочинение по мотивам кинофильмов, телесериалов, аниме, комиксов, компьютерных игры. Авторами как правило, становятся поклонники оригинальных произведений. Обычно фанфики создаются на некоммерческой основе и для чтения другими поклонниками.
Описание задачи
Задача
Спроектировать веб-сервис с помощью которого человек может читать и писать фанфики.
Зачем, цель
Сделав удобный веб-сервис мы помогаем легко и просто читать и делиться с другими произведениями. Заработок сервиса строится на платных функциях. Если учтём проблемы и исправим их в нашем сервисе — привчлемём больше бользователей и больше заработаем.
Для кого, целевая аудитория
Люди в возрасте от 14-ти до 50-ти лет, активные пользователи мобильных телефонов и Интернета, которым хочется прочитать сочинения по темам любимых произведений или поделиться своим произведением.
Бизнес-требования к продукту
- пользователи должны иметь возможность читать фанфики; ставить лайки и голосовать за них.
- пользователи должны иметь возможность писать фанфики и общаться с аудиторией
Исследования
Исследование в этом проекте проходили в 4 этапа: анализ конкурентов, опрос пользователей, интервью, сбор отзывов с сайтов-агрегаторов.
Анализ конкурентов
Прежде чем пытаться разработать какое-то решение — нужно посмотреть, что сделали конкуренты. В процессе анализа постараться объективно оценить хорошие решения и ошибки.
Клиент предоставил список конкурентов, которые заняли рынок и на которых стоит обратить внимание.
По каждому конкуренту составил заметки с хорошими решениями и ошибками.
Опрос
Для опроса я создал анкету из 6 ответов. В создании вопросов для опроса главное уместить важные вопросы в 3−6 вопросов. Часть простых, часть открытых, чтобы пользователи могли бы рассказать свое видение и подсказать нам направление в работе.
Создал форму в Google Forms.
Для привлечения аудитории к опросу использовал рекламу Вконтакте. Подобрал изображения, написал текст и начал откручивать рекламу. Использовал героев популярных вселенных. Хотя на последнем изображении я явно схалтурил — Фродо или Гендальф подошли бы лучше 🙂
Потратил 100 рублей, получил 81 переход и 29 ответов на анкету, развернутые ответы ниже.
Ответы на вопросы
Интервью
Для интервью я нашёл 5 человек. Все они проводят много времени на сайтах с фанфиками. Кто-то написал много фанфиков, кто-то прочитал и оценил. С некоторым общался созвонившись, с другими в чате.
Один из опытных авторов фикбука общался со мной примерно 40 минут и дал много детальной информации: замечания, идеи, одобрение функций. Просто нужно спросить и слушать.
Все вместе
Я собрал все ответы, со всех интревью и опросов и собрал их в заметке. Поделил на пользователей и авторов.
User flow
Составил User Flow на 2 основные задачи: прочитать фанфик и написать фанфик.
Структура сайта
Составил структуру всех страниц и элементов, которые помогут в решении задач из User Flow. На основани анализа конкурентов, опроса и интервью, снабдил структуру элементами, которые нужны пользователям.
Зарисовки дизайна
Перед созданием прототипа набросал скетчи на бумаге, чтобы уже на этом этапе понять как выстраивать структуру.
Прототип
Дизайн
Было отрисовано порядочно интерфейсных деталей
Кликабельный прототип
Разрабтал кликабельный прототип в Figme, чтобы можно было протестировать всё на этапе прототипирования.
Desktop-версия
Mobile-версия
Дизайн лендинга для веб-разработчика
Задача
Обратился разработчик с задачей разработки лендинга портфолио. У него был старый сайт, но не подходил по дизайну и функциональности.
В планах сделать полноценный сайт с кейсами и блогом. Пообщавшись, мы пришли к выводу, что нам нужно сначала сделать лендинг, чтобы клиенты уже могли его найти.
После этого уже можно вторым этапом делать кейса, а третьим этапом блог.
Начали с лендинга. Его целевая аудитория по разработке — государственные организации. Нам не надо делать студийного проекта уровень, просто и со вкусом.
Также у клиента был ограниченный бюджет — 20 000₽. Я предложил только ПК версию и с ограничением в 6 блоков.
Решение
Разработал дизайн лендинга с основными секциями, которые дают понимание, что это за разработчик и что он может предложить.
Так как я сам часто нанимаю разработчников для своих проектов, я понимаю что нужно отразить, чтобы клиент мог принять решение о навыках разработчика.
Дизайн сайта для курса TanyaChange
Задача
Ко мне обратился Роман с задачей разработки лендинга и сбора фирменного стиля. Он сам создал дизайн текущего лендинга, но для нового лендинга захотел привлечь профессионала.
Ему также не нравилось, что инстаграм, геткурс и лендинг в разных стилях.
Нужно было сделать лёгкий и современный дизайн для женщин 35−50 лет. Не перегруженный, но эстетичный
Старый дизайн
Решение
Разработали прототип и дизайн лендинга на 15 секций. Определились с цветами и элементами для фирменного стиля.
Дизайн
Пк-версия
Мобильная версия
Модальные окна
Дизайн сайта для курса по вёрстке
Задача
Ко мне обратилась компания MethEd. Им нужно было создать дизайн лендинга для курса по вёрстке. Они запускали первый поток через несколько недель.
Нужно создать лёгкий и простой дизайн. Клиент не хотел следить за мной и контроллировать процесс. Договорились о фидбеке клиента на контрольных точках: пк-версия и мобильная-версия.
Решение
В сжатые сроки разработал дизайн лендинга в 2 разрешениях: пк и мобильный. Разработал UI-кит, дизайн модальных окон. Клиент остался доволен и планирует продложать работу над расширением объёма и функциональности сайта.
Итоговый дизайн
Пк-версия
Мобильная версия
Модальное окно
[изображение удалёно из-за наличия иконок компаний запрещенной в России организации Meta]
UI-кит
Отзыв
Аудио отзыв Максима Лескина, спикера курса.
Ссылка на сайт
Дизайн лендинга для онлайн-курса «Свет по Баеву»
Задача
Разработать лендинг по готовому прототипу. Дизайн должен быть в стиле минимализма. Информацию нужно показать просто, но со стилем.
Решение
Разработал дизайн лендинга в 3 разрешениях: компьютер, планшет, мобильный. Клиент остался доволен креативностью и стилем лендинга.
Ссылка на сайт
Дизайн лендинга регистрации на онлайн-курс
Задача
В сжатые сроки разработать дизайн лендинга для вебинара «Не как у всех: сложный свет для фотографов» по готовой структуре и текстам. Нужен был современный и креативный дизайн.
Решение
Разработал дизайн лендинга в 3 разрешениях. Уложился в сжатые сроки. Клиент остался доволен креативностью и стилем лендинга.
Дизайн для десктопной версии
Дизайн планшетной и мобильной версии
Дизайн лендинга для компании General Soft
Клиент обратился ко мне за разработкой нового сайта. Планировался сайт на Wordpress с блогом и кейсами. Но для начала мы решили сделать лендинг.
Клиент быстро собрал лендинг с помощью шаблонных блоков и хотел обновить дизайн. Сделать его уникальным и по его видению.
Редизайн 10 страниц веб-сервиса
Задача
Создать дизайн для мобильной и ПК-версии приложения по структуре текущих страниц.
Решение
Обновил дизайн 10 страниц веб-версии сервиса и разработал 9 экранов мобильной версии.
Приложение
Отзыв клиента
Мне понравилось работать с Даниилом. Работал с ним сначала по одному проекту, а потом продолжил работу по текущему проекту. Нравится, что Даниил держит в курсе, регулярно отчитывается результате о процессе работы. Вдумчиво подходит к процессу проработки интерфейса. Будем и дальше с ним сотрудничать.
Ссылка на сайт
Дизайн личного кабинета для онлайн-курса
Обращение
Ко мне обратился Ярослав Мирошник с просьбой сделать дизайн личного кабинета для курса фотографа Богдана Богданова.
Дизайн сайта уже был готов, мне нужно было создать дизайн админ-панели для сайта.
Задачи
- Повышение общей эстетики, «современности» дизайна
- Улучшение UX
- Допродажа более дорогого тарифа
Результат
Пк-версия
Версия для мобильных
Компоненты
О каждом решении расказывал заказчику
Дизайн и вёрстка многостраничного сайта
Задача
Компания по предоставлению VPN-услуг искала разработчика, который сможет сделать свежий дизайн для текущего сайта и сверстать его.
Результат
Полностью переработал главную страницу сайта. Проработал структуру, которая закрывает боли клиентов, показали что умеет программа.
Улучшили удобство и дизайн личного кабинета, модальных окон, таблицы серверов.
Отзыв клиента
Очень понравилось сотрудничать с Даниилом Пстновым. Работа была сделана качественно, с индивидуальным подходом и самое главное — в срок. Чёткого технического задания не было, но Даниил понял задачу и предложил свои вариант, который нас устроил. Будем сотрудничать и дальше.
Заказчик — Павел Соболев.
Старый дизайн
Новый дизайн
Каталог игр
Контакты
Личный кабинет
Личный кабинет разделён на информацию и реферельную программу. По умолчанию всегда открыта первая вкладка. На первой вккладвке пользователь может просмотреть информацию об аккаунте, пополнить счёт и активировать промокод.
Во второй вкладке расположились реферальная и партнерские программы. В реферальной программе время от рефералов и реферальная ссылка, можно скопировать её кликнув на иконку справа от ссылки.
Серверы
На странице «Серверы» пользователи могут просматривать нагрузку и статус серверов, а также сортировать их по параметрам.
Модальные окна
Список выполненной работы
- Брифинг
- Анализ конкурентов
- Прототипирование
- Дизайн
- Вёрстка
- Программирование дополнительных функций
- Монтаж видео
- Отрисовка баннера
Посмотреть сайт
Разработка проекта «Психосоматика»
Разработал проект с психосоматическими причинами болезней для более удобного поиска
Задизайнил, сверстал и запрограммировал 6 страниц.
Договорился с гипно-терапевтом Максимом Марковым об использовании контента на этом сайте.
Посестить сайт: psihosomatic.ru
Дизайн сайта для рекламного агенства
Задача
Дмитрий поставил задачу — сделать дизайнсайта рекламного агенства.
Пожелания от клиента: минимализм, структура как у сайта конкурентов. Это краткая выдержка из брифа. В брифе было указано:
- Количество цветов
- Пожелания по стилю
- Данные о компании
- Пожелания по шрифтам
Результат
Задизайнил 6 страниц для ПК и мобильных с сохранением структуры прежней структуры.
Улучшили юзабилити сайта, посетителям стало проще ориентироваться на странице и анализировать информацию.
Отзыв клиента
Дизайн страниц
Дизайн лендинга для компании по вывозу лома
Сделал дизайн лендинга для компании, которая занимается вывозом лома.
Компания вывозит лом металлов с дачных и городских участков. Помогает вывозить лом после разбора конструкций. Классно, что можно отправить фото и получить оценку дохода по фото.
Разработал прототип, компьютерную и мобильную версию дизайна. Лендинг вышел в 7 экранов. Стиль лендинга — строгий, как и сама компания: приезжают вовремя, не обманут с взвешиванием, уберут за собой.
Дизайн
