Menu

Tableless Versão do artigo impresso

Para Iniciantes
CSS3
HTML5
Javascript
JQuery
WordPress
UX & Design
SEO
Acessibilidade
Artigos
Traduções

17 de abril de 2013 Design

Design Responsivo na prática: do rascunho ao
digital
Quer criar um projeto de design responsivo e não sabe por onde começar? Acompanhe passo­a­passo a
criação de um layout do wireframe até a apresentação do design com indicações de artigos, dicas e
ferramentas para facilitar o seu processo criativo.

Por Dani Guerrato

Você já convenceu o seu chefe ou cliente que Design Responsivo é a última bolacha de chocolate do
pacote, já sabe como trabalhar com media queries e como desenvolver códigos bonitos, semânticos e
cheirosos. Mas a dúvida ainda persiste – por onde começar? Você não está sozinho. Esta é uma dúvida
bem frequente. Por isto resolvi escrever um artigo básico só com dicas de prototipagem para design
responsivo coletando algumas ferramentas úteis, artigos interessantes e comentando também um
pouco da minha experiência pessoal ao lidar com o assunto no dia­a­dia gerindo um pequeno estúdio
de webdesign.

Neste artigo vamos criar juntos um layout do wireframe ao design final. Assim você poderá
acompanhar um processo passo­a­passo e adapta­lo para o seu fluxo de trabalho pessoal. Não tenho a
pretensão de criar um guia definitivo, nem comentar técnicas de desenvolvimento mais avançadas.
Mas tenho certeza que estas dicas vão ser um bom ponto de partida para você iniciar o seu projeto.
Vamos a elas!

O conteúdo é o rei
O primeiro passo para projetar – não apenas um site responsivo, mas qualquer layout para a internet
– é o inventório de conteúdo. É ele que vai ditar qual é a melhor estrutura para o layout. Raramente o
seu cliente vai possuir os textos, videos e imagens finais prontinhos para você diagramar. Mas o ideal é
sempre ter ao menos uma noção de qual é o tipo de conteúdo que você pretende utilizar. Para isto é
importante montar um briefing – sim, mesmo se o site for para você mesmo. Isto pode variar bastante
de complexidade, mas o ideal é saber a resposta de algumas perguntas básicas sobre o tipo de
conteúdo que você pretende apresentar para o mundo. O que você pretende exibir na página inicial?
Notícias? Serviços? Produtos? Imagens? Qual o tamanho médio dos textos? Existirá um espaço
destinado a anúncios publicitários? Qual é o formato do logotipo? Com estas respostas em mãos esta
na hora de organizar todos estes elementos em uma estrutura lógica.

Vamos então projetar um layout de uma página inicial de uma empresa fictícia que deve conter as
seguintes informações:

1.  logotipo
2.  navegação
3.  banner apresentando produtos e serviços
4.  blocos com imagens e textos curtos
5.  créditos

Por onde começar o layout?
A resposta é bem simples. Pelo papel. Não importa se você vai usar um bloco de notas velho, o verso
de um guardanapo, um template impresso da internet ou um caderno especialmente projetado para
este fim, comece por um rascunho de wireframe no papel. Eu costumo desenhar basicamente duas
coisas. Uma teia de navegação (“Que­link­leva­para­onde”) e o esqueleto básico do site. Não precisa
ficar bonito. Minha habilidade para desenho se resume em bonecos de palito e partidas de Drawsome
com estranhos da internet. Ainda assim é fácil criar um wireframe. Use quadrados para imagens e
linhas para texto. O importante é você – e o resto da sua equipe se for o caso – terem um ponto de
partida. O ideal é criar ao menos três versões principais: desktops, tablets e smartphones. Estas
categorias são meio utópicas já que existem centenas de dispositivos que ficam no meio termo, mas
você precisa ter um ponto de partida, certo? Escolher por qual dos três esqueletos começar é uma
questão bem pessoal. Alguns advogam firmemente o mobile first, mas aqui por uma questão de
didática vou começar pelo desktop.

Grids são seus amigos
Design responsivo é basicamente como montar um quebra cabeça onde você pode esticar,
encolher, quebrar e dobrar estruturas. Realizar esta tarefa será muito mais fácil se você
construir um layout sustentado por um grid.

Não é absolutamente necessário utilizar um grid em seu CSS (embora seja uma prática
recomendável), mas se o seu wireframe básico estiver organizado neste formato ajuda bastante na
hora de projetar o design de maneira mais fluida, simétrica e organizada. Isto por que você pode
simplesmente re­arranjar os blocos e colunas do seu layout de maneira mais lógica e matemática, o
que vai refletir em uma maior coesão do design final.

