web design > visão geral do web design
DESCRIPTION
Aula 02 do curso de webdesign da praça do conhecimentoTRANSCRIPT
Web DesignTudo começa...
Web DesignTudo começa... Pelo começo!
Web DesignM-mas começa por onde?!
Web Design
Arquitetura da Informação!
Web DesignA Arquitetura da informação ('AI) é a arte de expressar um modelo ou conceito de informação utilizados em atividades que exigem detalhes explícitos de sistemas complexos.
Web Design...Ou seja, é planejar o que vem por aí!
Web DesignA Arquitetura da informação também cuida da usabilidade do projeto de website, bem como a definição do modelo de interação/relação entre as páginas.
Web DesignEm projeto de website a base da AI possui duas etapas:
Web DesignEm projeto de website a base da AI possui duas etapas:● Mapa do site
Web DesignEm projeto de website a base da AI possui duas etapas:● Mapa do site● Wireframe
Mapa do site< Arquitetura da informação />
Mapa do site < o que é? />
Nada mais é do que uma lista organizada de todas as páginas, ou as mais importantes, de um site. Basicamente, os mapas do site, são páginas que objetivam o usuário, caso ele não encontre o que esteja procurando, mas os mecanismos de busca (Google, Yahoo!, MSN) podem ver esta página como uma porta de entrada para todos as principais, ou a totalidade, das páginas contidas no website.(fonte: MestreSEO)
Mapa do site < exemplos />
Mapa do site < exemplos />
Mapa do site < exemplos />
Wirefraammeee < Arquitetura da informação />
Wireframe < o que é? />
Wireframe é o ESQUELETO!
Wireframe < o que é? />
Wireframe < o que é? />
Não. Não esse Esqueleto!
Wireframe < o que é? />
É um rascunho com marcações de peso e posicionamento do conteúdo de uma interface. Ele será usado posteriormente pelo designer como guia para desenvolvimento do layout final do website, sistema ou aplicativo.(fonte: richardbarros.com.br)
Wireframe < o que é? />
É um rascunho com marcações de peso e posicionamento do conteúdo de uma interface. Ele será usado posteriormente pelo designer como guia para desenvolvimento do layout final do website, sistema ou aplicativo.(fonte: richardbarros.com.br)
Normalmente, wireframes são concluídos antes que qualquer trabalho artístico seja desenvolvido.
Wireframe < pra que? porque? />
Essa etapa é importante porque é a parte primordial do planejamento da navegação (e interação com o usuário) antes mesmo do layout, o que ajuda a perceber se há algum erro de usabilidade, algum bloco de conteúdo sem o destaque necessário ou mesmo faltando.
Wireframe < ferramentas />
Pra wireframiá a gente só precisa mesmo de Papel e Caneta, mas existem diversas ferramentas que ajudam no desenvolvimento do Wireframe.
Dentre elas:para Desktop
● Axure● Pencil● MockApp● Photoshop
OmniGraffe
na Web
● MockFlow● Cacoo● Lumzy● Protoshare● iPlotz
Wireframe < referências />
Mas tem um site bacana sobre wireframe, tem?
Wireframe < referências />
Wireframe < referências />
I <3 Wireframe
http://wireframes.tumblr.com/
Wireframe < exemplos />
Wireframe < exemplos />
Wireframe < exemplos />
Wireframe < exemplos />
Dúvidas?
Let's rock, dude!
Let's rock, dude!
Desconstrução de websites ● pixar.com● g1.globo.com● canalfox.com.br● sloganssinceros.tumblr.com
Let's rock, dude!
Projeto 01 ● Briefing
○ Site pessoal
● Mapa do site○ Conteúdo: Nome, Contato (redes sociais, email...),
Interesses, Espaço para trabalhos
● Wireframe
;)
Obrigado!