WDD 131 | S03 – Atividade de Aprendizagem: Princípios de Design

S03 – Atividade de Aprendizagem: Princípios de Design

Visão Geral

Bons princípios de design são essenciais em web design para criar uma experiência de usuário positiva e envolvente. Um dos objetivos deste curso é fornecer uma base sólida em web design eficaz. Esses princípios devem ser compreendidos, praticados e aplicados continuamente. Melhorar suas habilidades exige prática e busca ativa de feedback construtivo de outras pessoas.

"Criar um site funcional é diferente de fazer arte. Mas muitos princípios psicológicos e de design se aplicam aos sites. Você pode criar um ótimo site usando os aspectos relevantes dessas leis ao seu layout, tipografia e imagens. Design para o usuário e seus objetivos de negócios." – Peep Laja – CXL

Preparação

Tipografia: Use no máximo duas ou três famílias de fontes. Se precisar de variação, use uma variação da fonte. Lembre-se de usar uma fonte que seja fácil de ler e atrativa visualmente. Ao usar o Google Fonts, certifique-se de incluir apenas os pesos necessários. Aqui está um exemplo de inclusão apenas das versões regular (400) e em negrito (700) do Roboto.
```
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
```
Cores: Use um esquema de cores que seja atrativo visualmente e transmita o clima ou a mensagem desejada. Limite a paleta de cores a até cinco tons. Teste o contraste de cores para garantir a legibilidade para todos os usuários.
Clareza: Mantenha o design organizado e sem poluição visual. Use bastante espaço em branco para orientar o foco do usuário e evite sobrecarregá-lo com muitas informações de uma só vez. Evite rodeiose e aposte em recursos visuais para comunicar sua ideia.
Consistência: Mantenha uma linguagem visual consistente em todo o design. Isso inclui o uso de tipografia, esquemas de cores e padrões de layout consistentes em diferentes páginas ou seções do seu design.
Hierarquia Visual: Estabeleça uma hierarquia clara de informações para ajudar os usuários a entender a importância relativa dos diferentes elementos na página. Use técnicas como tamanho, cor e tipografia para enfatizar o que é importante.
Acessibilidade: Garanta que seu design seja acessível a todos os usuários, incluindo pessoas com deficiência. Isso pode envolver considerações como fornecer texto alternativo para imagens, usar contraste de cores suficiente e implementar navegação por teclado. Você pode testar a acessibilidade do seu design usando ferramentas como WAVE, Axe ou Lighthouse.
Feedback: Forneça feedback claro aos usuários quando eles interagirem com elementos na página. Isso pode incluir indicações visuais, como estados de botões ou animações, para indicar que uma ação foi concluída com sucesso.
Design Centrado no Usuário: Crie um design tendo em mente as necessidades e preferências do seu público-alvo. Realize pesquisas com usuários para entender seus objetivos, comportamentos e problemas e adapte seu design adequadamente.
Apelo Visual: Use elementos atrativos visualmente, como imagens de alta qualidade, animações envolventes e tipografia atraente para chamar a atenção do usuário e criar uma experiência memorável.

Tenha proatividade: aproveite os recursos da Internet e da IA para ajudar você a aplicar esses princípios em seu próprio design e desenvolvimento.

Instruções da Atividade

Configuração de Arquivo e Pasta

Crie uma pasta chamada "semana03" no diretório wdd131.
Adicione um novo arquivo chamado "design.html" à pasta semana03.
Adicione uma pasta "estilos" à pasta semana03.
Adicione um novo arquivo chamado "design.css" à pasta estilos.

HTML

No arquivo design.html, forneça a estrutura HTML básica para o arquivo.

Lembre-se de que a notação Emmet incorporada ao VS Code fornece atalhos para snippets. Por exemplo, digite html5 e depois a tecla Tab para criar uma estrutura HTML5 básica.

Snippets personalizados definidos pelo usuário também podem ser usados: Trechos de código e como utilizá-los.
Vincule o arquivo design.css externo.
Adicione o conteúdo HTML fornecido ao <body> do documento no CodePen ☼ WDD Princípios de Design - Começo.

CSS

No arquivo design.css, copie o código CSS inicial fornecido no CodePen.
Corrija os problemas de padding no contêiner div.callout.
Corrija a justificação do alinhamento <h2> para que fique alinhado à esquerda em vez de centralizado.
Verifique o contraste de cores usando a ferramenta CSS Overview do DevTools do navegador.
- Leia o artigo Visão Geral do CSS: Identifique possíveis melhorias no CSS do Chrome DevTools para obter instruções sobre como usar essa ferramenta.
- Assista ao vídeo DevTools CSS: Descubra os Segredos da Produtividade Front-End para aprender a aprimorar o CSS.
Insira as cores de primeiro e segundo plano fornecidas no contêiner div.callout na ferramenta Contrast Ratio. - (conteúdo em inglês)

Usando a ferramenta de taxa de contraste (Contrast Ratio), qual é a proporção das duas cores? Isso é bom ou ruim?

A taxa de contraste foi de 2,14 para as cores #777 e #702963. Isso não é bom. Especificamente, não atende às diretrizes WCAG 2.0 e 2.1 (Diretrizes de Acessibilidade para Conteúdo da Web)
Corrija os problemas de contraste no div.callout e verifique se ele passa nos níveis AA e AAA.
Defina o layout do conteúdo do elemento <main> para usar duas colunas para o artigo e a lista.
- Não adicione mais nenhum HTML.
- Use a propriedade grid-template-columns para criar as duas colunas.
- O título <h2> dentro deste contêiner <main> precisará abranger as duas colunas.
  
  Como você faz isso?
  
  Use a propriedade grid-column neste <h2> para abranger as duas colunas.
Exclua o marquee e substitua-o por uma área fixa <div class="banner">, conforme mostrado na figura.

Por que excluir o marquee? O elemento marquee não é compatível com HTML5 e é considerado obsoleto (descontinuado), embora possa ser renderizado pela maioria dos navegadores. Em termos de design e usabilidade, o marquee não é bom porque é imprevisível e causa distração. Também não é acessível a usuários com deficiência.
Mova o conteúdo do rodapé para a esquerda.

Avalie Seu Conhecimento

Exemplo de Solução: CodePen ☼ WDD Princípios de Design - Solução
Que outras melhorias poderiam ser feitas?