Esta parte do fluxo de trabalho é bem parecida com criar um layout para design “normal”. O primeiro
passo portanto é criar o tal do grid, basicamente um conjunto de linhas “invisiveis” que vão sustentar o
seu design. Pense que você vai ter que quebrar esta estrutura em pedaços menores e, para manter a
simetria o ideal é escolher um número par que possa ser divisível por 2, 3 e/ou 4… Por isto grids de
12, 16, 18 ou 24 colunas são bem comuns. (Você pode escolher o número que quiser. Eu mesma já
trabalhei com 14 colunas. Deu mais trabalho. Não diga que não avisei… ). Não se esqueça do espaço
das margens entre as colunas.

O wireframe
Se você precisar reescrever completamente todos os elementos do CSS você está fazendo design
adaptativo, o que tem seus métodos mas não é responsivo.

Design responsivo é focado na economia. Economia de tempo, economia de peso de
arquivos, economia de código. Pense em escrever estruturas que, embora sofram
adaptações, possam ser re­aproveitadas.

Desktops

Este é o exemplo de wireframe que vamos criar passo­a­passo para o nosso exemplo. A estrutura é
bem simples: um logotipo no canto superior esquerdo, um menu no topo a direita, um banner, 4
destaques com texto e foto e um rodapé.

Este é o meu rascunho inicial:
E agora o mesmo modelo recriado no Photoshop:

Tablets

A técnica para adaptar esta estrutura para as outras versões é simples. Diminua o número de colunas
no grid. Se inicialmente tinhamos 16 colunas no desktop, teremos 10 no tablet e 4 no smartphone,
por exemplo. O conteúdo deve se re­arranjar para caber nesta estrutura menor. Então no tablet ao
invés de 4 destaques lado­a­lado temos 2 fileiras com 2 destaques cada. Para adequar­se a estas
mudanças as imagens ficaram maiores. Outra modificação foi um ajuste  no tamanho do texto do
menu.
 

Smartphones

Como a tela dos smartphones é ainda menor, é necessário re­arranjar as estruturas novamente e fazer
alguns outros ajustes. Isto não significa necessariamente diminuir os elementos de tamanho. Lembre­
se que a maior parte dos dispositivos móveis utilizam touch screens. Você deve adaptar os elementos
considerando esta área de toque. Links muito pequenos e juntinhos são difíceis selecionar. O ideal é
que o usuário possa navegar no site sem precisar dar zoom. Por isto optei por colapsar os elementos
em um menu drop­down. Os destaques agora ocupam o espaço total do wrap. Optei por juntar os 4
destaques em uma navegação estilo slider (navegáveis através de seletores em forma de “bolinhas”).
Outra mudança estetica significativa foi o banner. Como pretendo incluir texto em HTML  com os
serviços principais da empresa optei por deixa­lo em uma caixa preta abaixo da foto. Desta maneira as
imagens ficam mais visíveis e o formato não prejudica a leitura do texto.
Resoluções
Existem dezenas de resoluções diferentes e, embora este seja o objetivo final, é bem difícil ter um
layout que vai ficar perfeito a cada ponto de quebra (difícil, não impossível). O ideal, portanto, é ter
em mente quais são os formatos mais comuns e focalizar para que ao menos nestes estágios o design
esteja funcionando perfeitamente. Considere portanto estas resoluções básicas:

1200 pixels – Desktops com monitores widescreen.
960 pixels – Tablets em formato paisagem e monitores antigos.
768 pixels – Tablets em formato retrato.
480 pixels – Smartphones em formato paisagem.
320 pixels – Smartphones em formato retrato.

Para testar o seu HTML final em diferentes resoluções você pode utilizar algum add­on ou
bookmarklet para o seu browser. Outra dica super prática é um Wallpaper com marcações em pixels.

O mock­up
Hora de criar esta estrutura no seu programa gráfico favorito. Você pode montar o seu próprio grid
utilizando linhas guias ou baixar um modelo pronto como o Responsive Grid PSD ou o Frameless. Para
este tutorial utilizei uma versão modificada do Frameless que você pode baixar aqui.

Nota sobre retina display

