SlideShare uma empresa Scribd logo
2012
       Tersis Zonato
                       e projetos de multimídia
                                             Wireframes para sites




                                                            http://www.localwisdom.com/wp-content/uploads/2010/01/4239685407_910c832d73_o.jpg
sem um projeto definido
                                                     Não se faz uma construção




http://www.industryleadersmagazine.com/wp-content/uploads/2011/03/j0401617.jpg
é definido na planta
Na engenharia, o projeto




                           http://www.choosehometheater.com/userfiles/Blueprint.jpg
temos os wireframes
Para projetos multimídia




                           http://agenciathinkers.com.br/wp-content/uploads/cupido-wireframe1.jpg
wire: linha
                                                      Wireframe:


                         frame: quadro




http://www.wireframeshowcase.com/images/uploads/ignacio_puga_main_01.jpg
CONCEITO
O wireframe é o esqueleto do projeto, que permite
definir a hierarquia de informação;

É um diagrama bidimensional em preto e branco que
sugere a estrutura que irá compor uma interface;

Deve incluir informação suficiente para refletir o que
realmente irá aparecer no seu site ou projeto;

É uma excelente ferramenta para documentação do
projeto e aprovação pelo cliente.
http://d3pr5r64n04s3o.cloudfront.net/tuts/341_wf/wireframe-bare.png
http://d3pr5r64n04s3o.cloudfront.net/tuts/341_wf/wireframe-withcopy.png
http://d3pr5r64n04s3o.cloudfront.net/tuts/341_wf/wireframe-withvisuals.png
http://d3pr5r64n04s3o.cloudfront.net/tuts/341_wf/wireframe-withgreys.png
SKETCH (rabiscos)

  WIREFRAME

    LAYOUT

DESENVOLVIMENTO
Comece com lápis e papel




                           http://www.publicdomainpictures.net/pictures/10000/velka/1393-1247315873v1Xa.jpg
http://personavirtual.files.wordpress.com/2008/04/wireartesanato.jpg
http://www.richardbarros.com.br/blog/artigos/dicas-para-desenvolvimento-de-wireframes
Ferramentas para desktop:

• Axure               • Justinmind Prototyper
• Balsamiq Mockups    • Microsoft Visio
• FlairBuilder        • MockApp
• FluidIA             • MockupScreens
• ForeUI              • OmniGraffle
• DENIM               • OverSite
• DesignerVista       • Pencil
• EasyPrototype       • SketchFlow
• GUI Design Studio   • WireframeSketcher
http://www.richardbarros.com.br/blog/artigos/dicas-para-desenvolvimento-de-wireframes
Ferramentas online:

• Cacoo               • Lovely Charts
• Gliffy               • Lumzy
• HotGloo             • MockFlow
• iPhone Mockup       • Mockingbird
• iPlotz              • Pidoco
• Jumpchart           • ProtoShare
• JustProto           ...
http://www.sccc.premiumdw.com/wp-content/uploads/2009/04/tutorial-wireframe-01.png
ESSA ETAPA!
  NUNCA PULE




http://poppemieke.deviantart.com/art/scream-Created-for-Drawing-Day-124978049
http://poppemieke.deviantart.com/art/scream-Created-for-Drawing-Day-124978049
Nunca pule essa etapa:

Desenvolver wireframes é
um passo importante no
processo de design;

Não é trabalhoso e é
essencial ao projeto;

Deve ser feito antes do
layout.
Muito obrigado!
 www.tersis.com.br




    Tersis Zonato
        2012

Mais conteúdo relacionado

Semelhante a Wireframes para sites e projetos de multimídia

Wireframe workshop externo_001_b
Wireframe workshop externo_001_bWireframe workshop externo_001_b
Wireframe workshop externo_001_b
maurohs
 
Curso: Web Design Responsivo
Curso: Web Design ResponsivoCurso: Web Design Responsivo
Curso: Web Design Responsivo
Tersis Zonato
 
Trabalho - Projeto redes
Trabalho - Projeto redesTrabalho - Projeto redes
Trabalho - Projeto redes
Valdir Junior
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Cristofer Sousa
 
Web Design > Visão geral do Web Design
Web Design > Visão geral do Web DesignWeb Design > Visão geral do Web Design
Web Design > Visão geral do Web Design
Felipe Fernandes
 
