Skip to content

dissouza/devmarket

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

98 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Mini Ecommerce para Devs

Linguagens e Ferramentas utilizadas no Projeto:

HTML5 CSS3 JavaScript Adobe Photoshop Adobe Illustrator

O Objetivo deste projeto foi se aprofundar e aprimorar os conhecimentos em HTML, CSS e Javascript (Metodos, Arrays, local/sessionStorage)

  • Foi criada uma estrutura simples no HTML, para o menu e bloco de conteúdo
  • Usado o Javascript para manipulação de DOM, e inclusão dos produtos a partir de arrays, nas quais constam os produtos
  • Criado um visual moderno e responsivo com o CSS, utilizando majoritariamente do Flexbox
  • Uso do Photoshop para modificação/melhoria da imagens de forma sutil, e
  • Usado o Illustrator para criação/modificação das imagens, a partir de vetor e posteriormente convertidas em png
  • Uso de conceitos de Design para todo o site, como cores, e caracteres remetentes ao mundo/ramo de desenvolvimento

*Os valores dos produtos no site são apenas para fim de exibição, não são totalmente condizentes com os valores de produtos semelhantes aos reais*

sessionStorage - Neste projeto optei pelo uso do sessionStorage, como é um site pequeno, achei o metodo melhor para guardar as informações, pois assim que usuário fechar a página, os dados não continuam salvos, não há a necessidade de mantê-los salvos para uma visita posterior (neste caso)

Design & UI/UX

  • Utilizado a cor verde #33cc00 a fim de remeter a "código", quando pensamos em programação, os ramos são vastos, mas sempre que pensamos em código em sua maioria me vem em nossa mente esta cor, automaticamente nos remetemos a imagens de numeros binários, também é uma cor que remete a "tecnologia"
  • O branco e o preto foi utilizado como cores complementares, onde o verde se contrasta
  • O uso dos caracteres < /> antes e depois das palavras Produtos, e Carrinho, foi utilizado para dar a ideia de que fossem como tags, blocos, sessões, onde seus elementos "produtos" ou "itens do carrinho" fossem inseridos dentro dos mesmos
  • Incluido duas imagens para estados diferentes do carrinho, uma verde com o "!" na frente, caso haja itens no carrinho, e um em branco caso o carrinho esteja vazio

Layout Desktop:

Página de Produtos (Home)

destkop_devmarket

Página do Carrinho

destkop_devmarket_carrinho

Layout Mobile:

Produtos

Carrinho