ÍTALO WAXMAN
DESIGNER / FRONT-ENDER
“DESIGN É FUNÇÃO, NÃO FORMA.
Steve Jobs
WEB DESIGNER
DESIGNER GRÁFICO
ONLINE / RGB / PIXELS
OFFLINE / CMYK / CENTÍMETROS
VS
O QUE É INTERNET E O QUE É WEB?
FUDAMENTOS
DE CRIAÇÃO PARAWEB
1. DESIGN CENTRADO NO USUÁRIO
AFINAL ELE QUE FARÁ USO DA EXPERIÊNCIA QUE PROJETAMOS
2. CONTEÚDO SEMPRE EM DESTAQUE
O DESIGN DEVE SER PENSADO PARA FACILITAR A ASSIMILAÇÃO DO CONTEÚDO
3. PROJETO ACESSÍVEL POR TODOS
PROJETEMOS SEMPRE PENSANDO NA PREMISSA DE UMA “WEB ACESSÍVEL”
4. LAYOUTS SEMPRE RESPONSIVOS
COM O CRESCIMENTO DE GADGETS MOBILE NÃO PODEMOS ESQUECÊ-LOS
5. USE AS CORES COMO FUNÇÃO
AS CORES NA WEB REPRESENTAM FUNÇÕES QUE FACILITAM PARA O USER
6. USE ÍCONES SEMPRE QUE POSSÍVEL
ÍCONES NA WEB SÃO COMO SINAIS DE TRÂNSITO PARA OS MOTORISTAS
7. ESCOLHA DA TIPOGRAFIA CORRETA
PREFIRA AS COM MELHOR LEGIBILIDADE E DISTINÇÃO DE CARACTERES
8. PEÇA OPINIÃO DE OUTRAS PESSOAS
NINGUÉM MELHOR PARA VALIDAR NOSSO PROJETO DO QUE OS USUÁRIOS FINAIS
ETAPAS DE CRIAÇÃO
DE UM PROJETO PARAWEB
BRIEFING DO PROJETO
PLANEJAMENTO EM EQUIPE
ARQUITETURA DE INFORMAÇÃO
LAYOUT DO PROJETO
01 LEVANTAMOS DE INFORMAÇÕES, MATER...
BRIEFANDO
NOSSO PROJETO
OBJETIVOS DO PROJETO
PÚBLICO ALVO A SER ATINGIDO
MATERIAL DISPONÍVEL
CONCEITO PRÉ-DEFINIDO?
01 O QUE BUSCA? ESTRATÉGIAS? P...
PLANEJAMENTO
JUNTO A EQUIPE DO PROJETO
TRABALHO EM EQUIPE
EXCELENTE COMUNICAÇÃO
LIMITAÇÕES DA EQUIPE
TECNOLOGIAS UTILIZADAS
01 DIFICILMENTE VOCÊ SERÁ UM PROFISSI...
ARQUITETANDO
INFORMAÇÕES DO PROJETO
DEFINIÇÃO DA RESOLUÇÃO
DEFINIÇÃO DO GRID
VIEWPOINT PRIMÁRIO
PLANEJAMENTO DA EXPERIÊNCIA
01 QUAL RESOLUÇÃO NOSSO PROJETO IR...
APÓS ESSAS ETAPAS
#PARTIU LAYOUT
ENTENDENDO
A ESTRUTURA DO LAYOUT
1. ESCOLHA DO SOFTWARE DE CRIAÇÃO
ESCOLHA AQUELE QUE VOCÊ TEM MAIS FAMILIARIDADE E TE PROPORCIONA OS
RECURSOS DESEJADOS. S...
2. RESOLUÇÃO DE CONSTRUÇÃO
COM A EVOLUÇÃO DOS MONITORES E TELAS, CADA VEZ TEMOS RESOLUÇÕES
MAIORES. PESQUISAS MOSTRAM QUE ...
2048x1536px
Ipad Mini Tela Retina
1280x800px
MacBook Pro 13pol
RESOLUÇÃO DE TELA
TAMANHO DE TELA
diferente de
UTILIZEMOS COMO PADRÃO
1024X768PX
3. CONSTRUÇÃO COM GRID
APÓS DEFINIRMOS A RESOLUÇÃO QUE SERÁ FOCO NO PROJETO, SELECIONAMOS
O GRID COMPATÍVEL COM ESSA RESOL...
GRID BOOTSTRAP - 940PX
12 COLUNAS
gutter - 20px
column - 60px
container - 940px
screen resolution - 1024px
LOGO MENU
DESTAQUE
INFO 02INFO 01 INFO 03
RODAPÉ
4. USABILIDADE DO PROJETO
PENSE SIMPLES, SE PONHA NO LUGAR DO USUÁRIO E TENTE PROJETAR A
EXPERIÊNCIA MAIS SIMPLES E DIRETA...
5. BUSQUE REFERÊNCIAS
É MUITO IMPORTANTE BUSCARMOS REFERÊNCIAS, ASSIM CONSEGUIRMOS
ABSORVER ESTRUTURA, DETALHES, CRIAÇÃO T...
INICIANDO
O PROCESSO DE CRIAÇÃO
1. MENOS É MAIS
O DESIGN DEVE SER SIMPLES, LIMPO, DIRETO E PLANEJADO DE FORMA QUE
FACILITE A ASSIMILAÇÃO E ENTENDIMENTO DO...
2. ESCOLHA BEM AS CORES
A ESCOLHA DE UMA PALHETA DE CORES CORRETA PARA O SEU PROJETO
É ALGO MUITO IMPORTANTE PARA O RESULT...
3. USE A TIPOGRAFIA A SEU FAVOR
SE USADA DE FORMA CORRETA E FOR BEM SELECIONADA, O USO DE TIPOGRAFIAS
NO PROJETO PODE TRAZ...
4. ESTRUTURAÇÃO INTUITIVA
SEMPRE ORGANIZE O CONTEÚDO DE SEU SITE DE FORMA INTUITIVA
PARA QUE O USUÁRIO TENHA A MAIOR FACIL...
5. ABUSE DA CRIATIVIDADE
RESPEITANDO AS REGRAS EXISTENTES, VOCÊ PODE FAZER TUDO AQUILO QUE
IMAGINAR. QUANDO POSSÍVEL PENSE...
SUPER SEGREDOS
PARA MELHORAR SEU LAYOUT
1. EVITE UTILIZAR IMAGENS EM EXCESSO
IMAGENS EMBELEZAM BASTANTE NOSSO LAYOUT, PORÉM TEMOS QUE DOSAR
A UTILIZAÇÃO DELAS PAR...
2. CUIDADO COM CORES “VIBRANTES”
COMO O SUPORTE DE VISUALIZAÇÃO DA WEB É O MONITOR, O MESMO EMITE
LUZ E SE TIVERMOS CORES ...
3. ATENTE-SE AO TAMANHO DA FONTE
É MUITO IMPORTANTE A ATENÇÃO NESSE QUESITO, A LEITURA DO CONTEÚDO
DEVE SER LINEAR E NATUR...
4. ORGANIZAÇÃO SEMPRE
COMO TUDO NA VIDA, A ORGANIZAÇÃO DO NOSSO LAYOUT, DAS CAMADAS E DAS
IMAGENS É DE FUNDAMENTAL IMPORTÂ...
5. OBSERVE, MAS NÃO COPIE
UMA COISA QUE DEVE SEMPRE TER EM MENTE É NÃO QUEBRAR OS DIREITOS
AUTORAIS DE NINGUÉM. VOCÊ PODE ...
6. SEMPRE FAÇA COM AMOR
NÃO DEIXE QUE PENSAMENTOS COMO “OPA! SOU UM GRANDE WEBDESIGNER” OU
“QUANTO EU VOU GANHAR COM ISSO?...
7. A PRÁTICA LEVA A PERFEIÇÃO
NÃO TENHA PRESSA EM SER O MELHOR, O TEMPO E EXPERIÊNCIA FARÃO ISSO
DE FORMA NATURAL. PRATIQU...
DÚVIDAS?
SEM VERGONHA POR FAVOR
OBRIGADO PELA ATENÇÃO!
/ITALOWAXMAN
CHEGOU A HORA!
VAMOS METER A MÃO NA MASSA
Workshop layout-pdf-141204083507-conversion-gate02
Workshop layout-pdf-141204083507-conversion-gate02
Workshop layout-pdf-141204083507-conversion-gate02
Workshop layout-pdf-141204083507-conversion-gate02
Workshop layout-pdf-141204083507-conversion-gate02
Workshop layout-pdf-141204083507-conversion-gate02
Workshop layout-pdf-141204083507-conversion-gate02
Workshop layout-pdf-141204083507-conversion-gate02
Workshop layout-pdf-141204083507-conversion-gate02
Workshop layout-pdf-141204083507-conversion-gate02
Workshop layout-pdf-141204083507-conversion-gate02
Próximos SlideShares
Carregando em…5
×