Demoiselle - Arquitetura
Demoiselle - ArquiteturaDemoiselle - Arquitetura
Demoiselle - Arquitetura
Serge Rehem
 
A 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignA 3ª Área do Design: Web Design
A 3ª Área do Design: Web Design
Gustavo Zimmermann
 
Raymundo Ferreira - Desenvolvimento de aplicativos S40 com Web apps
Raymundo Ferreira - Desenvolvimento de aplicativos S40 com Web appsRaymundo Ferreira - Desenvolvimento de aplicativos S40 com Web apps
Raymundo Ferreira - Desenvolvimento de aplicativos S40 com Web apps
INdT
 
Project Time
Project TimeProject Time
Project Time
Marco Coghi
 
Arquitetura da Informacao na WEB
Arquitetura da Informacao na WEBArquitetura da Informacao na WEB
Arquitetura da Informacao na WEB
Fábio Flatschart
 
Afinal, o que são Single Page Applications
Afinal, o que são Single Page ApplicationsAfinal, o que são Single Page Applications
Afinal, o que são Single Page Applications
Patrick Monteiro
 
CRP-5215-0420-2014-10
CRP-5215-0420-2014-10CRP-5215-0420-2014-10
Você não precisa de uma sopa de letrinhas para criar web apps
Você não precisa de uma sopa de letrinhas para criar web appsVocê não precisa de uma sopa de letrinhas para criar web apps
Você não precisa de uma sopa de letrinhas para criar web apps
William Oliveira
 
Tema 10 Automação Da Engenharia
Tema 10   Automação Da EngenhariaTema 10   Automação Da Engenharia
Tema 10 Automação Da Engenharia
bruno2003sp
 
Joomla daydf construindo um templare 2.0
Joomla daydf   construindo um templare 2.0Joomla daydf   construindo um templare 2.0
Joomla daydf construindo um templare 2.0
Raphael França
 
Solid Edge Raihsa
Solid Edge Raihsa Solid Edge Raihsa
Solid Edge Raihsa
Raihsa
 
Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3
Bunee.io - Hiring with Intelligence
 
Tcc leonildo wagner reestruturação de website utilizando padrões w3 c 26-04...
Tcc leonildo wagner   reestruturação de website utilizando padrões w3 c 26-04...Tcc leonildo wagner   reestruturação de website utilizando padrões w3 c 26-04...
Tcc leonildo wagner reestruturação de website utilizando padrões w3 c 26-04...
Léo Dias
 
Um futuro chamado Web Components
Um futuro chamado Web ComponentsUm futuro chamado Web Components
Um futuro chamado Web Components
Zeno Rocha
 
Como montar seu projeto de fribra
Como montar seu projeto de fribraComo montar seu projeto de fribra
Como montar seu projeto de fribra
jalvesf
 

Semelhante a Wireframes para sites e projetos de multimídia (20)

Wireframe workshop externo_001_b
Wireframe workshop externo_001_bWireframe workshop externo_001_b
Wireframe workshop externo_001_b
 
Curso: Web Design Responsivo
Curso: Web Design ResponsivoCurso: Web Design Responsivo
Curso: Web Design Responsivo
 
Trabalho - Projeto redes
Trabalho - Projeto redesTrabalho - Projeto redes
Trabalho - Projeto redes
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
 
Web Design > Visão geral do Web Design
Web Design > Visão geral do Web DesignWeb Design > Visão geral do Web Design
Web Design > Visão geral do Web Design
 
Demoiselle - Arquitetura
Demoiselle - ArquiteturaDemoiselle - Arquitetura
Demoiselle - Arquitetura
 
A 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignA 3ª Área do Design: Web Design
A 3ª Área do Design: Web Design
 
Raymundo Ferreira - Desenvolvimento de aplicativos S40 com Web apps
Raymundo Ferreira - Desenvolvimento de aplicativos S40 com Web appsRaymundo Ferreira - Desenvolvimento de aplicativos S40 com Web apps
Raymundo Ferreira - Desenvolvimento de aplicativos S40 com Web apps
 
Project Time
Project TimeProject Time
Project Time
 
Arquitetura da Informacao na WEB
Arquitetura da Informacao na WEBArquitetura da Informacao na WEB
Arquitetura da Informacao na WEB
 