É importante ter em mente que alguns aparelhos tem a densidade de pixels superior a 1. É
interessante, em termos de qualidade de apresentação do layout, criar um arquivo com o dobro da
resolução nestes casos. Então dobre o tamanho do seu PSD na versão para smartphones (o que
significa um mockup de 960x640px). Assim, na hora de exportar os elementos, você pode criar
imagens em alta resolução para dispositivos retina.

Apresentação

Na minha empresa criamos modelos estáticos para serem aprovados pelos clientes antes de partirmos
para etapa de desenvolvimento do HTML/CSS. Na minha experiência, mesmo se nenhum conteúdo for
fornecido previamente, fazer um esforcinho a mais e utilizar imagens e textos parecidas com as finais
ajudar o seu layout a ser aprovado. Isto acontece por que, ao contrário de nós designers e
desenvolvedores, as pessoas “normais” possuem naturalmente uma certa dificuldade de abstrair que
aqueles quadrados e caixinhas são um site. Adicionar imagens e textos a um tema pode dar mais
trabalho, mas é acrescentar contexto e propósito ao seu design, o que por sua vez causa muito mais
empatia e identificação.

Para o nosso exemplo criei a empresa fictícia Space Tour.

Mesmo com um conteúdo falso aplicado ainda é difícil de imaginar como o produto final vai se
comportar online, principalmente no caso de dispositivos móveis. Para que o cliente possa visualizar
como o layout vai se comportar é interessante utilizar mock­ups de hardwares reais. Basta procurar no
Google que existem diversos recursos gratuitos para este fim. O site PSD Covers, por exemplo, possui
actions e templates de Photoshop em alta resolução que podem ajudar bastante na apresentação final.
O dribbble também pode ser uma boa fonte para recursos gratuitos.
Um processo em evolução
Com o passar do tempo este fluxo de trabalho torna­se natural. Ao observar um layout você consegue
mentalmente criar os pontos­de­quebra e algumas fases deste processo podem ser puladas. Você
pode, por exemplo, trabalhar com apenas dois formatos de wireframe: um para computadores/tablets
e um para smartphones. Existem pessoas que preferem ainda queimar completamente estas etapas e
desenvolver diretamente no CSS. Cada um tem o seu modo de trabalho e nenhum é necessariamente
melhor ou pior que o outro. Vale a pena testar diferentes abordagens até encontrar o que funciona
melhor para você, sua equipe e seus clientes.

Conclusão
Bem, agora você já sabe como criar um protótipo de design responsivo. Com o layout aprovado entra a
segunda etapa: colocar ele para funcionar. Para isto existem diversos artigos sobre Design Responsivo
aqui no Tableless que podem te ajudar como . Ou você pode ainda consultar a série de artigos do meu
blog . Quer mais? O repositório Responsive Resources possui uma lista gigante de artigos, recursos e
ferramentas úteis sobre o tema. Bons estudos!

0
 Por Dani Guerrato
Uma geek de 26 anos apaixonada por cinema, literatura, tecnologia e, é claro,
internet! É designer, desenvolvedora front­end e co­fundadora do estúdio PopUp
Design, localizado em São Paulo. Adora semântica e acha divertido ler o código fonte
do site dos outros.

http://blog.popupdesign.com.br

PELA WEB TAMBÉM EM TABLELESS O que é isso?

Citizens Over 50 May Qualify to Get $20,500 Design para Google Glass 8 comentários
this Year Moneynews
O Designer Gladiador 11 comentários
Avoid Alzheimer's Disease: Here's What May
Cause It Newsmax Health
Como escrever e-mails de apresentação
The Average Yearly Salary of an Airline Pilot 11 comentários
eHow
HTML 5 e SEO: mitos e verdades 23 comentários
VIDEO: Michael Jordan's Rare Workout
Footage Stack

42 comentários ★ 4

Deixar uma mensagem...

Mais votados Comunidade Compartilhar ⤤ ⚙

André Buzzo • 5 meses atrás
"Terra: sua linda" foi demais ... mas é interessante o que você diz sobre sempre montarmos o
layout com imagens que sejam direcionadas ao conteúdo.

Embora eu ache um "pensamento lógico" para quem cria/prototipa/desenvolve, realmente é

excelente. Dá-se a cara do site do cliente e o mesmo já pensa... "Sassinhora, que bacana!".

Não acho que isso seja um mimo. Acho que faz parte do nosso trabalho.

Gostei do artigo. Achei que seria mais técnico, mas o foi no que precisava ser. Texto gostoso de
ler, fácil de digerir.

