Wireframe é um guia visual para o site que organiza os elementos da interface e conteúdo no espaço. Fornece a estrutura que será usada pelo designer para construir o layout, bem como requisitos funcionais que serão usados pelo desenvolvedor. Por isso deve ser simples, permitindo rápidas alterações; e informativo, permitindo que se façam testes com usuários. Dentro do processo de desenvolvimento do site (ou blog), o wireframe está entre a Arquitetura da Informação e o Projeto Gráfico. Normalmente é confeccionado pelo Arquiteto da Informação, podendo ser feito pelo Designer, ou até mesmo pelos dois profissionais em conjunto.  Wireframe é um guia visual para o site que organiza os elementos da interface e conteúdo no espaço. Fornece a estrutura que será usada pelo designer para construir o layout, bem como requisitos funcionais que serão usados pelo desenvolvedor. Por isso deve ser simples, possibilitando rápidas alterações; e informativo, permitindo inclusive, que se façam testes de usabilidade com usuários.  Em sites com layout fixo normalmente produzimos um wireframe para cada página, ou para as principais páginas do site. Então o designer e o desenvolvedor já podem trabalhar com base nesta estrutura, pois ela não sofrerá grandes alterações.  Em projetos fluidos e principalmente adaptáveis cada página do site terá na verdade, tantas variações quantas forem as adaptações planejadas em função das resoluções escolhidas como referência (pontos de adaptação).  Esta é a abordagem escolhida para desenvolver o blog de forma adaptável dentro da perspectiva de fazer com que ele se adapte de resoluções de 24″ atésmartphones. O software escolhido para desenvolver os wireframes foi o Fireworks. Criei um documento (Modelo para wireframes) que foi usado como base para desenvolver os wireframes, são páginas que delimitam a área útil do site descontando a barra de rolagem, indo de 1920px até 240px, como na tabela abaixo:  Largura da tela / área útil (px)  Monitor / Dispositivo  1920 / 1890  24″ e 23″  1600 / 1560  22″, 21″ e 20″  1440 / 1410  19″  1280 / 1230  19″ e 17″  1024 / 990  17″ e 15″  800 / 750  14″  640 / 640  iPhone 4 portrait, dispositivos pequenos  480 / 480  Xperia X10 portrait, iPhone landscape  320 / 320  Smatsphones landscape, iPhone portrait  240 / 240  Spartphones portrait    “Imagem do arquivo PNG base para desenvolvimento dos wireframes.     A metodologia utilizada na criação dos wireframes foi a seguinte:  Desenvolver o wireframe para a resolução padrão de 1024px (17″) Desenvolver as adaptações para as resoluções maiores Desenvolver as adaptações para as resoluções menores Em função do monitor usado na pesquisa para a confecção deste projeto ser de 22″ (1680px), esta foi a resolução limite para as adaptações, ou seja, em monitores de 24″ o site não se expandirá ocupando toda a janela. Isto não é considerada uma limitação ou demérito do projeto, já que ao atingir a resolução de 1680px a percepção de adaptação acontecerá de qualquer forma. Pouco ou nada será notado pelos usuários de monitores maiores.  Apenas após todos os wireframes prontos é que foram confeccionados os layouts.    Wireframes do blog Design Adaptável  De acordo com a metodologia adotada foi desenvolvida a primeira adaptação dowireframe para a resolução de 1024px. A proposta foi usar o modelo conceitual já usado em blogs com header, lista de posts, sidebar e footer. A exceção fica por conta do painel de navegação por imagens abaixo do header, onde serão exibidos os posts mais comentados e visitados, servindo de referência quando o usuário não tem um objetivo específico no site, ou seja, não está em busca de um assunto específico.    Wireframes da página inicial para monitores de 17 e 19 polegadas.     A resolução de 1680px é a resolução limite na adaptação do blog por dois motivos: (1) o monitor utilizado no desenvolvimento do projeto tem esta resolução, não sendo possível ter a real percepção de como o projeto se comportará em resoluções maiores e (2) com a adaptação do blog o conteúdo se espalha horizontalmente fazendo com que haja uma melhor ocupação da área útil, mas em contra partida exige do usuário um maior esforço em varrer a tela em busca das informações contidas no blog.  Este esforço deve ser levado em consideração, embora para obter dados que embasem esta teoria é necessário que se façam testes com usuários a fim de comprovar o custo-benefício da utilização de uma área tão grande na acomodação do conteúdo do site ou blog. Dentre os parâmetros utilizados para medir a eficácia desta abordagem devemos observar a Lei de Fittz:  Em ergonomia, a lei de Fitts é um modelo do movimento humano, que prediz o tempo necessário para mover-se rapidamente desde uma posição inicial até uma zona destino final como uma função da distância até o objetivo e o tamanho deste. A lei de Fitts se usa para modelar o ato de apontar, tanto no mundo real, por exemplo com uma mão ou dedo, como nos ordenadores, por exemplo com um mouse. Foi publicada por Paul Fitts em 1954.  http://pt.wikipedia.org/wiki/Lei_de_Fitts  A lei de Fitts tem sido aplicada a tarefas em que o usuário deve mover a posição do cursor sobre um objetivo da tela, como um botão, ela pode modelar as ações depoint-and-click (assinalar e clicar) e de drag-and-drop (arrastar e soltar). De forma geral a lei diz que objetos que estão mais longe do cursor do mouse e são menores precisam de um esforço maior do usuário, o que pode gerar desconforto na experiência em navegar pelo site.    Wireframes da página inicial para monitores de 20 e 22 polegadas.     Na medida em que as adaptações foram sendo feitas para as resoluções menores estas foram as principais:  1º) O painel de destaques foi exibindo cada vez menos destaques na primeira tela, ou seja, o usuário precisará acionar a navegação para exibir os destaques escondidos.  2º) As imagens foram reduzindo seu tamanho proporcionalmente.  3º) Itens de interação considerados hierarquicamente inferiores foram omitidos para não “disputar” a atenção do usuário, como links de tags e mídias sociais.  4º) O corpo do título e texto foram reduzidos juntamente com a entrelinha.  5º) Os Box models foram empilhados liberando o máximo possível a largura da tela para proporcionar uma melhor experiência na leitura.  Wireframes da página inicial para monitores de 14 polegadas até smatphones.     Wireframes da página de posts  As páginas de posts seguiram a mesma filosofia e passaram pelo mesmo método de desenvolvimento.  Wireframes da página de posts para monitores de 17 e 19 polegadas.     Wireframes da página de posts para monitores de 20 e 22 polegadas.   Wireframes da página de posts para monitores de 14 polegadas até smatphones.     Conclusão  O processo da produção de sites adaptáveis, nitidamente, precisa de maior planejamento que sites convencionais (layout fixo), mas a quantidade de etapas – pontos de adaptação – dependerá das características do projeto e da habilidade dos profissionais envolvidos. O exemplo mostrado neste artigo detalha um método que pode ser simplificado em outros projetos. Ao planejar as adaptações para um site podemos definir que existirão apenas três pontos de adaptação, ou seja, três etapas de detalhamento que resultarão em wireframes e posteriormente em layouts.  Fonte: http://www.designadaptavel.com.br
Autor: Weucles Santos | Publicado: 2013-09-21T15:12:00-07:00




