Tudo o que você precisa saber sobre layouts para web

Í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