Afinal, o que são Single Page Applications
Afinal, o que são Single Page ApplicationsAfinal, o que são Single Page Applications
Afinal, o que são Single Page Applications
 
CRP-5215-0420-2014-10
CRP-5215-0420-2014-10CRP-5215-0420-2014-10
CRP-5215-0420-2014-10
 
Você não precisa de uma sopa de letrinhas para criar web apps
Você não precisa de uma sopa de letrinhas para criar web appsVocê não precisa de uma sopa de letrinhas para criar web apps
Você não precisa de uma sopa de letrinhas para criar web apps
 
Tema 10 Automação Da Engenharia
Tema 10   Automação Da EngenhariaTema 10   Automação Da Engenharia
Tema 10 Automação Da Engenharia
 
Joomla daydf construindo um templare 2.0
Joomla daydf   construindo um templare 2.0Joomla daydf   construindo um templare 2.0
Joomla daydf construindo um templare 2.0
 
Solid Edge Raihsa
Solid Edge Raihsa Solid Edge Raihsa
Solid Edge Raihsa
 
Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3
 
Tcc leonildo wagner reestruturação de website utilizando padrões w3 c 26-04...
Tcc leonildo wagner   reestruturação de website utilizando padrões w3 c 26-04...Tcc leonildo wagner   reestruturação de website utilizando padrões w3 c 26-04...
Tcc leonildo wagner reestruturação de website utilizando padrões w3 c 26-04...
 
Um futuro chamado Web Components
Um futuro chamado Web ComponentsUm futuro chamado Web Components
Um futuro chamado Web Components
 
Como montar seu projeto de fribra
Como montar seu projeto de fribraComo montar seu projeto de fribra
Como montar seu projeto de fribra
 

Mais de Tersis Zonato

Documentar e planejar projetos de UX
Documentar e planejar projetos de UXDocumentar e planejar projetos de UX
Documentar e planejar projetos de UX
Tersis Zonato
 
Teoria da comunicação
Teoria da comunicaçãoTeoria da comunicação
Teoria da comunicação
Tersis Zonato
 
Princípios de design
Princípios de designPrincípios de design
Princípios de design
Tersis Zonato
 
Interface e informação
Interface e informaçãoInterface e informação
Interface e informação
Tersis Zonato
 
Projeto de interface
Projeto de interfaceProjeto de interface
Projeto de interface
Tersis Zonato
 
O Universo das Interações
O Universo das InteraçõesO Universo das Interações
O Universo das Interações
Tersis Zonato
 
Dicas para o desenvolvimento do seu TCC
Dicas para o desenvolvimento do seu TCCDicas para o desenvolvimento do seu TCC
Dicas para o desenvolvimento do seu TCC
Tersis Zonato
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Tersis Zonato
 
Usabilidade: as 10 heurísticas de Nielsen
Usabilidade: as 10 heurísticas de NielsenUsabilidade: as 10 heurísticas de Nielsen
Usabilidade: as 10 heurísticas de Nielsen
Tersis Zonato
 
Meu trabalho... é meu mesmo?
Meu trabalho... é meu mesmo?Meu trabalho... é meu mesmo?
Meu trabalho... é meu mesmo?
Tersis Zonato
 
A importância do briefing para evitar “guerras” futuras
A importância do briefing para evitar “guerras” futurasA importância do briefing para evitar “guerras” futuras
A importância do briefing para evitar “guerras” futuras
Tersis Zonato
 
Inserindo personas em cenários para projetos interativos
Inserindo personas em cenários para projetos interativosInserindo personas em cenários para projetos interativos
Inserindo personas em cenários para projetos interativos
Tersis Zonato
 
Uso de personas em projetos interativos
Uso de personas em projetos interativosUso de personas em projetos interativos
Uso de personas em projetos interativos
Tersis Zonato
 
Design Patterns
Design PatternsDesign Patterns
Design Patterns
Tersis Zonato
 
Sistemas Corporativos Web - WordPress Aula06
Sistemas Corporativos Web - WordPress Aula06Sistemas Corporativos Web - WordPress Aula06
Sistemas Corporativos Web - WordPress Aula06
Tersis Zonato
 