Parabéns moça!
15 △ ▽ Responder Compartilhar ›
Avatar Mario Lima Cavalcanti • 5 meses atrás
Oi, Dani. Parabéns pelo artigo. Na sua opinião, qual a melhor maneira de trabalhar com a redução
de imagens (logotipo, imagens de destaque etc.) nesse contexto responsivo? Seria usando DIVs
clicáveis com background images?
8 △ ▽ Responder Compartilhar ›

Avatar Kevin Oliveira • 5 meses atrás

O artigo ficou excelente e fico feliz em saber que, quando vou criar um layout, faço exatamente
deste jeito. :D
5 △ ▽ Responder Compartilhar ›

Avatar Marcelo Aquino • 5 meses atrás

Excelente artigo, um passo a passo completo e bem escrito. Na hora de
testar o 'produto final' nas resoluções, gosto de usar o Web Developer
Tools no Firefox (às vezes até durante). Para teste nos dispositivos,
gosto de usar o "Keynote MITE", onde posso testar celulares, smartphones e tablets. Muito bom!
3 △ ▽ Responder Compartilhar ›

Avatar Fernando Souza • 5 meses atrás

Realmente, "Terra:Sua Linda" vai ficar na memória. Muito bom! Muito bom seus textos. Ja ta no
bookmark! parabens!
2 △ ▽ Responder Compartilhar ›

Avatar Vinícius Moraes de Araújo • 5 meses atrás

O artigo veio em boa hora, estamos trabalhando justamente com isso aqui na empresa e é sempre
bom ler artigos bem escritos como este.
2 △ ▽ Responder Compartilhar ›

Avatar Bruno Morejon • 4 meses atrás

Parabéns pelo excelente artigo e links! É muito importante planejar antes de executar.
1 △ ▽ Responder Compartilhar ›

Avatar Eduardo Dantas • 5 meses atrás

Estava procurando conteúdo como esse! Parabéns!
1 △ ▽ Responder Compartilhar ›

Avatar Rupert • 5 meses atrás

Ótimo post!!!! Mas Photoshop? Eca!!
1 △ ▽ Responder Compartilhar ›

Avatar Robinson Rios da Silva • 5 meses atrás

Muito bom Dani, parabéns pelo artigo, realmente é um ponto de partida para quem não sabe por
onde começar.
1 △ ▽ Responder Compartilhar ›

Avatar Wanderson Valério • 7 dias atrás

Realmente o artigo é muito bom... Porém, o que nós iniciantes queremos ver em um tutorial sobre
design responsivo é código... Eu li o artigo completamente e você explicou somente o tipo de
conteúdo que devemos exibir e também para diminuir o número de colunas. Eu sei que nem tenho
 conteúdo que devemos exibir e também para diminuir o número de colunas. Eu sei que nem tenho
o direito de reclamar, entendo que você faz isso aqui com bom gosto e voluntariamente. No mais,
parabéns!
△ ▽ Responder Compartilhar ›

Avatar aslhey • 22 dias atrás

Otimo Gostei bastante
△ ▽ Responder Compartilhar ›

Avatar Carol • um mês atrás

EXCELENTE!
Muito bem explicado e detalhado na medida..
Parabéns pelo ótimo trabalho.. agora dá licença que vou ler o resto do site... ;-)
△ ▽ Responder Compartilhar ›

Avatar Rafael Caride • 2 meses atrás

Gostei MUITO... bem explicado a parte de layout, planejamento, mesmo quem está iniciando nessa
carreira consegue entender, se tornando um incentivo... parabéns!!!
△ ▽ Responder Compartilhar ›

Avatar Diego • 2 meses atrás

Parabéns pelos Post!
△ ▽ Responder Compartilhar ›

Avatar Afrânio Costa • 2 meses atrás

Vi que no layout para resolução de 320px do site o menu vira drop down.
Como isso é feito? Eu coloco os dois menus no html e display: none na folha de estilo de um
deles?
△ ▽ Responder Compartilhar ›

Avatar Afrânio Costa • 2 meses atrás

Achei muito bacana o artigo, mas tenho uma dúvida: Se eu tenho um html apenas, como faço para
ativar o slide no iphone por exemplo e escondê-lo do css para desktop?
△ ▽ Responder Compartilhar ›

Avatar Hericky Ritchelliy • 2 meses atrás

Show de bola, tks!

Obs: Nada melhor que apertar F12 e desconfigurar o site dos outros momentaneamente, e claro
aprender com codigos diferentes!
△ ▽ Responder Compartilhar ›

