Всем привет! На связи Настя, фаундер международного digital-агентства AZ Agency. Мы хотим поделиться опытом работы над одним из наших недавних проектов — Audit My Gig, который мы разработали на платформе Tilda.
Задача
Василий Кичигин запустил AI-расширение для фрилансеров на платформе Fiverr, и для его продвижения нужно было создать лендинг. Основные требования к сайту: он должен был не только визуально напоминать интерфейс Fiverr, но и быть современным, стильным и минималистичным, чтобы максимально точно представить продукт и привлечь целевую аудиторию.
О сервисе
Наша задача заключалась не только в дизайне, но и в создании системы, которая бы подчеркивала ценность предлагаемого расширения. Расширение AI — это мощный инструмент для фрилансеров, которые хотят расти и достигать успеха на Fiverr. Оно предоставляет стратегии для улучшения рейтинга профиля, удержания клиентов и увеличения продаж.
Кроме того, это расширение с искусственным интеллектом интегрируется в Chrome, которое служит персональным ассистентом для фрилансеров на Fiverr.
Разработка логотипа
Для задачи также стояла необходимость разработать логотип. Чтобы избежать излишней строгости и консервативности, мы выбрали шрифт Lato с мягкими полукруглыми деталями, что придало типографике более дружелюбный вид. В графической части логотипа объединили буквы A и G в символ, который одновременно отсылает к названию и напоминает стрелку вверх. Это создает ассоциации с ростом и движением вперед. Углы знака также были скруглены для гармоничного сочетания с текстовой частью.
Этапы разработки
Анализ конкурентов
Мы начали с исследования конкурентных сайтов, чтобы понять, как они представляют схожие услуги, и как можно выделиться на их фоне.
Мудборд
Далее был создан мудборд для определения цветовой палитры, шрифтов и общей атмосферы сайта. Мы предложили две концепции для дальнейшей работы.
- Концепция “Яркие акценты”: Это был подход с яркими цветами, смелой типографикой и нестандартной композицией. В этой концепции использовалась сетка Bento Grid с закругленными углами для дружелюбного восприятия.
Особенности:
- Нестандартная композиция
- Яркие акцентные цвета
- Смелая типографика
- Концепция “Классика”: В этой концепции был выбран светлый фон, строгая типографика и минимальное скругление карточек. Цветовая гамма преимущественно состояла из белого и приглушенных серо-голубых оттенков.
Особенности:
-
Легкость и минимализм
-
Белый фон
-
Приглушенные акценты
- Рукописный шрифт для акцентов
Прототипирование
После утверждения концепции мы подготовили прототип сайта, чтобы согласовать структуру, расположение текста и изображений.
Дизайн и верстка лендинга
После разработки и утверждения прототипа мы приступили к дизайну и верстке сайта. Лендинг был реализован на платформе Tilda с акцентом на минимализм, дружелюбный интерфейс и интуитивно понятную структуру.
1. Главная страница (Первый экран)
На главной странице мы разместили краткое и емкое описание услуги, которое сразу привлекает внимание посетителя.
Для демонстрации услуги добавили видео с примером аудита профиля, чтобы пользователи могли визуально ознакомиться с процессом.
Яркая кнопка с призывом к действию, которая направляет пользователя на следующий этап взаимодействия с сайтом.
Акценты на первом экране расставлены с помощью анимации, продуманной типографики и гармоничной цветовой схемы.
2. Кнопки и карточки
Все элементы, такие как кнопки и карточки с информацией, выполнены с закругленными углами. Это придает интерфейсу современный вид. Карточки содержат минималистичные иконки и текстовую информацию об услуге, а также возможность пролистывания с помощью стрелок.
В дизайне использованы контрастные акценты, чтобы привлечь внимание к ключевым блокам информации.
3. Процесс работы
Для раздела "Процесс работы" была выбрана крупная и яркая типографика, которая подчеркивает простоту и четкость этапов.
Процесс представлен в виде трех простых шагов с номерами, что делает информацию легко воспринимаемой.
4. Цены
Для выделения информации о стоимости услуги использован контрастный темно-зеленый фон. Это помогает ценовому блоку быть заметным и привлекает внимание к ключевой информации.
Блок с ценами четко отделен от остальной части страницы, что упрощает поиск и восприятие.
5. Информация о Василии
В разделе, посвященном Василию Кичигину, мы использовали карточки с цифрами для подачи важной информации о квалификации и достижениях клиента.
Все данные представлены в краткой и визуально привлекательной форме, что позволяет пользователю быстро ознакомиться с основными фактами.
Завершающий этап
Верстка После утверждения дизайна мы приступили к верстке сайта на платформе Tilda. Верстка была выполнена с учетом всех ранее утвержденных концепций, а также с учетом того, чтобы сайт корректно отображался на всех устройствах. В результате получился современный, функциональный и удобный для пользователя лендинг, который выполняет свою задачу.
Результат
Проект был завершен за месяц — от разработки мудборда и прототипа до финальной верстки и технических настроек на платформе Тильда. В процессе работы было внесено минимальное количество правок со стороны клиента. Василий остался доволен результатом и выразил готовность к дальнейшему сотрудничеству.
Ссылка на проект: https://freelancehustle.ai/
Хотите обсудить проект?
Напишите нам на az@azstudio.agency, и мы детально рассмотрим ваши идеи.
Мы разрабатываем нейминг, брендинг, UX/UI-дизайн, дизайн мобильных приложений, а также сайты на Webflow, Tilda и Shopify.
