Como criar layout para web

15
layouts p/web ? Como criar

description

Aprenda a seguir o seu workflow em qualquer projeto voltado para web como: site, aplicativo, blog, e-commerce e outros.

Transcript of Como criar layout para web

Page 1: Como criar layout para web

layouts p/web

?Como criar

Page 2: Como criar layout para web

ORGANIZE AS SUAS IDEIASPlaneje e organize muito bem o seu projeto antes de por a mão na massa.

CRIE UMA BANCO DE DADOS C/INSPIRAÇÕESBusque refêrencias de sites, imagens, vídeos, botões, menu, efeitos entre outros.

MONTE A GRID SYSTEMO segredo por trás de um site.Grid system responsivo ( desktop, tablet e smartphone )

INCORPORE E CRIE OS SEUS ARQUIVOS P/GRID SYSTEM. Imagens, icones, menu, videos, informações úteis e etc.

APÓS A CONCLUSÃOMostre a alguém antes do seu cliente.

QUAL PROFISSÃO VOCÊ QUER SEGUIR?No mercado de web existem três pro�ssionais. WEB DESIGN, WEB DEVELOPER e WEB MASTER.

ASSUNTOS

Page 3: Como criar layout para web

QUAL PROFISSÃO VOCÊ QUER SEGUIR? WEB DESIGN, WEB DEVELOPER e WEB MASTER.

Page 4: Como criar layout para web

WEB DESIGNA preocupação fundamental do web designer é agregar os conceitos de usabilidade com o planejamento da pessoa em destaque interface, garantindo que o usuário �nal atinja seus objetivosde forma agradável e intuitiva.

O web developer é um (Desenvolvedor de sistemas). Esse pro�sional trabalha diretamente com o código defuncionamento do site. O desenvolvimento web pode variar desde simples páginas estáticas a aplicações ricas, comércios eletrônicos ou redes sociais.

WEB DEVELOPER

Este é o pro�ssional que trabalha desenvolvendo websites, podendo ser um Web Designer (Desenvolvedor do Layout),ou Web Developer (Desenvolvedor de sistemas).

WEB MASTER

SEOSearch Engine OptimizationÉ o pro�ssional que fara o seu site aparecer em destaque nos principais motores de busca, como o Google, Yahoo, Bing, etc.

Page 5: Como criar layout para web

ORGANIZE AS SUAS IDEIAS PLANEJE E ORGAZINE O SEU PROJETO E SUAS IDEIAS ANTES DE POR A MÃO NA MASSA.

Page 6: Como criar layout para web

PLANEJE Durante o desenvolvimento de um site, evite surpresas!Faça um MAPA MENTAL, MAPA DO SITE e um GERENCIADOR DE PROJETO POR ETAPAS.

ORGANIZE OS SEUS ARQUIVOS IMAGENS, TEXTOS, VÍDEOS, ICONES, PREÇOS, CRIAÇÕES, INFORMAÇÕES IMPORTANTES.

Page 7: Como criar layout para web

CRIE UMA BANCO DE DADOS C/INSPIRAÇÕESBusque refêrencias de sites, imagens, vídeos, botões, menu, efeitos entre outros.

Page 8: Como criar layout para web

BUSQUE MUITA REF. E INSPIRAÇÕES. IMAGENS, TEXTOS, VÍDEOS, ICONES, PREÇOS, CRIAÇÕES, INFORMAÇÕES IMPORTANTES.

http://themeforest.net/http://www.siteparaempresas.com.br/http://chocoladesign.com/http://www.designerd.com.br/http://www.ladodesign.com.br/categoria/inspiracao/http://br.freepik.com/http://www.shutterstock.com/pt/http://videohive.net/

Page 9: Como criar layout para web

MONTE A GRID SYSTEMO segredo por trás de um site.DICA: Grid system responsivo ( desktop, tablet e smartphone )

Page 10: Como criar layout para web

GRID SYSTEMO grif sistem, vai ajudar o seu site a se tornar mais agradavel em ajustes, alinhamento,proporção e organização de conteudo.

DICA: também deve ser pensado de forma RESPONSIVA ( desktop, tablet e smartphone )

Page 11: Como criar layout para web

INCORPORE E CRIE OS SEUS ARQUIVOS P/GRID SYSTEM.Imagens, icones, menu, videos, informações úteis e etc.

Page 12: Como criar layout para web

INCORPORE E CRIE OS SEUS ARQUIVOS P/GRID SYSTEM.Imagens, icones, menu, videos, informações úteis e etc.

Page 13: Como criar layout para web

APÓS A CONCLUSÃOMostre a alguém antes do seu cliente.

Page 14: Como criar layout para web

#01 Siga as regras...sempre!

Na faculdade de design vão te passar uma lista de princípios básicos para respeitar como ordem e simetria, para atribuir belos elementos em seu layout. Com o passar do tempo, você vai evoluir e aprender alguns truques novos como variedade, tensão ou contraste, e poderá quebrar um pouco as regras. Mas só um pouco! ;-)

#02 Use imagens e ícones sempre que possível.

Existem ícones que os internautas reconhecem com muita facilidade, como a lupa (pesquisar), casinha (ir para página inicial, home) e disquete (salvar). São como os sinais de trânsito para os motoristas. Use isso a seu favor.

#03 Use cor como função, não apenas como decoração.

Usar as cores certas faz toda a diferença, ainda mais agora que os monitores, smartphones e tab-lets estão com telas melhores. E continuam evoluindo. É uma etapa muito importante do proje-to, ela ajuda o usuário a entender melhor onde ele deve ir para fazer o que quer em seu site. Exemplo: Verde para seguir em frente e vermelho para cancelar.

#04 Use fontes que dão suporte ao conteúdo.

Há, literalmente, milhares e milhares de fontes para escolher. Você pode brincar e se divertir nesta etapa, mas com responsabilidade. Lembre-se que é indicado usar no máximo até 3 tipos de fontes diferentes em seu projeto.

#05 Peça ajuda de outras pessoas!

Beleza, agora você tem seus elementos básicos de design, as imagens e ícones perfeitos, as cores mais funcionais do mundo e as fontes mais legíveis. E agora?

Agora é hora de ouvir a opinião alheia. Isso mesmo! Você pode colher ideias de pessoas ale-atórias e de pessoas que são do ramo, como designers e programadores.

Isso poderá levar o seu projeto do nível "bom" para o "excelente". Existem comunidades online que poderão ajudá-lo bastante com isso, como o Behance, onde outros pro�ssionais vêem seu trabalhos em progresso e dão sugestões de como melhorá-lo.

Fundamentos que todo web designer precisa conhecer

Page 15: Como criar layout para web

(71) 9300-7059www.nuvemdeideias.com.br

[email protected]@saga.art.br