Anotações sobre Wireframes

O que são Wide Frames?

• Desenhos feitos antes de começar a produção de um site.
• Também conhecidos como Airframes.
• Usados para estruturar visualmente um projeto.

Exemplos e Uso

• O termo Airframe é usado em escultura como estrutura.
• Wireframes de websites ajudam na visualização e comunicação de ideias.
• Demonstração prática de criação de um wireframe ao vivo.

Ferramentas para Criar Wireframes

• Preferência pelo uso de lápis e borracha.
• Uso de caneta durante brifagens com clientes para maior clareza.
• Importância de poder corrigir erros facilmente.

Estrutura do Wireframe

• Exemplo de site pessoal com três páginas:
  • Página principal (apresentação pessoal)
  • Página de portfólio (projetos)
  • Página de contatos
• Necessidade de um briefing correto para orientar a criação do wireframe.

Elementos do Wireframe

• Menu com três opções: Home, Portfólio, Contatos.
• Utilização de símbolos para indicar botões, se necessário.
  • Possibilidade de adicionar ícones às opções do menu.
• Desenho de áreas de texto e imagens para visualizar o conteúdo.
• Inclusão de rodapé com ícones das mídias sociais.

Importância do Wireframe

• Primeira peça de comunicação visual do projeto.
• Facilita a aprovação e entendimento entre a equipe e o cliente.
• Proporciona uma visão clara da estrutura de informação do site.

Wireframe Digital vs. Analógico

• Vantagens do wireframe manual:
  • Comunicação rápida e custo-benefício.
  • Simplicidade e flexibilidade.
• Wireframe digital será abordado em outro vídeo.

Considerações Finais

• Representação visual rápida permite testar ideias de forma eficiente.
• O uso de papel pode ser substituído por alternativas ecológicas, como lousas.
• Importância de tornar o processo ágil e adaptável.

---

Aula finalizada com agradecimentos e incentivo ao uso do wireframe.