Sistemas Corporativos Web - WordPress Aula05
Sistemas Corporativos Web - WordPress Aula05Sistemas Corporativos Web - WordPress Aula05
Sistemas Corporativos Web - WordPress Aula05
Tersis Zonato
 
Sistemas Corporativos Web - WordPress Aula04
Sistemas Corporativos Web - WordPress Aula04Sistemas Corporativos Web - WordPress Aula04
Sistemas Corporativos Web - WordPress Aula04
Tersis Zonato
 
Sistemas Corporativos Web - WordPress Aula03
Sistemas Corporativos Web - WordPress Aula03Sistemas Corporativos Web - WordPress Aula03
Sistemas Corporativos Web - WordPress Aula03
Tersis Zonato
 
Interfaces: Evolução ou não?
Interfaces: Evolução ou não?Interfaces: Evolução ou não?
Interfaces: Evolução ou não?
Tersis Zonato
 
Primeiros princípios do DxI por Bruce Tognazzini
Primeiros princípios do DxI por Bruce TognazziniPrimeiros princípios do DxI por Bruce Tognazzini
Primeiros princípios do DxI por Bruce Tognazzini
Tersis Zonato
 

Mais de Tersis Zonato (20)

Documentar e planejar projetos de UX
Documentar e planejar projetos de UXDocumentar e planejar projetos de UX
Documentar e planejar projetos de UX
 
Teoria da comunicação
Teoria da comunicaçãoTeoria da comunicação
Teoria da comunicação
 
Princípios de design
Princípios de designPrincípios de design
Princípios de design
 
Interface e informação
Interface e informaçãoInterface e informação
Interface e informação
 
Projeto de interface
Projeto de interfaceProjeto de interface
Projeto de interface
 
O Universo das Interações
O Universo das InteraçõesO Universo das Interações
O Universo das Interações
 
Dicas para o desenvolvimento do seu TCC
Dicas para o desenvolvimento do seu TCCDicas para o desenvolvimento do seu TCC
Dicas para o desenvolvimento do seu TCC
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Usabilidade: as 10 heurísticas de Nielsen
Usabilidade: as 10 heurísticas de NielsenUsabilidade: as 10 heurísticas de Nielsen
Usabilidade: as 10 heurísticas de Nielsen
 
Meu trabalho... é meu mesmo?
Meu trabalho... é meu mesmo?Meu trabalho... é meu mesmo?
Meu trabalho... é meu mesmo?
 
A importância do briefing para evitar “guerras” futuras
A importância do briefing para evitar “guerras” futurasA importância do briefing para evitar “guerras” futuras
A importância do briefing para evitar “guerras” futuras
 
Inserindo personas em cenários para projetos interativos
Inserindo personas em cenários para projetos interativosInserindo personas em cenários para projetos interativos
Inserindo personas em cenários para projetos interativos
 
Uso de personas em projetos interativos
Uso de personas em projetos interativosUso de personas em projetos interativos
Uso de personas em projetos interativos
 
Design Patterns
Design PatternsDesign Patterns
Design Patterns
 
Sistemas Corporativos Web - WordPress Aula06
Sistemas Corporativos Web - WordPress Aula06Sistemas Corporativos Web - WordPress Aula06
Sistemas Corporativos Web - WordPress Aula06
 
Sistemas Corporativos Web - WordPress Aula05
Sistemas Corporativos Web - WordPress Aula05Sistemas Corporativos Web - WordPress Aula05
Sistemas Corporativos Web - WordPress Aula05
 
Sistemas Corporativos Web - WordPress Aula04
Sistemas Corporativos Web - WordPress Aula04Sistemas Corporativos Web - WordPress Aula04
Sistemas Corporativos Web - WordPress Aula04
 
Sistemas Corporativos Web - WordPress Aula03
Sistemas Corporativos Web - WordPress Aula03Sistemas Corporativos Web - WordPress Aula03
Sistemas Corporativos Web - WordPress Aula03
 
Interfaces: Evolução ou não?
Interfaces: Evolução ou não?Interfaces: Evolução ou não?
Interfaces: Evolução ou não?
 
Primeiros princípios do DxI por Bruce Tognazzini
Primeiros princípios do DxI por Bruce TognazziniPrimeiros princípios do DxI por Bruce Tognazzini
Primeiros princípios do DxI por Bruce Tognazzini
 

Wireframes para sites e projetos de multimídia