mobile-first

Мобильные кадры

Большинство пользователей будут приходить с телефона. Каждый фон, карточка и портрет должны сначала пройти маленький экран.

Сделать визуальные правила, которые не ломают кнопки, скролл, оплату и выбор карт на iPhone Safari и Android Chrome.

Где используется

  • Все hero-изображения
  • Гадальный стол
  • Карточки залов

Визуальное направление

  • Вертикальные версии должны быть отдельными, не автоматическим кропом desktop.
  • Главный объект — в верхней трети или центре, но не под sticky dock.
  • Никаких тонких символов, которые становятся пылью на 390 px ширины.

Технические параметры

  • Safe mobile sizes: 1170×2532, 1290×2796, 1080×1920.
  • Touch target вокруг важных визуальных кнопок: минимум 44×44 px.
  • Проверять 200% zoom и reduced motion.

базовый промпт

Текст для генерации или дизайнера

Mobile-first vertical mystical oracle website background, clean center space for UI, warm amber and deep violet, subtle medieval hall details, no text, no important details at bottom edge, no clutter, designed for phone screen, premium calm atmosphere

Доступность

  • Декор не должен быть единственным способом понять состояние.
  • Нижняя мобильная панель не должна перекрывать CTA.

Проверка качества

  • Проверено на узком экране до desktop.
  • Кнопки не сливаются с фоном.
  • Нижняя панель не перекрывает важное.

связанные двери

Куда перейти дальше