O documento fornece orientações sobre fundamentos de design para web, como: 1) focar no usuário e na usabilidade; 2) dar destaque ao conteúdo; 3) projetar para acessibilidade; 4) usar layouts responsivos. Também discute etapas do processo de criação como briefing, planejamento, arquitetura da informação e layout.
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
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
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
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
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.
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
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/
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.
39.
40.
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/
42.
43.
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/
45.
46.
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.
48.
49.
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.
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.