Web Design > Visão geral do Web Design
Upcoming SlideShare
Loading in...5
×
 

Web Design > Visão geral do Web Design

on

  • 1,807 views

Aula 02 do curso de webdesign da praça do conhecimento

Aula 02 do curso de webdesign da praça do conhecimento

Statistics

Views

Total Views
1,807
Views on SlideShare
1,807
Embed Views
0

Actions

Likes
1
Downloads
64
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web Design > Visão geral do Web Design Web Design > Visão geral do Web Design Presentation Transcript

    • 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 dainformação (AI) é a arte deexpressar um modelo ouconceito de informaçãoutilizados em atividades queexigem detalhes explícitos desistemas complexos.
    • Web Design...Ou seja, é planejar oque vem por aí!
    • Web DesignA Arquitetura da informação também cuidada usabilidade do projeto de website, bemcomo a definição do modelo deinteração/relação entre as páginas.
    • Web DesignEm projeto de website a base da AI possuiduas etapas:
    • Web DesignEm projeto de website a base da AI possuiduas etapas:● Mapa do site
    • Web DesignEm projeto de website a base da AI possuiduas etapas:● Mapa do site● Wireframe
    • Mapa do site< Arquitetura da informação />
    • Mapa do site < o que é? />Nada mais é do que uma listaorganizada de todas as páginas, ou asmais importantes, de um site.Basicamente, os mapas do site, sãopáginas que objetivam o usuário, casoele não encontre o que estejaprocurando, mas os mecanismos debusca (Google, Yahoo!, MSN) podemver esta página como uma porta deentrada para todos as principais, ou atotalidade, das páginas contidas nowebsite.(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 posicionamentodo conteúdo de uma interface. Ele será usadoposteriormente pelo designer como guia paradesenvolvimento do layout final do website, sistema ouaplicativo.(fonte: richardbarros.com.br)
    • Wireframe < o que é? />É um rascunho com marcações de peso e posicionamentodo conteúdo de uma interface. Ele será usadoposteriormente pelo designer como guia paradesenvolvimento do layout final do website, sistema ouaplicativo.(fonte: richardbarros.com.br)Normalmente, wireframes são concluídos antes quequalquer trabalho artístico seja desenvolvido.
    • Wireframe < pra que? porque? />Essa etapa é importante porque é a parte primordial doplanejamento 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 semo destaque necessário ou mesmo faltando.
    • Wireframe < ferramentas />Pra wireframiá a gente só precisa mesmo de Papel eCaneta, mas existem diversas ferramentas que ajudam nodesenvolvimento do Wireframe.Dentre elas: para Desktop na Web ● Axure ● MockFlow ● Pencil ● Cacoo ● MockApp ● Lumzy ● Photoshop ● Protoshare OmniGraffe ● 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?
    • Lets rock, dude!
    • Desconstrução de websites● pixar.com● g1.globo.com● canalfox.com.br● sloganssinceros.tumblr.comLets rock, dude!
    • Projeto 01● Briefing ○ Site pessoal● Mapa do site ○ Conteúdo: Nome, Contato (redes sociais, email...), Interesses, Espaço para trabalhos● WireframeLets rock, dude!
    • Obrigado!;)