Wireframes
Upcoming SlideShare
Loading in...5
×
 

Wireframes

on

  • 3,328 views

Wireframes

Wireframes

Statistics

Views

Total Views
3,328
Views on SlideShare
3,328
Embed Views
0

Actions

Likes
2
Downloads
78
Comments
0

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Wireframes Wireframes Document Transcript

  • TEMA: WIREFRAMES 1. O que são Wireframes O planeamento da arquitetura da informação não pode ser descuidado, e o Wireframing é um dos primeiros passos para melhorar o planeamento e a definição de interfaces. O nome “wireframe” vem da junção de duas palavras em inglês: “wire” (linhas) e “frames” (ecrãs). Antes de se construir uma casa é sempre necessário um projeto, uma maquete, um trabalho de arquitetura. No que respeita à criação de um Web Site são utilizados os mesmos princípios. Wireframe corresponde a um documento (ou vários) com indicações para a construção de um Web Site, tais como blocos de texto, animações, áudio, vídeo, imagens, menus de navegação, banners, logos entre outros. É apenas um esboço que organiza os elementos da interface onde está incluída e posicionada toda a navegação e informação correspondente a toda a pesquisa e análise que foi feita na etapa referente ao pré-projeto. De salientar, que não têm como objetivo interferir na projeção da parte gráfica/visual (desenho do layout gráfico), ou seja, na parte criativa. Chak (2004) afirma que os wireframes devem apenas mostrar o contorno daquilo que será a interface, sem aprofundamentos no design gráfico. Para a conceção de um wireframe de qualidade é necessário investir bastante tempo na pesquisa de informação, e que esta seja entendida por todos os elementos que formam a equipa de Web Design, não descurando que é extremamente pertinente que o Web Site vá ao encontro das necessidades e expetativas dos milhões de “utilizadores on-line”. A construção do wireframe, de certo modo, garante que todo o Web Site mantenha uma unidade gráfica, padronizada e uma presença de marca relevante para o cliente (identidade e marca). Fases na conceção de um Web Site: Pesquisa Explorar Interface Produção Testes Lançamento 1.1 Constituição de um Wireframe O Wireframe é composto por imagens, textos, formulários, mecanismos de pesquisa que são representados por diversos elementos gráficos – largura e altura das páginas, quadrados e círculos, traços contínuos e pontilhados, palavras em negrito e sublinhadas - normalizados para todos os wireframes da documentação. O Wireframe deverá incluir: áreas de conteúdo (por exemplo, formulário de contato); hierarquia de conteúdos; identificação dos nomes das páginas; nome(s) do(s) autor(es) dos wireframes e identificação de cada wireframe no contexto geral do projeto. Para Jesse James Garrett (2003) o valor do wireframe está na forma como se integra os elementos de design de interface, design de navegação e design de informação. 1 de 6
  • TEMA: WIREFRAMES 2. Estrutura e tipos de Wireframes Quando os Wireframes são construídos o arquiteto de informação define os elementos que deverão ter mais ênfase, destaque e prioridade no Web Site. Neste sentido, define as prioridades relativas às informações e funções, as regras para a exposição de determinados tipos de informação e o efeito nos diferentes cenários no ecrã. Um Wireframe deve complementar a informação, a navegação e a interface do Web Site. Os Wireframes podem ter diferentes níveis de detalhes. Wireframe de baixa fidelidade Figura 1 – Estrutura de Wireframe muito simples. Pretende garantir que todo o foco esteja centrado no layout do conteúdo e nos elementos visuais. Wireframe de média fidelidade Wireframe de alta fidelidade Figura 2 – Estrutura de Wireframe com mais detalhes, mais Figura 3 – Estrutura de Wireframe que apresenta um valor conteúdo e explicações. aproximado do que a página vai realmente ser no final da sua conceção. 2 de 6
  • TEMA: WIREFRAMES Wireframe para Plataformas Mobile Figura 4 – Estrutura de Wireframe para Plataformas Mobile 3. Vantagens e desvantagens da sua utilização Vantagens  Facilita a previsão e análise de usabilidade no momento da construção;  Facilita a aplicação de conceitos de usabilidade já testados e comprovados, em projetos anteriores, como eficientes; o A partir da elaboração de wireframes, é possível a realização de protótipos interativos que funcionam como testes introdutórios de usabilidade e da funcionalidade da interface.  Ajuda o grupo de pessoas das áreas de desenvolvimento e programação, produzindo a ideia base, uniformizada;  São utilizados após a implementação, para que seja possível a comparação entre o protótipo e o produto final;  Funciona como uma documentação do sistema e deve ser consultado antes de cada modificação posterior, para prevenir impactos na arquitetura e funcionalidade;  É conotado como um documento da página auxiliando a análise futura de riscos e de funcionalidades. Desvantagens  Não atender às expectativas dos clientes devido a uma interface muito rudimentar, ou seja, sem impacto gráfico;  Se os web designers seguirem á risca todo o wireframe o produto poderá perder o nível de criatividade e inovação;  Se não for claramente construído necessita de tempo para ser entendido por todos os elementos que farão parte da equipa do desenvolvimento do projeto;  O projeto poderá ficar comprometido se não for desenhado a uma escala exata, pois pode ocorrer complicações de dimensões de página. 3 de 6
  • TEMA: WIREFRAMES 4. Software Existem diversas ferramentas disponíveis para o desenvolvimento de wireframes. No entanto, se o orçamento for curto, o papel e um lápis é o suficiente (http://www.from-the- couch.com/post.cfm/title/wireframing-over-the-shoulder). É natural que apresentar a proposta ao cliente numa folha de papel não é muito atrativo para quem a visualiza. Neste sentido, o software permite a organização dos diversos elementos geométricos, textos, etc permitindo a rapidez de alteração da interface. A partir de uma hipótese de wireframe pode-se duplicar e fazer alterações. Daniel Pink refere no seu livro “software design is fairly unchartered territory, but will mature in this century”. Passo a citar alguns softwares que permitem a construção de Wireframes. Figura 5 – Estrutura de Wireframe em papel 4.1 Software Pago: Microsoft Visio, integrado no Office; Adobe Freehand; QuarkXPress; Adobe InDesign; SmartDraw; Axure RP (Windows e Mac); Adobe Illustrator; Pidoco OmniGrapple: para Mac / iPad; 4.2 Software Gratuito Lovely Charts Lumzy - http://lumzy.com/app/ Cacoo - https://cacoo.com/ MockingBird - https://gomockingbird.com/ Mockflow - http://mockflow.com/ Pencil - extensão para o Firefox Existem utilizadores que preferem criar os Wireframes em formato XHTML em vez de o fazer em aplicações. A vantagem é poder entregar ao designer gráfico a estrutura das páginas prontas (com classes, DIVs e IDs definidos). No entanto, pode-se perder tempo a codificar o XHTML e as folhas de estilo (CSS) correspondentes caso se utilize objetos “drag & drop”. Exemplo de Aplicação:  Gliffy - http://www.gliffy.com/ - não é gratuito para exportação. 4 de 6
  • TEMA: WIREFRAMES 5. Análise Critica Na minha opinião wireframe é mais do que um documento, é uma ferramenta de visualização para a apresentação de propostas de uma página de Internet ou Web Site. Considero que o wireframe tem como função organizar o conteúdo de cada página, indicando o peso e a importância de cada componente do layout e a sua relação com os demais elementos que constituem um Web Site. Há quem confunda Wireframe com Layouts e Protótipos apesar de cada um ter uma função distinta. Wireframe são ilustrações ou esboço da estrutura do Web Site, o Layout foca os elementos visuais enquanto que o Protótipo são páginas semi- funcionais. Na minha opinião, considero que o Wireframe é fundamental para a criação de um Web Site uma vez que comunica as ideias iniciais de design, de uma forma simplificada tendo como foco o conteúdo e a estrutura, e não o layout ou a interface visual. Permite ordenar, agrupar e criar hierarquias de conteúdos bem como reduzir o tempo da conceção visual dos Web Sites uma vez que os designers têm acesso ao “esqueleto” do que vão desenhar. Em termos de usabilidade o construtor do wireframe contribui para evitar conteúdos redundantes ou sobreposição dos mesmos bem como layouts complexos. No que respeita à apresentação dos Wireframes ao cliente, a empresa ou gestor do projeto poderá economizar tempo e dinheiro. Se o cliente quiser mudar posições dos elementos do Web Site facilmente proceder-se-á às alterações sem necessitar de alterar layouts e efeitos complexos. É neste âmbito que considero que os Wireframes são poderosos documentos pois antes de se passar à construção do Web Site já foram previstos detalhes de arquitetura, navegabilidade, funcionalidade e conteúdo. Contudo, se existir erros na sua construção poderá comprometer todo o projeto, por isso muitos designers não gostam de ouvir falar de wireframes. Segundo James Garrett a única maneira de se produzir wireframes de sucesso é por meio da colaboração (arquiteto de informação e o designer). Outra abordagem é o wireframe colaborativo. Frederick van Amstel, na arquitetura do Portal BrOffice.org, utilizou um método original (http://www.broffice.org/pesquisa_portal/): inspirado na organização de cartões (card-sorting) mas focalizado na ligação da informação, criou o wireframe do Portal BrOffice.org a partir de 128 contribuições (utilizadores e colaboradores) sobre como deveria ser posicionada a informação numa página específica. O resultado dos diferentes wireframes, criados pelos participantes da pesquisa, contribuiu para a definição dos elementos da página inicial bem como a sua importância e inter-relacionamentos. Ao longo do desenvolvimento deste trabalho interroguei-me algumas vezes: Será necessário construir sempre um wireframe para um Web Site? A resposta é óbvia. Sim, sem dúvida, nem que seja uns rabiscos no papel. O wireframe é útil na maior parte dos casos, mas pode não ser primordial para todos os contextos de projetos: é um documento que auxilia a expressar decisões, análises, pesquisas e definições da Arquitetura de Informação, mas não é nem a síntese do processo desta, nem o seu resultado. Isaac Pinnock refere no seu artigo: “The best sites are those where there’s a seamless divide between the look, the content and the experience. Being able to model an interaction and understand how someone moves through a site are crucial skills in this trilogy. It’s time designers stepped up to the plate and claimed wireframes as their own”. 5 de 6
  • TEMA: WIREFRAMES 6. Vídeos sobre o tema apresentado  The Right Way to Wireframe  Wireframing over the shoulder 7. Bibliografia  Chak, Andrew (2004). Como criar sites Persuasivos. Pearson Education do Brasil.  Garrett, Jesse James. (2003). The Elements of User Experience - User-Centered Design for the Web. Berkeley: New Riders.  Peter Morville, Louis Rosenfeld. (2006). Information Architecture for the World Wide Web. 3rd edition, OReilly Media.  Pink. Daniel H. (2005). A Whole New Mind: Why Right-Brainers Will Rule the Future. Riverhead Books. 7.1 Sites Visitados  Freitas, Daniel Leal disponível em http://www.novaz.com.br/blog/2010/11/guia-completo-de-wireframing/. Acesso em 27 de outubro de 2011.  Kohary, Nishant disponível em: http://visitmix.com/articles/the-future-of-wireframes. Acesso em 26 de outubro de 2011  Pinnock, Isaac disponível em http://madebymany.com/blog/the-future-of-wireframes. Acesso em 23 de outubro de 2011.  REIS, Guilhermo Almeida. (2007). Centrando a Arquitetura de Informação no usuário. Dissertação (Mestrado) - Escola de Comunicação e Artes, Universidade de São Paulo. Disponível em: http://www.guilhermo.com/mestrado/. Acesso em 19 outubro de 2011.  Travis, Aaron T. disponível em http://boxesandarrows.com/view/sketchy-wireframes. Acesso em 25 de outubro de 2011.  http://www.userexpertise.com/usabilidade/12-dicas-para-wireframe/. Acesso em 22 de outubro de 2011.  http://graffletopia.com/stencils/358. Acesso em 22 de outubro de 2011.  http://webinsider.uol.com.br/2011/03/18/cinco-ferramentas-para-a-producao-de-wireframes/. Acesso em 22 de outubro de 2011.  http://www.from-the-couch.com/post.cfm/title/wireframing-over-the-shoulder. Acesso em 22 de outubro de 2011.  http://visitmix.com/articles/the-future-of-wireframes. Acesso em 27 de outubro de 2011. 6 de 6