8.2 KiB

Raw Blame History

Estilize Seu App Bancário com CSS Moderno

Visão Geral do Projeto

Transforme seu aplicativo bancário funcional em um web app visualmente atraente e profissional utilizando técnicas modernas de CSS. Você criará um sistema de design coeso que melhora a experiência do usuário, mantendo os princípios de acessibilidade e design responsivo.

Este desafio propõe que você aplique padrões contemporâneos de design web, implemente uma identidade visual consistente e crie uma interface que os usuários considerem atraente e intuitiva para navegar.

Instruções

Etapa 1: Configure sua Folha de Estilo

Crie a base do seu CSS:

Crie um novo arquivo chamado styles.css na raiz do seu projeto.
Linke a folha de estilo no seu arquivo index.html:
```
<link rel="stylesheet" href="styles.css">
```

Comece com um reset de CSS e padrões modernos:

/* Modern CSS reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
}

Etapa 2: Requisitos do Sistema de Design

Implemente estes elementos essenciais de design:

Paleta de Cores

Cor primária: Escolha uma cor profissional para botões e destaques.
Cor secundária: Cor complementar para ações secundárias e detalhes.
Cores neutras: Tons de cinza para texto, bordas e fundos.
Cores de sucesso/erro: Verde para estados de sucesso, vermelho para erros.

Tipografia

Hierarquia de títulos: Distinção clara entre elementos H1, H2 e H3.
Texto do corpo: Tamanho de fonte legível (mínimo de 16px) e altura de linha apropriada.
Rótulos de formulário: Estilo de texto claro e acessível.

Layout e Espaçamento

Espaçamento consistente: Use uma escala de espaçamento (8px, 16px, 24px, 32px).
Sistema de grid: Layout organizado para formulários e seções de conteúdo.
Design responsivo: Abordagem mobile-first com pontos de quebra.

Etapa 3: Estilização de Componentes

Estilize estes componentes específicos:

Formulários

Campos de entrada: Bordas profissionais, estados de foco e estilo de validação.
Botões: Efeitos de hover, estados desativados e indicadores de carregamento.
Rótulos: Posicionamento claro e indicadores de campos obrigatórios.
Mensagens de erro: Estilo de erro visível e mensagens úteis.

Navegação

Cabeçalho: Área de navegação limpa e com identidade visual.
Links: Estados de hover claros e indicadores de ativo.
Logo/Título: Elemento de marca distintivo.

Áreas de Conteúdo

Seções: Separação visual clara entre diferentes áreas.
Cartões: Se usar layouts baseados em cartões, inclua sombras e bordas.
Fundos: Uso apropriado de espaços em branco e fundos sutis.

Etapa 4: Recursos Avançados (Opcional)

Considere implementar estes recursos avançados:

Modo escuro: Alternância entre temas claro e escuro.
Animações: Transições sutis e micro-interações.
Estados de carregamento: Feedback visual durante envios de formulários.
Imagens responsivas: Imagens otimizadas para diferentes tamanhos de tela.

Inspiração de Design

Características de apps bancários modernos:

Design limpo e minimalista com bastante espaço em branco.
Esquemas de cores profissionais (azuis, verdes ou neutros sofisticados).
Hierarquia visual clara com botões de chamada para ação destacados.
Relações de contraste acessíveis que atendem às diretrizes do WCAG.
Layouts responsivos que funcionam em todos os dispositivos.

Requisitos Técnicos

Organização do CSS

/* 1. CSS Custom Properties (Variables) */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  /* Add more variables */
}

/* 2. Base Styles */
/* Reset, typography, general elements */

/* 3. Layout */
/* Grid, flexbox, positioning */

/* 4. Components */
/* Forms, buttons, cards */

/* 5. Utilities */
/* Helper classes, responsive utilities */

/* 6. Media Queries */
/* Responsive breakpoints */

Requisitos de Acessibilidade

Contraste de cores: Garanta uma relação de pelo menos 4.5:1 para texto normal.
Indicadores de foco: Estados de foco visíveis para navegação por teclado.
Rótulos de formulário: Associados corretamente aos campos de entrada.
Design responsivo: Utilizável em telas de 320px a 1920px de largura.

Critérios de Avaliação

Critério	Exemplar (A)	Proficiente (B)	Em Desenvolvimento (C)	Necessita Melhorar (F)
Sistema de Design	Implementa um sistema de design abrangente com cores, tipografia e espaçamento consistentes em todo o projeto	Usa estilos consistentes com padrões claros de design e boa hierarquia visual	Estilização básica aplicada com alguns problemas de consistência ou elementos de design ausentes	Estilização mínima com escolhas de design inconsistentes ou conflitantes
Experiência do Usuário	Cria uma interface intuitiva e profissional com excelente usabilidade e apelo visual	Proporciona boa experiência ao usuário com navegação clara e conteúdo legível	Usabilidade básica com necessidade de algumas melhorias	Usabilidade ruim, difícil de navegar ou ler
Implementação Técnica	Utiliza técnicas modernas de CSS, estrutura de código organizada e segue as melhores práticas	Implementa CSS de forma eficaz com boa organização e técnicas apropriadas	CSS funciona corretamente, mas pode carecer de organização ou abordagens modernas	Implementação de CSS ruim com problemas técnicos ou de compatibilidade entre navegadores
Design Responsivo	Design totalmente responsivo que funciona perfeitamente em todos os tamanhos de dispositivos	Bom comportamento responsivo com pequenos problemas em alguns tamanhos de tela	Implementação responsiva básica com alguns problemas de layout	Não é responsivo ou apresenta problemas significativos em dispositivos móveis
Acessibilidade	Atende às diretrizes do WCAG com excelente navegação por teclado e suporte a leitores de tela	Boas práticas de acessibilidade com contraste e indicadores de foco adequados	Considerações básicas de acessibilidade com alguns elementos ausentes	Acessibilidade ruim, difícil para usuários com deficiência

Diretrizes de Submissão

Inclua na sua submissão:

styles.css: Sua folha de estilo completa.
HTML atualizado: Quaisquer modificações feitas no HTML.
Capturas de tela: Imagens mostrando seu design em desktop e mobile.
README: Breve descrição de suas escolhas de design e paleta de cores.

Pontos extras para:

Propriedades customizadas de CSS para temas mais fáceis de manter.
Recursos avançados de CSS como Grid, Flexbox ou animações CSS.
Considerações de desempenho como CSS otimizado e tamanho de arquivo mínimo.
Testes entre navegadores garantindo compatibilidade em diferentes navegadores.

💡 Dica Profissional: Comece com o design para dispositivos móveis primeiro e depois melhore para telas maiores. Essa abordagem mobile-first garante que seu app funcione bem em todos os dispositivos e siga as melhores práticas de desenvolvimento web moderno.

Aviso Legal:
Este documento foi traduzido utilizando o serviço de tradução por IA Co-op Translator. Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional feita por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução.

8.2 KiB Raw Blame History