Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

HACK DESIGN | Comp Júnior

No description
by

Igor Lacerdino

on 1 March 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of HACK DESIGN | Comp Júnior

HACK DESIGN
IGOR LACERDINO
FLAT
É uma filosofia de design…
…que defende uma simplicidade, clareza e honestidade de materiais em interfaces de usuário…
Deixar estilo de lado pela funcionalidade.
se livrando de bordas, gradientes, sombras e reflexos.
SKEUMORFISMO
Truques visuais, ou uso de talhes e ornamentações para fazer uma coisa parecer como outra
No design de interface de usuário geralmente se refere a um elemento digital projetado para parecer como algo do mundo físico.
O QUE É BOM PRA MIM
PODE NÃO SER BOM PARA VOCÊ
MAS O QUE É BOM PARA O MERCADO
DEVE SER SUFICIENTE PARA AMBOS!
http://flatuicolors.com/
http://coolors.co/app
http://www.colourlovers.com/
http://google.com/fonts
http://www.pinterest.com
http://www.dribbble.com
http://www.behance.com
http://www.typegenius.com/
http://bootflat.github.io/
http://bootflat.github.io/color-picker.html
http://designmodo.github.io/Flat-UI/
http://tympanus.net/codrops/
http://www.google.com/design/spec/style/color.html#color-color-palette
http://thenounproject.com/
http://www.flaticon.com/
x
http://materializecss.com/
http://fezvrasta.github.io/bootstrap-material-design/
TIPOGRAFIA
Alinhamento:
Evite alinhamento centralizado em textos longos. O excesso de espaço branco nas laterais tende a fazer a pessoa se perder. Opte por textos alinhados a esquerda, sem justificativa.
Contraste:

Nunca utilize tipo claro em fundo claro, ou tipo escuro em fundo escuro. Opte sempre pelo contraste.
Texto é para ser lido!
Use apenas uma categoria de fonte:
Se você fizer um texto todo com uma fonte serifada, utilize apenas fontes serifadas no resto do texto.
Se for mudar de fonte, deixe óbvio a mudança.
PRINCÍPIOS BÁSICOS
DE DESIGN
Alinhamento
Proximidade
Contraste
Repetição
http://design.blog.br/geral/quatro-principios-basicos-do-design
LINKS ÚTEIS:
CORES
IMAGENS
http://unsplash.com
http://imcreator.com/free
http://pixabay.com
http://superfamous.com
http://picjumbo.com
http://gratisography.com
http://morguefile.com
http://freeimages.com
http://littlevisuals.co
http://nos.twnsnd.co/
http://picography.co/
http://getrefe.tumblr.com/
http://jaymantri.com/
http://publicdomainarchive.com/
Bancos de Imagem Gratuitos
Nunca use imagens que não sejam suas em projetos sem ter o direito pra isto
Use bancos de imagem gratuitos: sites que disponibilizam imagem livres de direitos autorais que podem ser usadas onde você quiser, sem medo.
Existe uma diferença entre "free" ("grátis") e "royalty free" ("livre de direitos autorais").
ICONOGRAFIA
Um ícone é um signo visual que representa outro objeto por semelhança
Para utilizá-los de forma efetiva, temos que ficar atentos principalmente a ligação entre a sua forma e a ação que será executada por ele.
Quando falamos em um sistema ou site, ele não terá apenas uma ação, um link, um item a ser selecionado.
Ele estará acompanhado de um agrupamento de ícones no mesmo padrão, chamado de iconografia, que será especialmente projetada para ser identificada pelo usuário como parte daquele sistema.
LINKS ÚTEIS:
http://fortawesome.github.io/Font-Awesome/
http://fontello.com/
NADA SE CRIA
TUDO SE TRANSFORMA
Inspiração de design
Exemplos de código
front-end
FRAMEWORKS DE
DESIG
Obrigado!
HACK DESIGN
Full transcript