Avatar Guest • 2 meses atrás

Show! rs Nada melhor que apertar F12 e desconfigurar o site dos outros momentaneamente, e
claro aprender com codigos diferentes!
△ ▽ Responder Compartilhar ›

Avatar Marcos • 2 meses atrás

Entendi perfeitamente a questão do EM e %, mas lie seus outros artigos no seu blog e fiquei
confuso quanto ao calcular o margin.
 confuso quanto ao calcular o margin.
eu quero margin cima e em baixo, como eu calcularia? levaria em conta a altura (Height) do
elemento?
e o font-size:62,5%; não funcionou to no FF.

fiquei bastante interessado em seus artigos, parabéns pela ótima esplicação.

△ ▽ Responder Compartilhar ›

Avatar Frederico Marques de Castro • 2 meses atrás

Ao ver a quantidade de elogios, achei desnecessário, mas fiz questão: ótimo artigo. Parabéns!
△ ▽ Responder Compartilhar ›

Avatar Guest • 3 meses atrás

Oi, Dani! Antes de mais nada, obrigado pelo post! Quando se projeta layouts responsivos,
necessariamente temos que projetar também em modo paisagem ou basta tomarmos como
parâmetro o modo retrato em desktop, tablet e smartphone?
△ ▽ Responder Compartilhar ›

Avatar sadas • 3 meses atrás

asdasdasds
△ ▽ Responder Compartilhar ›

Avatar Eduardo Dantas Correia • 4 meses atrás

Achei o tutorial bem produtivo e positivo. Senti falta de umas dicas de como aplicar na prática, ou
seja, uma telinhas passo a passo do teu layout no grid, mas ai seria pedir demais né? Vou ler as
indicações aqui, obrigado e parabéns! Tenho certeza que a internet seria muito mais produtiva se
todos tivessem a mesma iniciativa que você.
△ ▽ Responder Compartilhar ›

Avatar Cleberson Madureira Carvalho • 5 meses atrás

...parabéns pelo artigo!
△ ▽ Responder Compartilhar ›

Avatar Will Sales • 5 meses atrás

Mais uma vez, ótimo artigo Dani. Geralmente lemos artigos sobre RWD abordando mais a
codificação, etc. E você tocou num ponto muito importante: o planejamento. Gostei bastante
também quando você comentou sobre as resoluções/breakpoints. Obrigado.
△ ▽ Responder Compartilhar ›

Avatar Luciano • 5 meses atrás

Num gostei dessa dica naum, pois estou no começo e fiquei na mesma...
△ ▽ Responder Compartilhar ›

Avatar Pierre Freire • 5 meses atrás

Um excelente post, com muita qualidade técnica e com uma didática impressionante. Muito
obrigado pelas informações.
△ ▽ Responder Compartilhar ›

Avatar Allan Alexandre • 5 meses atrás

Parabéns Dani, ficou bem simples e ao mesmo tempo bastante instigante.. !
 Parabéns Dani, ficou bem simples e ao mesmo tempo bastante instigante.. !
△ ▽ Responder Compartilhar ›

Avatar Alessandro Guimarães • 5 meses atrás

Artigo interessante! Gosto de utilizar plugin do firefox Webdeveloper para testar layouts
responsive.
△ ▽ Responder Compartilhar ›

Avatar Mario Casasanta • 5 meses atrás

Dani sua linda. mto bom.. da até vergonha ser web development com uns colegas desses.. mto
bom o artigo.. tenho que estudar mais.. o artigo está de parabéns.
△ ▽ Responder Compartilhar ›

Avatar Renan Souza • 5 meses atrás

Nossa Dani, foi o melhor artigo sobre responsive web que já li, parabéns!
△ ▽ Responder Compartilhar ›

Avatar Fabiano Maximiano • 5 meses atrás

Primeiramente obrigado, suas dicas estao fazendo a diferença no dia dia desse programador front
metido a Designer.
Tudo que precisava sobre o assunto site responsivo voce apresentou neste topico, o que me
ajudou bastante.

Parabéns pela materia!

△ ▽ Responder Compartilhar ›

Avatar Meialisson Grespan Lazari • 5 meses atrás

Muito bom. Senti falta disso há pouco tempo, até troquei alguns e-mails com Dani e ela me ajudou
bastante. Talvez até a ideia deste artigo deve ter nascido a partir de e-mails como o meu, ou não?
:) Muito legal a iniciativa e o artigo em si, parabéns.
△ ▽ Responder Compartilhar ›