Workshop layout-pdf-141204083507-conversion-gate02

288 visualizações

Publicada em

Workshop layout-

Publicada em: Design
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
288
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
3
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Workshop layout-pdf-141204083507-conversion-gate02

  1. 1. ÍTALO WAXMAN DESIGNER / FRONT-ENDER
  2. 2. “DESIGN É FUNÇÃO, NÃO FORMA. Steve Jobs
  3. 3. WEB DESIGNER DESIGNER GRÁFICO ONLINE / RGB / PIXELS OFFLINE / CMYK / CENTÍMETROS VS
  4. 4. O QUE É INTERNET E O QUE É WEB?
  5. 5. FUDAMENTOS DE CRIAÇÃO PARAWEB
  6. 6. 1. DESIGN CENTRADO NO USUÁRIO AFINAL ELE QUE FARÁ USO DA EXPERIÊNCIA QUE PROJETAMOS
  7. 7. 2. CONTEÚDO SEMPRE EM DESTAQUE O DESIGN DEVE SER PENSADO PARA FACILITAR A ASSIMILAÇÃO DO CONTEÚDO
  8. 8. 3. PROJETO ACESSÍVEL POR TODOS PROJETEMOS SEMPRE PENSANDO NA PREMISSA DE UMA “WEB ACESSÍVEL”
  9. 9. 4. LAYOUTS SEMPRE RESPONSIVOS COM O CRESCIMENTO DE GADGETS MOBILE NÃO PODEMOS ESQUECÊ-LOS
  10. 10. 5. USE AS CORES COMO FUNÇÃO AS CORES NA WEB REPRESENTAM FUNÇÕES QUE FACILITAM PARA O USER
  11. 11. 6. USE ÍCONES SEMPRE QUE POSSÍVEL ÍCONES NA WEB SÃO COMO SINAIS DE TRÂNSITO PARA OS MOTORISTAS
  12. 12. 7. ESCOLHA DA TIPOGRAFIA CORRETA PREFIRA AS COM MELHOR LEGIBILIDADE E DISTINÇÃO DE CARACTERES
  13. 13. 8. PEÇA OPINIÃO DE OUTRAS PESSOAS NINGUÉM MELHOR PARA VALIDAR NOSSO PROJETO DO QUE OS USUÁRIOS FINAIS
  14. 14. ETAPAS DE CRIAÇÃO DE UM PROJETO PARAWEB
  15. 15. BRIEFING DO PROJETO PLANEJAMENTO EM EQUIPE ARQUITETURA DE INFORMAÇÃO LAYOUT DO PROJETO 01 LEVANTAMOS DE INFORMAÇÕES, MATERIAIS E OBJETIVOS DO PROJETO PRAZO, LIMITAÇÕES, TECNOLOGIAS UTILIZADAS E EXCELENTE COMUNICAÇÃO 02 03 04 DEFINIÇÃO DO WIREFRAME, RESOLUÇÃO, GRID E FUNCIONALIDADES DO PROJETO PROPOSTA VISUAL FUNDAMENTADA A PARTIR DE TODO O PLANEJAMENTO
  16. 16. BRIEFANDO NOSSO PROJETO
  17. 17. OBJETIVOS DO PROJETO PÚBLICO ALVO A SER ATINGIDO MATERIAL DISPONÍVEL CONCEITO PRÉ-DEFINIDO? 01 O QUE BUSCA? ESTRATÉGIAS? PRAZO? CONCORRENTES? FOCO MOBILE? QUEM ATINGIREMOS? QUAL PARCELA DO PÚBLICO? SEGMENTAÇÃO POR CLASSES? 02 03 04 O QUE TEMOS DISPONÍVEL? LOGO? CAMPANHA? CONTEÚDO? ALGUMA AGÊNCIA? EXISTE ALGUMA IDEIA? ALGUM CONCEITO? JÁ EXISTE? CONCORRENTES? OUTRAS INFORMAÇÕES DESTAQUES? PONTOS FORTES? PONTOS FRACOS? GERENCIAMENTO? ETC… 05
  18. 18. PLANEJAMENTO JUNTO A EQUIPE DO PROJETO
  19. 19. TRABALHO EM EQUIPE EXCELENTE COMUNICAÇÃO LIMITAÇÕES DA EQUIPE TECNOLOGIAS UTILIZADAS 01 DIFICILMENTE VOCÊ SERÁ UM PROFISSIONAL “FULL STACK” COMUNIQUE-SE BEM, EXPONHA E DEFENDA IDEIAS E OUÇA BASTANTE 02 03 04 É DE SUMA IMPORTÂNCIA ESSA NOÇÃO, SERA REFLEXO DIRETO DO PROJETO O QUE USAREMOS PARA TAL RECURSO? DENTRE AS LIMITAÇÕES QUAL A MELHOR? PRAZO INTERNO QUANDO FINALIZAREMOS CADA ETAPA? TUDO TESTADO? FUNCIONANDO 100%? 05
  20. 20. ARQUITETANDO INFORMAÇÕES DO PROJETO
  21. 21. DEFINIÇÃO DA RESOLUÇÃO DEFINIÇÃO DO GRID VIEWPOINT PRIMÁRIO PLANEJAMENTO DA EXPERIÊNCIA 01 QUAL RESOLUÇÃO NOSSO PROJETO IRÁ UTILIZAR? 1024X768? 1280X1024? QUANTAS COLUNAS TERÁ NOSSO GRID? UTILIZAREMOS FRAMEWORK? 02 03 04 O QUE ESTARÁ PRESENTE NA NOSSA ÁREA MAIS QUENTE DO SITE? COMO SERÁ A NAVEGAÇÃO NO NOSSO PROJETO? QUAL EXPERIÊNCIA O USER TERÁ? DESENHO DO WIREFRAME TOMADAS AS DECISÕES NECESSÁRIAS, VAMOS AO ESBOÇO DA ESTRUTURA 05
  22. 22. APÓS ESSAS ETAPAS #PARTIU LAYOUT
  23. 23. ENTENDENDO A ESTRUTURA DO LAYOUT
  24. 24. 1. ESCOLHA DO SOFTWARE DE CRIAÇÃO ESCOLHA AQUELE QUE VOCÊ TEM MAIS FAMILIARIDADE E TE PROPORCIONA OS RECURSOS DESEJADOS. SOFTWARE JAMAIS FARÁ O SEU TRABALHO, DESAPEGUE POIS A MENTE PENSANTE POR TRÁS DELE QUE O CONTROLA.
  25. 25. 2. RESOLUÇÃO DE CONSTRUÇÃO COM A EVOLUÇÃO DOS MONITORES E TELAS, CADA VEZ TEMOS RESOLUÇÕES MAIORES. PESQUISAS MOSTRAM QUE MAIS DE 67% DOS USUÁRIOS ATUAIS POSSUEM RESOLUÇÃO IGUAL OU SUPERIOR A 1024x768px.
  26. 26. 2048x1536px Ipad Mini Tela Retina
  27. 27. 1280x800px MacBook Pro 13pol
  28. 28. RESOLUÇÃO DE TELA TAMANHO DE TELA diferente de
  29. 29. UTILIZEMOS COMO PADRÃO 1024X768PX
  30. 30. 3. CONSTRUÇÃO COM GRID APÓS DEFINIRMOS A RESOLUÇÃO QUE SERÁ FOCO NO PROJETO, SELECIONAMOS O GRID COMPATÍVEL COM ESSA RESOLUÇÃO. HTTP://TABLELESS.COM.BR/DESIGN-RESPONSIVO-NA-PRATICA-DO-RASCUNHO-AO-DIGITA/ HTTP://PT.SLIDESHARE.NET/EDUARDOBRANDAO/A-IMPORTNCIA-DO-GRID-PARA-O-DESIGN-DE-INTERFACES-WEB
  31. 31. GRID BOOTSTRAP - 940PX 12 COLUNAS
  32. 32. gutter - 20px column - 60px container - 940px screen resolution - 1024px
  33. 33. LOGO MENU DESTAQUE INFO 02INFO 01 INFO 03 RODAPÉ
  34. 34. 4. USABILIDADE DO PROJETO PENSE SIMPLES, SE PONHA NO LUGAR DO USUÁRIO E TENTE PROJETAR A EXPERIÊNCIA MAIS SIMPLES E DIRETA POSSÍVEL FAZENDO COM QUE ELE NÃO PRECISE PENSAR MUITO TORNANDO AQUELE MOMENTO AGRADÁVEL E INTUITIVO. HTTP://VIVERDEBLOG.COM/18-PROBLEMAS-USABILIDADE/ HTTP://WWW.DEVMEDIA.COM.BR/USABILIDADE-NA-WEB/24737 HTTP://PT.SLIDESHARE.NET/MASVIANNA/DESIGN-E-USABILIDADE-NA-WEB
  35. 35. 5. BUSQUE REFERÊNCIAS É MUITO IMPORTANTE BUSCARMOS REFERÊNCIAS, ASSIM CONSEGUIRMOS ABSORVER ESTRUTURA, DETALHES, CRIAÇÃO TRAZENDO AQUELA INSPIRAÇÃO QUE PRECISAMOS PARA INICIAR A PARTE CRIATIVA. HTTP://WEBCREME.COM/ HTTP://WWW.BEHANCE.NET/ HTTPS://DRIBBBLE.COM/
  36. 36. INICIANDO O PROCESSO DE CRIAÇÃO
  37. 37. 1. MENOS É MAIS O DESIGN DEVE SER SIMPLES, LIMPO, DIRETO E PLANEJADO DE FORMA QUE FACILITE A ASSIMILAÇÃO E ENTENDIMENTO DO CONTEÚDO.
  38. 38. 2. ESCOLHA BEM AS CORES A ESCOLHA DE UMA PALHETA DE CORES CORRETA PARA O SEU PROJETO É ALGO MUITO IMPORTANTE PARA O RESULTADO FINAL. USE TAMBÉM AS CORES COMO AÇÃO E SE BASEIE INCIALMENTE NO LOGO DO PROJETO. HTTP://WWW.COLOURLOVERS.COM/PALETTES HTTP://DESIGN-SEEDS.COM/ HTTP://COLOR.ADOBE.COM/PT/CREATE/COLOR-WHEEL/
  39. 39. 3. USE A TIPOGRAFIA A SEU FAVOR SE USADA DE FORMA CORRETA E FOR BEM SELECIONADA, O USO DE TIPOGRAFIAS NO PROJETO PODE TRAZER UMA PERSONALIDADE ÚNICA E GERAR UMA EXPERIÊNCIA POSITIVA. HTTP://WWW.FONTSQUIRREL.COM/ HTTP://FONTFABRIC.COM/CATEGORY/FREE/ HTTP://WWW.DAFONT.COM/PT/
  40. 40. 4. ESTRUTURAÇÃO INTUITIVA SEMPRE ORGANIZE O CONTEÚDO DE SEU SITE DE FORMA INTUITIVA PARA QUE O USUÁRIO TENHA A MAIOR FACILIDADE POSSÍVEL DE ENTENDÊ-LO, LOCALIZAR-SE E ATÉ MESMO COMPARTILHA-LO.
  41. 41. 5. ABUSE DA CRIATIVIDADE RESPEITANDO AS REGRAS EXISTENTES, VOCÊ PODE FAZER TUDO AQUILO QUE IMAGINAR. QUANDO POSSÍVEL PENSE “FORA DA CAIXA” E USE ISSO EM SEU PROJETO. LEMBRE-SE DE TER CAUTELA PARA NÃO CANSAR DEMAIS O USER.
  42. 42. SUPER SEGREDOS PARA MELHORAR SEU LAYOUT
  43. 43. 1. EVITE UTILIZAR IMAGENS EM EXCESSO IMAGENS EMBELEZAM BASTANTE NOSSO LAYOUT, PORÉM TEMOS QUE DOSAR A UTILIZAÇÃO DELAS PARA EVITARMOS QUE NO FINAL O CARREGAMENTO DO NOSSO SITE FIQUE MUITO LENTO. ISSO É A PIOR COISA NA WEB.
  44. 44. 2. CUIDADO COM CORES “VIBRANTES” COMO O SUPORTE DE VISUALIZAÇÃO DA WEB É O MONITOR, O MESMO EMITE LUZ E SE TIVERMOS CORES VIBRANTES DEMAIS, ISSO CANSA A VISTA USUÁRIO FAZENDO-O DESISTIR DE CONTINUAR NO SITE. OPTE PELAS TONALIDADES PASTEIS.
  45. 45. 3. ATENTE-SE AO TAMANHO DA FONTE É MUITO IMPORTANTE A ATENÇÃO NESSE QUESITO, A LEITURA DO CONTEÚDO DEVE SER LINEAR E NATURAL, SE UTILIZARMOS FONTES PEQUENAS DEMAIS CANSAMOS NOSSO USUÁRIO. O IDEAL É UTILIZAR ALGO EM TORNO DE 14PX A 16PX A DEPENDER DO PROJETO. PARA OS TÍTULOS USEMOS UM TAMANHO MAIOR VISANDO IDENTIFICÁ-LO.
  46. 46. 4. ORGANIZAÇÃO SEMPRE COMO TUDO NA VIDA, A ORGANIZAÇÃO DO NOSSO LAYOUT, DAS CAMADAS E DAS IMAGENS É DE FUNDAMENTAL IMPORTÂNCIA PARA QUE O PRÓXIMO PROFISSIONAL CONSIGA IDENTIFICAR FACILMENTE OS ELEMENTOS DO LAYOUT. SEMPRE PENSEMOS COMO EQUIPE.
  47. 47. 5. OBSERVE, MAS NÃO COPIE UMA COISA QUE DEVE SEMPRE TER EM MENTE É NÃO QUEBRAR OS DIREITOS AUTORAIS DE NINGUÉM. VOCÊ PODE USAR UM TRABALHO COMO INSPIRAÇÃO, INCORPORAR ALGUNS ELEMENTOS GERAIS DE UM SITE, MAS DEVE COLOCAR “UM DEDO” SEU NA CRIAÇÃO, E NÃO SIMPLESMENTE COPIA-LO.
  48. 48. 6. SEMPRE FAÇA COM AMOR NÃO DEIXE QUE PENSAMENTOS COMO “OPA! SOU UM GRANDE WEBDESIGNER” OU “QUANTO EU VOU GANHAR COM ISSO?” E “O QUE EU VOU FAZER COM ISSO?” FIQUEM TE MARTELANDO. AME O SEU TRABALHO, POIS ISSO É O QUE VOCÊ GOSTA DE FAZER E O QUE TE TRAZ FELICIDADE. O RESTO É APENAS CONSEQÜÊNCIA.
  49. 49. 7. A PRÁTICA LEVA A PERFEIÇÃO NÃO TENHA PRESSA EM SER O MELHOR, O TEMPO E EXPERIÊNCIA FARÃO ISSO DE FORMA NATURAL. PRATIQUE, APRENDA COM SEUS ERROS, SE PERGUNTE SEMPRE ONDE POSSO MELHORAR? E SIGA EM FRENTE, POIS O SUCESSO É RESULTADO DESSAS ATITUDES.
  50. 50. DÚVIDAS? SEM VERGONHA POR FAVOR
  51. 51. OBRIGADO PELA ATENÇÃO! /ITALOWAXMAN
  52. 52. CHEGOU A HORA! VAMOS METER A MÃO NA MASSA

×