Wireframe é um guia visual para o site que organiza os elementos da interface e conteúdo no espaço. Fornece a estrutura que será usada pelo designer para construir o layout, bem como requisitos funcionais que serão usados pelo desenvolvedor. Por isso deve ser simples, permitindo rápidas alterações; e informativo, permitindo que se façam testes com usuários.


Dentro do processo de desenvolvimento do site (ou blog), o&nbsp;wireframe&nbsp;está entre a Arquitetura da Informação e o Projeto Gráfico. Normalmente é confeccionado pelo Arquiteto da Informação, podendo ser feito pelo Designer, ou até mesmo pelos dois profissionais em conjunto.

Wireframe&nbsp;é um guia visual para o site que organiza os elementos da interface e conteúdo no espaço. Fornece a estrutura que será usada pelo designer para construir o layout, bem como requisitos funcionais que serão usados pelo desenvolvedor. Por isso deve ser simples, possibilitando rápidas alterações; e informativo, permitindo inclusive, que se façam testes de usabilidade com usuários.

Em sites com layout fixo normalmente produzimos um&nbsp;wireframe&nbsp;para cada página, ou para as principais páginas do site. Então o designer e o desenvolvedor já podem trabalhar com base nesta estrutura, pois ela não sofrerá grandes alterações.

Em projetos fluidos e principalmente adaptáveis cada página do site terá na verdade, tantas variações quantas forem as adaptações planejadas em função das resoluções escolhidas como referência (pontos de adaptação).

Esta é a abordagem escolhida para desenvolver o blog de forma adaptável dentro da perspectiva de fazer com que ele se adapte de resoluções de 24″ atésmartphones. O software escolhido para desenvolver os&nbsp;wireframes&nbsp;foi o Fireworks. Criei um documento (Modelo para wireframes) que foi usado como base para desenvolver os&nbsp;wireframes, são páginas que delimitam a área útil do site descontando a barra de rolagem, indo de 1920px até 240px, como na tabela abaixo:


Largura da tela / área útil (px)

Monitor / Dispositivo


1920 / 1890

24″ e 23″


1600 / 1560

22″, 21″ e 20″


1440 / 1410

19″


1280 / 1230

19″ e 17″


1024 / 990

17″ e 15″


800 / 750

14″


640 / 640

iPhone 4 portrait, dispositivos pequenos


480 / 480

Xperia X10 portrait, iPhone landscape


320 / 320

Smatsphones landscape, iPhone portrait


240 / 240

Spartphones portrait





“Imagem do arquivo PNG base para desenvolvimento dos wireframes.



A metodologia utilizada na criação dos&nbsp;wireframes&nbsp;foi a seguinte:

