Este projeto é um redesign da landing page do HausBank, um banco digital focado em soluções financeiras para o setor imobiliário e serviços financeiros personalizados. O objetivo foi modernizar a interface e proporcionar uma experiência de usuário mais fluida e responsiva.
- React: Utilizado para construção de interfaces dinâmicas e modulares.
- TypeScript: Fornece tipagem estática, garantindo maior segurança e previsibilidade no código.
- TailwindCSS: Framework CSS utilitário, possibilitando a criação de designs responsivos de forma rápida e personalizável.
- Figma: Utilizado para o protótipo e a criação do design da interface.
- Photoshop & Illustrator: Ferramentas auxiliares para a criação e manipulação de elementos gráficos e visuais.
O processo começou com a criação do design no Figma, visando uma interface limpa e intuitiva. A ideia foi melhorar a experiência de navegação, mantendo a identidade visual do banco. Para a implementação, utilizei React e TypeScript para criar uma estrutura sólida e escalável. O uso de TailwindCSS permitiu criar uma interface totalmente responsiva, com um design adaptável a diferentes dispositivos.
Este projeto demonstra minhas competências tanto em Design quanto em Desenvolvimento Front-End. Ele reflete minha experiência em UX/UI Design, transformando ideias visuais em interfaces funcionais e eficientes, além de minha habilidade em programar e estruturar a parte técnica do projeto.
- Web Design & UX/UI: Criação de uma interface agradável, focada na experiência do usuário.
- Design Gráfico: Criação de elementos visuais que complementam a experiência do usuário.
- React & TypeScript: Criação de componentes reutilizáveis e gestão eficiente do estado da aplicação.
- TailwindCSS: Utilização de classes utilitárias para criar layouts flexíveis e responsivos, sem comprometer o design.
Para rodar o projeto localmente, siga os passos abaixo:
- Clone o repositório:
git clone https://github.com/andscunha/HausBank
- Acesse a pasta do projeto:
cd HausBank - Instale as dependências:
npm install
- Inicie o servidor de desenvolvimento:
npm run dev