Explorando Design e Código by BETHINA SILVA VASCONCELLOS BALDI https://padlet.com/bethinabaldi/7hgvj2qjvbrzfd0q Esse trabalho foi feito para ajudar a entender melhor as etapas do design e o mundo da programação web. en-us 2025-04-07 10:50:29 UTC 2025-04-07 23:01:14 UTC hello@padlet.com https://padlet.net/icons/8.0/png/2755.png 📝 Protótipos de Baixa Fidelidade 📝 bethinabaldi https://padlet.com/bethinabaldi/7hgvj2qjvbrzfd0q/wish/3399535780 Definição:
São representações iniciais de um projeto. Bem simples e normalmente feitos à mão ou com softwares básicos. O objetivo é testar ideias sem se preocupar com o visual final.

Usos comuns:

  • Testes iniciais com usuários

  • Feedback rápido

  • Brainstorm de ideias

Exemplo: rascunhos em papel ou wireframes simples no computador.

]]> 2025-04-07 22:47:39 UTC https://padlet.com/bethinabaldi/7hgvj2qjvbrzfd0q/wish/3399535780 🎯 Protótipos de Alta Fidelidade 🎯 bethinabaldi https://padlet.com/bethinabaldi/7hgvj2qjvbrzfd0q/wish/3399536164 Definição:
São protótipos que se parecem muito com o produto final. Incluem design visual completo, cores, tipografia e até simulação de interações.

Quando usar:

  • Apresentações para clientes

  • Testes mais avançados

  • Validação da interface final

Ferramentas comuns: Figma, Adobe XD, Sketch.

]]> 2025-04-07 22:48:19 UTC https://padlet.com/bethinabaldi/7hgvj2qjvbrzfd0q/wish/3399536164 🎨 Elementos do Figma 🎨 bethinabaldi https://padlet.com/bethinabaldi/7hgvj2qjvbrzfd0q/wish/3399536392 O Figma é uma ferramenta online de design muito usada pra criar interfaces e protótipos. Alguns elementos importantes:

  • Artboards (Frames): espaço onde você desenha as telas

  • Shapes: figuras básicas (retângulo, elipse, linha…)

  • Texto: caixas de texto pra títulos, menus etc.

  • Components: elementos reutilizáveis (ex: botões padrão)

  • Auto Layout: organiza automaticamente os elementos

  • Plugins: ajudam a agilizar o design com recursos extras

]]> 2025-04-07 22:48:43 UTC https://padlet.com/bethinabaldi/7hgvj2qjvbrzfd0q/wish/3399536392 🖥️ O que é HTML? 🖥️ bethinabaldi https://padlet.com/bethinabaldi/7hgvj2qjvbrzfd0q/wish/3399536610 HTML (HyperText Markup Language) é a base da estrutura de sites. Ele é responsável por montar a "esqueleto" da página: onde vão os títulos, textos, imagens, links, etc.


Exemplo de código:

<p>Esse é um parágrafo</p>

]]> 2025-04-07 22:49:08 UTC https://padlet.com/bethinabaldi/7hgvj2qjvbrzfd0q/wish/3399536610 💻 O que é VSCode? 💻 bethinabaldi https://padlet.com/bethinabaldi/7hgvj2qjvbrzfd0q/wish/3399536958 Visual Studio Code é um editor de código muito usado por quem programa. Ele aceita várias linguagens (como HTML, CSS, JavaScript) e tem muitos recursos legais.

Destaques:

  • Interface intuitiva

  • Extensões úteis

  • Ideal pra iniciantes e profissionais

]]> 2025-04-07 22:49:51 UTC https://padlet.com/bethinabaldi/7hgvj2qjvbrzfd0q/wish/3399536958 O que é CSS? bethinabaldi https://padlet.com/bethinabaldi/7hgvj2qjvbrzfd0q/wish/3399537217 CSS (Cascading Style Sheets) é o que dá estilo à página. Com ele você pode mudar cores, fontes, posições, espaçamentos e até animações.


Exemplo de uso:

body {

background-color: lightgray;

}

]]> 2025-04-07 22:50:15 UTC https://padlet.com/bethinabaldi/7hgvj2qjvbrzfd0q/wish/3399537217 bethinabaldi https://padlet.com/bethinabaldi/7hgvj2qjvbrzfd0q/wish/3399541554 2025-04-07 22:57:41 UTC https://padlet.com/bethinabaldi/7hgvj2qjvbrzfd0q/wish/3399541554 bethinabaldi https://padlet.com/bethinabaldi/7hgvj2qjvbrzfd0q/wish/3399541950 2025-04-07 22:58:19 UTC https://padlet.com/bethinabaldi/7hgvj2qjvbrzfd0q/wish/3399541950 bethinabaldi https://padlet.com/bethinabaldi/7hgvj2qjvbrzfd0q/wish/3399542491 2025-04-07 22:59:14 UTC https://padlet.com/bethinabaldi/7hgvj2qjvbrzfd0q/wish/3399542491 bethinabaldi https://padlet.com/bethinabaldi/7hgvj2qjvbrzfd0q/wish/3399542945 2025-04-07 22:59:40 UTC https://padlet.com/bethinabaldi/7hgvj2qjvbrzfd0q/wish/3399542945 bethinabaldi https://padlet.com/bethinabaldi/7hgvj2qjvbrzfd0q/wish/3399543013 2025-04-07 22:59:46 UTC https://padlet.com/bethinabaldi/7hgvj2qjvbrzfd0q/wish/3399543013 bethinabaldi https://padlet.com/bethinabaldi/7hgvj2qjvbrzfd0q/wish/3399543103 2025-04-07 22:59:55 UTC https://padlet.com/bethinabaldi/7hgvj2qjvbrzfd0q/wish/3399543103