Guilherme Santos da Silva
🎨 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.
🎯 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.
🧁 Sobre Nós
Tela institucional apresentando informações sobre a empresa e seus valores.
🍬 Produtos (Catálogo)
Catálogo com listagem completa de produtos disponíveis, filtros e paginação.
🍰 Produto
Página detalhada de um produto específico, exibindo imagens, descrição e botão de compra.
🎁 Encomendas Personalizadas
Tela para solicitação de pedidos personalizados, com formulário de envio.
🛒 Home + Carrinho
Visual integrado com o carrinho lateral aberto, mostrando produtos adicionados e valores.
📱 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.
🧁 Sobre Nós
Versão responsiva da página institucional, com rolagem fluida e layout simplificado.
📂 Menu
Menu lateral com navegação rápida entre seções principais do site.
🍬 Produtos (Catálogo)
Listagem de produtos em formato vertical, otimizada para toque e rolagem.
🍰 Produto
Página de produto individual, com fotos, descrição e botão fixo de adicionar ao carrinho.
🔑 Login
Tela de autenticação simplificada com campos de login e senha.
🛒 Carrinho
Resumo de itens adicionados, com total e opção de finalizar compra.
🧑💻 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.
📊 Dashboard
Visão geral com métricas e indicadores de desempenho.
📦 Estoque
Tela para controle de quantidades e status de produtos disponíveis.
🧁 Produtos
Área para cadastro, edição e exclusão de produtos no sistema.
🧾 Pedidos
Listagem de pedidos recebidos com filtros por status e data.
💬 Comentários
Visualização e moderação de avaliações e feedbacks de clientes.
⚙ ️ Configurações
Área destinada à personalização de parâmetros gerais do sistema.
-
💻 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.