ÍTALO WAXMANDESIGNER / 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?
FUDAMENTOSDE CRIAÇÃO PARA WEB
1. DESIGN CENTRADO NO USUÁRIOAFINAL ELE QUE FARÁ USO DA EXPERIÊNCIA QUE PROJETAMOS
2. CONTEÚDO SEMPRE EM DESTAQUEO DESIGN DEVE SER PENSADO PARA FACILITAR A ASSIMILAÇÃO DO CONTEÚDO
3. PROJETO ACESSÍVEL POR TODOSPROJETEMOS SEMPRE PENSANDO NA PREMISSA DE UMA “WEB ACESSÍVEL”
4. LAYOUTS SEMPRE RESPONSIVOSCOM O CRESCIMENTO DE GADGETS MOBILE NÃO PODEMOS ESQUECÊ-LOS
5. USE AS CORES COMO FUNÇÃOAS 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 CORRETAPREFIRA AS COM MELHOR LEGIBILIDADE E DISTINÇÃO DE CARACTERES
8. PEÇA OPINIÃO DE OUTRAS PESSOASNINGUÉM MELHOR PARA VALIDAR NOSSO PROJETO DO QUE OS USUÁRIOS FINAIS
ETAPAS DE CRIAÇÃODE UM PROJETO PARA WEB
BRIEFING DO PROJETO
PLANEJAMENTO EM EQUIPE
ARQUITETURA DE INFORMAÇÃO
LAYOUT DO PROJETO
01LEVANTAMOS DE INFORMAÇÕES, MATERIAIS E OBJETIVOS DO PROJETO
PRAZO, LIMITAÇÕES, TECNOLOGIAS UTILIZADAS E EXCELENTE COMUNICAÇÃO02
03
04
DEFINIÇÃO DO WIREFRAME, RESOLUÇÃO, GRID E FUNCIONALIDADES DO PROJETO
PROPOSTA VISUAL FUNDAMENTADA A PARTIR DE TODO O PLANEJAMENTO
BRIEFANDONOSSO PROJETO
OBJETIVOS DO PROJETO
PÚBLICO ALVO A SER ATINGIDO
MATERIAL DISPONÍVEL
CONCEITO PRÉ-DEFINIDO?
01O 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ÇÕESDESTAQUES? PONTOS FORTES? PONTOS FRACOS? GERENCIAMENTO? ETC…
05
PLANEJAMENTOJUNTO A EQUIPE DO PROJETO
TRABALHO EM EQUIPE
EXCELENTE COMUNICAÇÃO
LIMITAÇÕES DA EQUIPE
TECNOLOGIAS UTILIZADAS
01DIFICILMENTE VOCÊ SERÁ UM PROFISSIONAL “FULL STACK”
COMUNIQUE-SE BEM, EXPONHA E DEFENDA IDEIAS E OUÇA BASTANTE02
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 INTERNOQUANDO FINALIZAREMOS CADA ETAPA? TUDO TESTADO? FUNCIONANDO 100%?
05
ARQUITETANDOINFORMAÇÕES DO PROJETO
DEFINIÇÃO DA RESOLUÇÃO
DEFINIÇÃO DO GRID
VIEWPOINT PRIMÁRIO
PLANEJAMENTO DA EXPERIÊNCIA
01QUAL 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 WIREFRAMETOMADAS AS DECISÕES NECESSÁRIAS, VAMOS AO ESBOÇO DA ESTRUTURA
05
APÓS ESSAS ETAPAS#PARTIU LAYOUT
ENTENDENDOA ESTRUTURA DO LAYOUT
1. ESCOLHA DO SOFTWARE DE CRIAÇÃOESCOLHA 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.
2. RESOLUÇÃO DE CONSTRUÇÃOCOM 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.
2048x1536px
Ipad Mini Tela Retina
1280x800px
MacBook Pro 13pol
RESOLUÇÃO DE TELATAMANHO DE TELA
diferente de
UTILIZEMOS COMO PADRÃO1024X768PX
3. CONSTRUÇÃO COM GRIDAPÓ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
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 PROJETOPENSE 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
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/
INICIANDOO PROCESSO DE CRIAÇÃO
1. MENOS É MAISO DESIGN DEVE SER SIMPLES, LIMPO, DIRETO E PLANEJADO DE FORMA QUE FACILITE A ASSIMILAÇÃO E ENTENDIMENTO DO CONTEÚDO.
2. ESCOLHA BEM AS CORESA 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/
3. USE A TIPOGRAFIA A SEU FAVORSE 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/
4. ESTRUTURAÇÃO INTUITIVASEMPRE 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.
5. ABUSE DA CRIATIVIDADERESPEITANDO 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.
SUPER SEGREDOSPARA MELHORAR SEU LAYOUT
1. EVITE UTILIZAR IMAGENS EM EXCESSOIMAGENS 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.
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.
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.
4. ORGANIZAÇÃO SEMPRECOMO 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.
5. OBSERVE, MAS NÃO COPIEUMA 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.
6. SEMPRE FAÇA COM AMORNÃ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.
7. A PRÁTICA LEVA A PERFEIÇÃONÃ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.
DÚVIDAS?SEM VERGONHA POR FAVOR
OBRIGADO PELA ATENÇÃO!/ITALOWAXMAN
CHEGOU A HORA!VAMOS METER A MÃO NA MASSA
Recommended