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

О проекте

Зачем, цель

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

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

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

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

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

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

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

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

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

Утверждение

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

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

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

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

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

Результат

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

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

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

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

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

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

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

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

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

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

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

Задача

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

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

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

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

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

Решение

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

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

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

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

Задача

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

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

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

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

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

Решение

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

Дизайн

Пк-версия

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

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

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

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

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

Дизайн лендинга для курса Notion Pro

Дизайн лендинга я делал для своего курса Notion Pro. Делать дизайн своим продуктам очень сложно — никто не подгоняет и не даёт правок. Можно растягивать проект до бесконечности.

Я решил флексить. Поставить себе срок 3 дня и сделать сайт. Этот дизайн лендинга удалось сделать за несколько часов.

Дизайн лендинга для курса Notion Pro 10

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

Задача

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

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

Решение

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

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

Пк-версия

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

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

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

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

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

UI-кит

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

Отзыв

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

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

https://methed.ru/

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

Задача

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

Решение

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

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

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

https://baev.willteach.ru/

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

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

Задача

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

Решение

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

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

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

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

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

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

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

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

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

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

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

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

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

Дизайн

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

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

Закончил дизайн лендинга для консультанта-нумеролога

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

Лендинг получился мистическим, но в то же время легким и понятным — как и сама нумерология.

Дизайн лендинга для нумеролога-консультанта 20
Полная версия дизайна

Дизайн лендинга для компании по продаже Hyper-shop

Работа на курсе по дизайну лендингов.

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

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

Дизайн лендинга для компании по продаже Hyper-shop 21
Полная версия дизайна