O documento fornece diretrizes e etapas para criação de projetos web. Em 3 frases: 1) Apresenta 8 fundamentos para criação web centrados no usuário, como design responsivo e acessível, além de usar cores e ícones de forma funcional. 2) Detalha 5 etapas iniciais de um projeto: briefing, planejamento, arquitetura de informação, wireframe e layout. 3) Fornece dicas para criação do layout, como escolha de software e grid, além de enfatizar a importância da usabilidade,

2. ÍTALO WAXMAN
DESIGNER / FRONT-ENDER

3. “DESIGN É FUNÇÃO, NÃO FORMA.
Steve Jobs

4. WEB DESIGNER
DESIGNER GRÁFICO
ONLINE / RGB / PIXELS
OFFLINE / CMYK / CENTÍMETROS
VS

5. O QUE É INTERNET E O QUE É WEB?

6. FUDAMENTOS
DE CRIAÇÃO PARAWEB

7. 1. DESIGN CENTRADO NO USUÁRIO
AFINAL ELE QUE FARÁ USO DA EXPERIÊNCIA QUE PROJETAMOS

8. 2. CONTEÚDO SEMPRE EM DESTAQUE
O DESIGN DEVE SER PENSADO PARA FACILITAR A ASSIMILAÇÃO DO CONTEÚDO

9. 3. PROJETO ACESSÍVEL POR TODOS
PROJETEMOS SEMPRE PENSANDO NA PREMISSA DE UMA “WEB ACESSÍVEL”

10. 4. LAYOUTS SEMPRE RESPONSIVOS
COM O CRESCIMENTO DE GADGETS MOBILE NÃO PODEMOS ESQUECÊ-LOS

11. 5. USE AS CORES COMO FUNÇÃO
AS CORES NA WEB REPRESENTAM FUNÇÕES QUE FACILITAM PARA O USER

12. 6. USE ÍCONES SEMPRE QUE POSSÍVEL
ÍCONES NA WEB SÃO COMO SINAIS DE TRÂNSITO PARA OS MOTORISTAS

13. 7. ESCOLHA DA TIPOGRAFIA CORRETA
PREFIRA AS COM MELHOR LEGIBILIDADE E DISTINÇÃO DE CARACTERES

14. 8. PEÇA OPINIÃO DE OUTRAS PESSOAS
NINGUÉM MELHOR PARA VALIDAR NOSSO PROJETO DO QUE OS USUÁRIOS FINAIS

15. ETAPAS DE CRIAÇÃO
DE UM PROJETO PARAWEB

16. 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

17. BRIEFANDO
NOSSO PROJETO

18. 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

19. PLANEJAMENTO
JUNTO A EQUIPE DO PROJETO

20. 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

21. ARQUITETANDO
INFORMAÇÕES DO PROJETO

22. 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

23. APÓS ESSAS ETAPAS
#PARTIU LAYOUT

24. ENTENDENDO
A ESTRUTURA DO LAYOUT

25. 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.

26. 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.

27. 2048x1536px
Ipad Mini Tela Retina

28. 1280x800px
MacBook Pro 13pol

29. RESOLUÇÃO DE TELA
TAMANHO DE TELA
diferente de

30. UTILIZEMOS COMO PADRÃO
1024X768PX

31. 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

32. GRID BOOTSTRAP - 940PX
12 COLUNAS

33. gutter - 20px
column - 60px
container - 940px
screen resolution - 1024px

34. LOGO MENU
DESTAQUE
INFO 02INFO 01 INFO 03
RODAPÉ

35. 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

36. 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/

37. INICIANDO
O PROCESSO DE CRIAÇÃO

38. 1. MENOS É MAIS
O DESIGN DEVE SER SIMPLES, LIMPO, DIRETO E PLANEJADO DE FORMA QUE
FACILITE A ASSIMILAÇÃO E ENTENDIMENTO DO CONTEÚDO.

41. 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/

44. 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/

47. 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.

50. 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.

53. SUPER SEGREDOS
PARA MELHORAR SEU LAYOUT

54. 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.

55. 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.

56. 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.

57. 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.

58. 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.

59. 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.

60. 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.

61. DÚVIDAS?
SEM VERGONHA POR FAVOR

62. OBRIGADO PELA ATENÇÃO!
/ITALOWAXMAN

63. CHEGOU A HORA!
VAMOS METER A MÃO NA MASSA