Dani Guerrato > Meialisson Grespan Lazari • 5 meses atrás

Oi Meialisson!
Justamente. Recebi mais alguns e-mails como o seu e eles serviram de ponto de partida
para este post...
Continuem enviando suas dúvidas! :)
Um abraço!
△ ▽ Responder Compartilhar ›

Avatar Felipe • 5 meses atrás

Outro grande artigo. Está se superando cada vez mais!

Fazer um "design responsivo" vai muito além de media queries e carregar em bloco no mobile.
Você colocou isso muito bem.

Parabéns.
△ ▽ Responder Compartilhar ›

Avatar Gabriel Medina • 5 meses atrás

Show de bola! :}
 Show de bola! :}
△ ▽ Responder Compartilhar ›

Avatar Davidson Rodrigo • 5 meses atrás

Excelente!
△ ▽ Responder Compartilhar ›

Avatar Lucas Martins • 5 meses atrás

Parabéns pelo artigo, muito bom mesmo! ;)
△ ▽ Responder Compartilhar ›

Avatar Theodoro Caliari • 5 meses atrás

Link bookmarklet quebrado... pode corrigir please? :)
△ ▽ Responder Compartilhar ›

Dani Guerrato > Theodoro Caliari • 5 meses atrás

Oi Theodoro!
Obrigada pelo aviso. Já está corrigido!
Um abraço!
△ ▽ Responder Compartilhar ›

Theodoro Caliari > Dani Guerrato • 3 meses atrás

Lindo! muito obrigado! ;)
△ ▽ Responder Compartilhar ›

✉ Assinar feed d Add Disqus to your site

Mais artigos
24 set SEO
Redesign e SEO
Evite problemas com sua campanha na hora de implementar a cara nova do seu site

Por Douglas Faria
23 set Mercado

A sua empresa tem alma e não é a do seu cliente
Alguns clientes confundem a postura pessoal com a profissional, o problema a ser superado é
quando quer impor o seu estilo para o projeto. Isso também vale para o designer que tenta
impor seu estilo no projeto do cliente.

Por Bernard De Luna
23 set Design

Sobre Cor e Webdesign II
Entenda a diferença entre matiz, luminosidade e saturação, aprenda a criar paletas de cores
funcionais e conheça a fórmula mágica do contraste.

Por Dani Guerrato
19 set Artigos

Ferramentas e sites para tornar mais ágil o seu
desenvolvimento
No dia­a­dia, a correria em cumprir prazos nos faz buscar e fazer uso de ferramentas que possam
auxiliar na velocidade de desenvolvimento. Seja no front ou no design, em tempos de mudanças
e transições, nada mais justo que uma lista de algumas ferramentas especiais para que você
mantenha seu processo profissional e ágil.

Por Thaiana Poplade
17 set Javascript

React: JavaScript reativo
Conheça a biblioteca React desenvolvida por Facebook e Instagram, que apresenta um novo
paradigma para o desenvolvimento de aplicações web.

Por Davi Ferreira
16 set Artigos

5 Razões para não fazer atendimento em redes sociais
Entenda por que atender seu cliente pelas redes sociais não é tão bom quanto parece.

Por Manoel Netto
12 set Client­Side

Efeito Parallax, o novo Flash?
O efeito parallax tem sido a "modinha" do momento, mas alguns profissionais dizem que o efeito
 parallax prejudica no SEO do seu site, já outros dizem que isso não acontece e é exatamente isso
que vamos explorar aqui com o objetivo de fornecer uma visão geral sobre o assunto.

Por thiago­pacheco
11 set Artigos

Redução Progressiva
Entenda como criar interfaces que se adaptam automaticamente de acordo com o perfil de uso
do usuário.

Por Dani Guerrato
10 set Acessibilidade

Sobre organizar informação
Um pensamento sobre organização de informação.

Por Diego Eis
9 set Design

3 patinhos foram passear. Por que? Quem eram eles?
Usuários tomam decisões a todo momento, você precisa identificar os perfis de usuários, assim
como seus objetivos e comportamentos antes de projetar sua interface, assim saberá criar um
verdadeiro Design centrado no usuário.

Por Bernard De Luna

Tableless © 2003 ­ 2013 / 10 anos, véi! Versão do artigo impresso
Arquitetura de Informação e UX: Diego Eis. Design: Luis Vilela. Ilustrações:
Tilman Zitzmann.