Workshop layout-pdf-141204083507-conversion-gate02

308 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
308
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

×