Antes de iniciar a programação de uma página web, é importante planejar como os elementos serão organizados.
O projeto de layout representa a etapa onde definimos a estrutura visual da aplicação.
Projeto de layout é o planejamento da organização dos elementos visuais de uma página ou sistema.
Ele define onde cada componente será colocado antes da criação do código.
| Etapa | Descrição |
|---|---|
| 1 - Levantamento | Entender objetivo e público da aplicação. |
| 2 - Organização | Definir conteúdos e funcionalidades. |
| 3 - Wireframe | Criar estrutura visual inicial. |
| 4 - Protótipo | Criar modelo próximo da versão final. |
| 5 - Desenvolvimento | Transformar o layout em código. |
+--------------------------------+
| HEADER |
| Logo Menu de Navegação |
+--------------------------------+
| |
| CONTEÚDO |
| |
| Textos | Imagens | Informações |
+--------------------------------+
| FOOTER |
+--------------------------------+
| Área | Função |
|---|---|
| Header | Apresenta identificação e informações principais. |
| Navigation | Permite acessar páginas e funcionalidades. |
| Main | Contém o conteúdo principal. |
| Aside | Exibe informações complementares. |
| Footer | Apresenta informações finais. |
As cores devem ser escolhidas considerando o objetivo do projeto e o público-alvo.
| Cor | Representação |
|---|---|
| Azul | Confiança e segurança |
| Verde | Natureza e crescimento |
| Vermelho | Energia e atenção |
| Preto | Elegância e sofisticação |
-------------------------
| LOGO MENU |
-------------------------
| |
| IMAGEM |
| |
-------------------------
| TEXTO PRINCIPAL |
| BOTÃO AÇÃO |
-------------------------
| FOOTER |
-------------------------
| Ferramenta | Uso |
|---|---|
| Figma | Design e prototipação |
| Adobe XD | Interfaces digitais |
| Canva | Materiais visuais |
| Draw.io | Diagramas e fluxos |