|
|
|
# 🎨 **Mockups do Projeto Se Doce Fosse**
|
|
|
|
---
|
|
|
|
|
|
|
|
Os mockups do projeto **_Se Doce Fosse_** foram desenvolvidos durante a **Sprint 0**, servindo como base visual e de usabilidade para o desenvolvimento das interfaces.
|
|
|
|
Eles representam o comportamento e a identidade visual da aplicação nos três principais cenários: **Desktop**, **Mobile** e **Painel Administrativo (Admin)**.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## 🧩 **Ferramenta Utilizada**
|
|
|
|
- **Figma** → utilizado para criação, prototipagem e documentação visual do design do sistema.
|
|
|
|
O projeto contém todas as telas navegáveis, fluxos e componentes visuais.
|
|
|
|
|
|
|
|
🔗 [**Acessar o Figma – Mockups Se Doce Fosse**](https://www.figma.com/design/0X6cHoK6Z9emFbXRTFpx8G/Mockups?node-id=0-1&p=f&t=SzRLspEVWToNzqsH-0)
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## 🎯 **Objetivos dos Mockups**
|
|
|
|
- Estabelecer uma **referência visual e funcional** para o produto final.
|
|
|
|
- Validar a **navegação, responsividade e usabilidade** antes da implementação.
|
|
|
|
- Promover **alinhamento entre design e desenvolvimento**.
|
|
|
|
- Servir como guia visual para **consistência de UI/UX** em todas as plataformas.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## 💻 **1. Cenário Desktop**
|
|
|
|
Representa a versão da aplicação para **telas maiores**, com foco em clareza visual e detalhamento das informações.
|
|
|
|
|
|
|
|
### 🏠 **Home**
|
|
|
|
Página inicial do site com banner de destaque, produtos em evidência e navegação principal.
|
|
|
|
📸 *Mockup Home Desktop:*
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
### 🧁 **Sobre Nós**
|
|
|
|
Tela institucional apresentando informações sobre a empresa e seus valores.
|
|
|
|
📸 *Mockup Sobre Nós Desktop:*
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
### 🍬 **Produtos (Catálogo)**
|
|
|
|
Catálogo com listagem completa de produtos disponíveis, filtros e paginação.
|
|
|
|
📸 *Mockup Catálogo Desktop:*
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
### 🍰 **Produto**
|
|
|
|
Página detalhada de um produto específico, exibindo imagens, descrição e botão de compra.
|
|
|
|
📸 *Mockup Produto Desktop:*
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
### 🎁 **Encomendas Personalizadas**
|
|
|
|
Tela para solicitação de pedidos personalizados, com formulário de envio.
|
|
|
|
📸 *Mockup Encomendas Desktop:*
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
### 🛒 **Home + Carrinho**
|
|
|
|
Visual integrado com o carrinho lateral aberto, mostrando produtos adicionados e valores.
|
|
|
|
📸 *Mockup Carrinho Desktop:*
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## 📱 **2. Cenário Mobile**
|
|
|
|
O cenário **Mobile** foi projetado com foco em responsividade e experiência otimizada para dispositivos móveis.
|
|
|
|
|
|
|
|
### 🏠 **Home**
|
|
|
|
Página inicial adaptada para dispositivos móveis, com destaque para produtos e navegação vertical.
|
|
|
|
📸 *Mockup Home Mobile:*
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
### 🧁 **Sobre Nós**
|
|
|
|
Versão responsiva da página institucional, com rolagem fluida e layout simplificado.
|
|
|
|
📸 *Mockup Sobre Nós Mobile:*
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
### 📂 **Menu**
|
|
|
|
Menu lateral com navegação rápida entre seções principais do site.
|
|
|
|
📸 *Mockup Menu Mobile:*
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
### 🍬 **Produtos (Catálogo)**
|
|
|
|
Listagem de produtos em formato vertical, otimizada para toque e rolagem.
|
|
|
|
📸 *Mockup Catálogo Mobile:*
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
### 🍰 **Produto**
|
|
|
|
Página de produto individual, com fotos, descrição e botão fixo de adicionar ao carrinho.
|
|
|
|
📸 *Mockup Produto Mobile:*
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
### 🔑 **Login**
|
|
|
|
Tela de autenticação simplificada com campos de login e senha.
|
|
|
|
📸 *Mockup Login Mobile:*
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
### 🛒 **Carrinho**
|
|
|
|
Resumo de itens adicionados, com total e opção de finalizar compra.
|
|
|
|
📸 *Mockup Carrinho Mobile:*
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## 🧑💻 **3. Painel Administrativo (Admin – Acesso Restrito)**
|
|
|
|
O painel administrativo foi projetado para **gestão interna** de produtos, pedidos e configurações do sistema.
|
|
|
|
|
|
|
|
### 🔐 **Login**
|
|
|
|
Tela de acesso ao painel de administração.
|
|
|
|
📸 *Mockup Login Admin:*
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
### 📊 **Dashboard**
|
|
|
|
Visão geral com métricas e indicadores de desempenho.
|
|
|
|
📸 *Mockup Dashboard Admin:*
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
### 📦 **Estoque**
|
|
|
|
Tela para controle de quantidades e status de produtos disponíveis.
|
|
|
|
📸 *Mockup Estoque Admin:*
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
### 🧁 **Produtos**
|
|
|
|
Área para cadastro, edição e exclusão de produtos no sistema.
|
|
|
|
📸 *Mockup Produtos Admin:*
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
### 🧾 **Pedidos**
|
|
|
|
Listagem de pedidos recebidos com filtros por status e data.
|
|
|
|
📸 *Mockup Pedidos Admin:*
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
### 💬 **Comentários**
|
|
|
|
Visualização e moderação de avaliações e feedbacks de clientes.
|
|
|
|
📸 *Mockup Comentários Admin:*
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
### ⚙️ **Configurações**
|
|
|
|
Área destinada à personalização de parâmetros gerais do sistema.
|
|
|
|
📸 *Mockup Configurações Admin:*
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
📘 **Resumo Final**
|
|
|
|
Os mockups cobrem **todos os fluxos principais do sistema**, incluindo:
|
|
|
|
- 💻 **Interface do Usuário (Desktop)**
|
|
|
|
- 📱 **Versão Mobile responsiva**
|
|
|
|
- 🧑💻 **Painel Administrativo completo**
|
|
|
|
|
|
|
|
Esses protótipos garantem **coerência visual**, **experiência otimizada** e **alinhamento entre design e desenvolvimento**, servindo como base para a implementação do front-end. |
|
|
|
\ No newline at end of file |