Desenvolver o&nbsp;wireframe&nbsp;para a resolução padrão de 1024px (17″)
Desenvolver as adaptações para as resoluções maiores
Desenvolver as adaptações para as resoluções menores


Em função do monitor usado na pesquisa para a confecção deste projeto ser de 22″ (1680px), esta foi a resolução limite para as adaptações, ou seja, em monitores de 24″ o site não se expandirá ocupando toda a janela. Isto não é considerada uma limitação ou demérito do projeto, já que ao atingir a resolução de 1680px a percepção de adaptação acontecerá de qualquer forma. Pouco ou nada será notado pelos usuários de monitores maiores.

Apenas após todos os&nbsp;wireframes&nbsp;prontos é que foram confeccionados os layouts.



Wireframes&nbsp;do blog Design Adaptável

De acordo com a metodologia adotada foi desenvolvida a primeira adaptação dowireframe&nbsp;para a resolução de 1024px. A proposta foi usar o modelo conceitual já usado em blogs com&nbsp;header, lista de&nbsp;posts,&nbsp;sidebar&nbsp;e&nbsp;footer. A exceção fica por conta do painel de navegação por imagens abaixo do&nbsp;header, onde serão exibidos os&nbsp;posts&nbsp;mais comentados e visitados, servindo de referência quando o usuário não tem um objetivo específico no site, ou seja, não está em busca de um assunto específico.



Wireframes da página inicial para monitores de 17 e 19 polegadas.



A resolução de 1680px é a resolução limite na adaptação do blog por dois motivos: (1) o monitor utilizado no desenvolvimento do projeto tem esta resolução, não sendo possível ter a real percepção de como o projeto se comportará em resoluções maiores e (2) com a adaptação do blog o conteúdo se espalha horizontalmente fazendo com que haja uma melhor ocupação da área útil, mas em contra partida exige do usuário um maior esforço em varrer a tela em busca das informações contidas no blog.

Este esforço deve ser levado em consideração, embora para obter dados que embasem esta teoria é necessário que se façam testes com usuários a fim de comprovar o custo-benefício da utilização de uma área tão grande na acomodação do conteúdo do site ou blog. Dentre os parâmetros utilizados para medir a eficácia desta abordagem devemos observar a Lei de Fittz:

Em ergonomia, a lei de Fitts é um modelo do movimento humano, que prediz o tempo necessário para mover-se rapidamente desde uma posição inicial até uma zona destino final como uma função da distância até o objetivo e o tamanho deste. A lei de Fitts se usa para modelar o ato de apontar, tanto no mundo real, por exemplo com uma mão ou dedo, como nos ordenadores, por exemplo com um mouse. Foi publicada por Paul Fitts em 1954.

http://pt.wikipedia.org/wiki/Lei_de_Fitts

A lei de Fitts tem sido aplicada a tarefas em que o usuário deve mover a posição do cursor sobre um objetivo da tela, como um botão, ela pode modelar as ações depoint-and-click&nbsp;(assinalar e clicar) e de&nbsp;drag-and-drop&nbsp;(arrastar e soltar). De forma geral a lei diz que objetos que estão mais longe do cursor do mouse e são menores precisam de um esforço maior do usuário, o que pode gerar desconforto na experiência em navegar pelo site.



Wireframes da página inicial para monitores de 20 e 22 polegadas.



Na medida em que as adaptações foram sendo feitas para as resoluções menores estas foram as principais:

1º) O painel de destaques foi exibindo cada vez menos destaques na primeira tela, ou seja, o usuário precisará acionar a navegação para exibir os destaques escondidos.

2º) As imagens foram reduzindo seu tamanho proporcionalmente.

3º) Itens de interação considerados hierarquicamente inferiores foram omitidos para não “disputar” a atenção do usuário, como links de&nbsp;tags&nbsp;e mídias sociais.

4º) O corpo do título e texto foram reduzidos juntamente com a entrelinha.

5º) Os&nbsp;Box models&nbsp;foram empilhados liberando o máximo possível a largura da tela para proporcionar uma melhor experiência na leitura.

Wireframes da página inicial para monitores de 14 polegadas até smatphones.



Wireframes da página de posts

As páginas de posts seguiram a mesma filosofia e passaram pelo mesmo método de desenvolvimento.

Wireframes da página de posts para monitores de 17 e 19 polegadas.

&nbsp;Wireframes da página de posts para monitores de 20 e 22 polegadas.

Wireframes da página de posts para monitores de 14 polegadas até smatphones.



Conclusão

O processo da produção de sites adaptáveis, nitidamente, precisa de maior planejamento que sites convencionais (layout fixo), mas a quantidade de etapas – pontos de adaptação – dependerá das características do projeto e da habilidade dos profissionais envolvidos. O exemplo mostrado neste artigo detalha um método que pode ser simplificado em outros projetos. Ao planejar as adaptações para um site podemos definir que existirão apenas três pontos de adaptação, ou seja, três etapas de detalhamento que resultarão em&nbsp;wireframes&nbsp;e posteriormente em layouts.

Fonte:&nbsp;http://www.designadaptavel.com.br