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

Задача

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

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

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

Прототип

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

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

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

Дизайн

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

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

Баннеры

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

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

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

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

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

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

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

UI-кит

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

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

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

Поведение

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

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

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

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

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

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

Задача

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

Зачем, цель

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

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

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

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

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

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

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

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

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

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

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

Профиль

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

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

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

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

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

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

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

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

Покупки

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

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

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

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

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

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

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

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

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

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

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

Цвета

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

Компоненты

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

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

О проекте

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

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

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

Задача

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

Результат

Дизайн

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

UI-кит

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

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

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

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

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

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

О проекте

Зачем, цель

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

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

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

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

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

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

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

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

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

Утверждение

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

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

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

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

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

Результат

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Новый дизайн

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

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

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

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

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

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

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

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

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

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

Задача

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

Зачем, цель

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

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

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

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

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

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

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

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

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

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

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

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

Опрос

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

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

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

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

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

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

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

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

Интервью

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

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

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

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

Все вместе

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

User flow

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

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

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

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

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

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

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

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

Прототип

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

Дизайн

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

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

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

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

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

Desktop-версия

Mobile-версия

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

Задача

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

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

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

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

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

Решение

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

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

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

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

Задача

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

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

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

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

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

Решение

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

Дизайн

Пк-версия

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

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

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

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

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

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

Задача

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

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

Решение

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

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

Пк-версия

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

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

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

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

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

UI-кит

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

Отзыв

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

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

https://methed.ru/

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

Задача

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

Решение

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

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

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

https://baev.willteach.ru/

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

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

Задача

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

Решение

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

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

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

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

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

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

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

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

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

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

Задача

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

Решение

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

Приложение

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

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

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

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

http://fullled.ru/

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

Обращение

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

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

Задачи

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

Результат

Пк-версия

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

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

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

Компоненты

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

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

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

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

Задача

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

Результат

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

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

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

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

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

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

Дизайн и вёрстка многостраничного сайта 113
Дизайн и вёрстка многостраничного сайта 114
Дизайн и вёрстка многостраничного сайта 115
Дизайн и вёрстка многостраничного сайта 116
Дизайн и вёрстка многостраничного сайта 117
Дизайн и вёрстка многостраничного сайта 118

Новый дизайн

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

Каталог игр

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

Контакты

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

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

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

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

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

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

Серверы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Задача

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

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

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

Результат

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

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

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

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

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