Roadmap do Protótipo

data	versao	autor	mudanças feitas
30/09/2020	0.1	@guilhermedelyra	criação do documento

Opções:

www.evernote.design
www.awwwards.com
tympanus.net/codrops
dribbble.com
behance.net
Protótipo de Papel (10min)
Arquitetura de Informações e Flow
Wireframe cru (sem se preocupar com alinhamento, escala tipográfica, estrutura dos objetos etc)
Definir grid [1 linha a 15px da esquerda, 1 no meio, 1 a 15px da direita]
Definir escala tipográfica

Eis a escala proposta pelo sistema da Google Material:

Escolher tipografia
Escolher fonte principal [com base nas referencias visuais] - vai ser utilizada em elementos de destaque (e.g. titulos)
Escolher fonte secundária para os demais elementos tipográficos (corpo de texto, subtitulos, botoes, legendas e labels)

Onde buscar fontes tipográficas:

Referencias:

material.io/tools/
material.io/collections/color
colorsupplyyy.com/app
paletton.com
design-seeds.com/blog
Escolher cor principal [idealmente não muito clara nem escura, seria boa se utilizada num botão por ex]
- Gerar 5 a 10 variações claras e escuras desta mesma
Escolher cor de contraste/ênfase
- Contraste: botões importantes, labels e outras informações
- Estado de perigo: variações de vermelho para enfatizar ações de deletar ou confirmar ações destrutivas
- Estado de alerta: Variações de amarelo para mensagegns e ações que necessitem da atenção do usuário
- Estados positios: Variações de verde para confirmações e informações positivas (como aumento de porcentagens, valores, etc.)
Escolher cores de suporte (Preto: #373737, Cinza: #E8E8E8)
- Gerar 6 a 10 tons diferentes de cinza
Adicionar detalhes da interface
Adornos
Sombras
Linhas
Ícones