Web sites para pessoas, em qualquer lugar ou dispositivo.
Web sites para pessoas, em qualquer lugar ou dispositivo.
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:
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.
De acordo com a metodologia adotada foi desenvolvida a primeira adaptação do wireframe 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 de point-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.
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.
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.
Um abraço a até o próximo artigo!
Novo artigo no blog #designAdaptavel ! O passo a passo dos wireframes do blog Design Adaptável http://t.co/rKIARFT
Novo artigo no meu blog #designAdaptavel ! O passo a passo dos wireframes do blog Design Adaptável http://t.co/rKIARFT
Que tal fazer 8 wireframes para cada página do sei site novo?
http://t.co/rKIARFT #designAdaptavel
Mais um ótimo artigo, parabens bruno já baixei o documento rsrs, e o que é melhor também uso o Fireworks para desenvolver wireframes e layout, rsrsrs
Frank, você conhece o Axure? É muito bom para wireframes e prototipação. Abs.
webadaptavel estou começando a usar o axure, e não ví em canto algum onde deixar o meu layout responsivo.
Victor, o programa não tem nenhum tipo de automatização para wireframes fluidos. Você deve fazer um estudo das variações do seu projeto e testar durante a prototipação no navegador. Abraços.
Bruno, estou quase copiando o para meu computador hehe… até separei uma pasta "Design Adaptavel" com subpastas: "Wireframes", "mobile-first"…. pendura na conta, rs…virei freguesa.
Pergunta: Como escolher os pontos de adaptação? Há projetos que irão usar apenas 3 ou 4 resoluções, e outros de ponta a ponta (1920px até 240px), como você obtem a melhor estratégia de escolha?
Sucesso!
Glaucia, esta é uma questão crucial… merece até um artigo!
Eu vejo duas formas. a) Você estipula no início do projeto os pontos de adaptação e projeta o layout para estas dimensões e b) Projeta a menor e a maior resolução, e faz os ajustes testando o protótipo no navegador.
A primeira solução (a) pode ser apoiada usando um dos vários frameworks que existem, só aqui (http://www.tutorialchip.com/css/css-framework-for-responsive-web-design/) já são 15!
A segunda solução (b) é feita usando um layout fluido. Quando você começar a testar o site no navegador você perceberá que chega um ponto em que era melhor ter mais colunas para distribuir o conteúdo. Estas alterações no layout pode ser de apenas uma parte do site, não necessariamente acrescentando uma nova coluna.
O mais importante de tudo é começar pelo mais simples. Mobile first!
Abraços.
Obrigada pela resposta, Bruno!