ALFABUY Marketplace

1. Обзор проекта

Необходимо разработать современный, минималистичный и стильный дизайн для криптовалютного маркетплейса ALFABUY. Платформа позволяет пользователям подключать крипто-кошельки (Solana, Ethereum, Bitcoin и др.) и совершать операции с использованием различных блокчейнов. Проект должен выглядеть технологично, надежно и привлекательно для целевой аудитории.

2. Общие требования к дизайну

2.1. Стилистика

• Минимализм с акцентом на функциональность

• Темная тема как основная (черный фон, белый текст)

• Современный Web3-стиль с геометрическими формами и неоновыми акцентами

• Чистые линии и формы, достаточно воздуха между элементами

2.2. Брендинг

• Логотип ALFABUY уже существует и должен быть основой визуальной идентичности

• Сохранить фирменные черты существующего логотипа при разработке остальных элементов

• Создать узнаваемый и согласованный визуальный язык для всех страниц и компонентов

3. Цветовая схема

3.1. Основные цвета

• Основной фон: черный (#000000)

• Основной текст: белый (#FFFFFF)

• Вторичный фон: темно-серый (#121212 или #1A1A1A) для разделения секций

3.2. Акцентные цвета

• Разработать 2-3 акцентных цвета, которые будут гармонировать с черно-белой основой:

  • Предлагается использовать градиенты в стиле Solana (от #9945FF к #14F195)

  • Возможно использование синего (#627EEA) как элемента от Ethereum

  • Акцентный цвет для призывов к действию (кнопки)

3.3. Функциональные цвета

• Цвет успеха: зеленый оттенок

• Цвет ошибки: красный оттенок

• Цвет предупреждения: оранжевый/желтый оттенок

• Цвет информационных сообщений: синий оттенок

4. Типографика

4.1. Шрифты

• Основной шрифт: Roboto (уже используется в проекте)

• Дополнительный шрифт для заголовков: предложить вариант геометрического шрифта, который будет сочетаться с Roboto

• Моноширинный шрифт для отображения адресов криптокошельков и кода

4.2. Размеры текста

• Заголовок h1: 48-56px (мобильная версия: 36-42px)

• Заголовок h2: 36-42px (мобильная версия: 28-32px)

• Заголовок h3: 24-28px (мобильная версия: 20-24px)

• Основной текст: 16-18px (мобильная версия: 14-16px)

• Дополнительный текст: 14px (мобильная версия: 12px)

5. Компоненты интерфейса

5.1. Хедер

• Минималистичный хедер с логотипом ALFABUY

• Поисковая строка с затемненным фоном и контрастным текстом

• Кнопка подключения кошелька с анимацией при наведении

• Адаптивная версия для мобильных устройств

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

• Героический блок с ярким визуальным элементом (иллюстрация или анимация)

• Блок популярных товаров/сервисов с карточками

• Секция преимуществ платформы

• Секция с информацией о поддерживаемых блокчейнах

• Footer с необходимой информацией

5.3. Карточки товаров

• Минималистичные карточки с четкой структурой

• Выделенная цена и кнопка действия

• Анимации при наведении курсора

• Индикаторы статуса (например, "Популярное", "Новое")

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

• Стилизованные модальные окна для подключения кошельков

• Темный полупрозрачный фон с размытием

• Скругленные углы модального окна

• Анимации появления и исчезновения

5.5. Кнопки и интерактивные элементы

• Кнопки с градиентной заливкой для основных действий

• Кнопки с контуром для вторичных действий

• Переключатели и чекбоксы в соответствии с общим стилем

• Анимации при наведении и нажатии

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

6.1. Основные требования

• Адаптивный дизайн для всех экранов от 320px до 768px

• Mobile-first подход к разработке

• Удобная навигация с гамбургер-меню

6.2. Особенности мобильного интерфейса

• Упрощенный хедер с минимальным набором элементов

• Карточки товаров на всю ширину экрана

• Крупные элементы управления для удобного тапа

• Нижняя навигационная панель для основных разделов

6.3. Жесты и взаимодействие

• Поддержка свайпов для просмотра карточек товаров

• Pull-to-refresh для обновления контента

• Тактильная обратная связь при нажатиях (анимации)

7. Изображения и иконки

7.1. Иконки

• Минималистичные линейные иконки с возможностью изменения цвета

• Единый стиль для всех иконок

• Иконки криптовалют в соответствии с их официальными логотипами

7.2. Изображения и иллюстрации

• Разработать 3-5 уникальных иллюстраций для ключевых разделов

• Абстрактные геометрические формы для фоновых элементов

• Единый стиль для всех иллюстраций, сочетающийся с общей концепцией

7.3. Анимации

• Тонкие и ненавязчивые анимации для улучшения пользовательского опыта

• Анимированные переходы между экранами

• Индикаторы загрузки и состояния в едином стиле

8. Страницы для разработки

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

2. Страница каталога товаров/услуг

3. Детальная страница товара/услуги

4. Личный кабинет пользователя

5. Корзина/Оформление заказа

6. Модальные окна для подключения кошельков

7. Страница успешной оплаты/транзакции

8. Страница "О нас"

9. Требования к результатам работы

9.1. Форматы поставки

• Дизайн-макеты в Figma с организованной структурой и компонентами

• Прототипы с основными взаимодействиями

• Стайлгайд с описанием всех элементов дизайн-системы

• UI Kit с основными компонентами для разработчиков

9.2. Дополнительные материалы

• Экспортированные иконки в SVG формате

• Иллюстрации в векторном формате

• Описание анимаций и взаимодействий

• Рекомендации по внедрению и использованию дизайн-системы

10. Референсы и вдохновение

• Примеры минималистичных Web3 проектов:

  • Uniswap (чистый и функциональный дизайн)

  • Phantom Wallet (темная тема и неоновые акценты)

  • Zora (минимализм и фокус на контенте)

  • OpenSea (организация большого объема контента)