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!