Projeto FINTECH - Interface Web Intuitiva
Este repositório contém o desenvolvimento de uma interface web intuitiva para o sistema do projeto FINTECH, realizado como parte de um trabalho para a faculdade FIAP em 2023. O projeto utiliza as tecnologias HTML, CSS e Bootstrap, com o objetivo de criar uma interface de usuário (UI) moderna, responsiva e fácil de usar, que permita uma interação eficiente com o sistema.
Tecnologias Utilizadas
- HTML: Estruturação das páginas web e organização do conteúdo.
- CSS: Estilização dos elementos da página, incluindo layout, cores e tipografia.
- Bootstrap: Framework CSS utilizado para agilizar o desenvolvimento de layouts responsivos e componentes de UI prontos para uso.
Objetivos do Projeto
- Desenvolver uma Interface Intuitiva: Criar uma UI que seja fácil de navegar, com foco na experiência do usuário.
- Garantir Responsividade: Utilizar o Bootstrap para garantir que a interface seja adaptável a diferentes dispositivos e tamanhos de tela.
- Aplicar Boas Práticas de Design: Implementar princípios de design, como espaçamento adequado, contraste de cores, e tipografia legível.
- Facilitar a Interação com o Sistema: Criar componentes interativos que permitam ao usuário realizar operações no sistema de forma eficiente e intuitiva.
Estrutura do Projeto
1. Estrutura de Páginas HTML
- Página Inicial: Interface de boas-vindas com informações sobre o sistema e navegação para outras seções.
- Tela de Login: Página de autenticação de usuários, com campos de entrada e validação básica.
- Dashboard: Painel principal com acesso a funcionalidades como consulta de saldos, transferências e histórico de transações.
2. Estilização com CSS
- Estilos Globais: Definição de estilos gerais aplicáveis a todas as páginas, como fontes, cores e margens.
- Componentes Personalizados: Criação de componentes específicos como botões, formulários e tabelas com estilos customizados.
- Animações e Transições: Aplicação de efeitos de animação para melhorar a experiência do usuário ao interagir com elementos da página.
3. Layouts e Componentes com Bootstrap
- Grid System: Utilização do sistema de grid do Bootstrap para criar layouts responsivos que se adaptam a diferentes resoluções.
- Navbars e Menus: Implementação de barras de navegação fixas e menus dropdown para facilitar a navegação.
- Cards e Painéis: Uso de componentes Bootstrap para organizar informações de forma clara e acessível.
Como Contribuir
Contribuições para melhorar a interface ou adicionar novas funcionalidades são bem-vindas! Sinta-se à vontade para clonar o repositório, fazer melhorias e enviar um pull request.
Como Executar
- Clone o repositório.
- Abra os arquivos
.html em um navegador web para visualizar as páginas.
- Explore os arquivos
.css e .js (se houver) para entender como o estilo e a funcionalidade foram implementados.
Requisitos
- Navegador Web Moderno: Para visualizar e interagir com as páginas web.
- Editor de Código: Recomenda-se o uso de um editor de código como VSCode, Sublime Text ou outro de sua preferência para editar o HTML, CSS e Bootstrap.
Este repositório documenta o desenvolvimento de uma interface web para o projeto FINTECH, realizado como parte de um trabalho acadêmico para a FIAP em 2023, utilizando HTML, CSS e Bootstrap para criar uma experiência de usuário intuitiva e responsiva.