[dig2012] 11 - interfaces online

Interfaces Online
Eduardo Novais - Design de Interfaces Gráﬁcas

quarta-feira, 11 de abril de 2012

Quase todos temos informações sobre o
que é uma página web e sobre como ele é
feita


Vocês até ﬁzeram uma disciplina sobre isso.


:)


Mesmo todos sabendo de muito, é
necessário antes vermos conceitos básicos


Apresentação


Diferente do Design Editorial, uma página
web é renderizada no navegador e pode
sofrer modiﬁcações nesse processo.


p{
font-family:Verdana;
background-color: #7A2121;
color: #B93333;
text-decoration: underline;
word-spacing: Normal;
text-align: left;
letter-spacing: 1px;
text-indent: 15px;
line-height: 16px;
font-size: 10px;
font-weight: bold;
font-style: italic;
text-transform: uppercase;
}


Mac Firefox 2


Mac Safari 2


Mac Opera 9


Mac IE 5


PC IE 6 (Windows 2000)


PC IE 7


PC IE 8


PC Opera


PC Firefox


Na verdade, essas diferenças são muito sutis
com uma única linha de texto, mas você
pode ver como quando agravada, eles
poderiam adicionar até uma diferença muito
signiﬁcativa.


Mais importante é não conte com texto com
o posicionamento de layout especíﬁco


Tamanho


Em Comunicação Visual falamos em um site
com aproximadamente 1000x581px de
tamanho, não foi?


Tudo isso tem que ser adaptado quando se
fala em novos dispositivos para visualização
de uma página.


Samsung Galaxy S2: 480 x 800 pixels
iPhone4: 640 x 960 pixels
iPad2: 1024 x 768 pixels
iPad3: 2048 x 1536 pixels


Temos que desenvolver sites para serem
mostrados em computadores normais e que
podem ser adaptados para esses dispositivos
também.


A outra coisa a notar é que, as imagens
mostradas na página não podem ser muito
pesadas


Tendências


Não é nenhum segredo que as tendências
vêm e vão, com alguma pendurado por mais
tempo do que deveriam.

Mas as tendências são uma necessidade para
o desenvolvimento e crescimento do nosso
ofício. Tendências nascem, melhoram, e
muitas vezes, geram outras tendências.


Então, como um web designer, quando você
aplica as tendências de seus projetos,
coloque-se o desaﬁo de fazer do seu próprio
jeito.


01. Web design sensível


O que no futuro se tornará uma commodity,
ou seja, será o básico de uma página. Em
2012, ainda não.


Assim, espera-se em 2012, o crescimento de
sites com layout ﬂuído ou invés dos de
largura ﬁxa.


02. Navegação ﬁxa


Essa era uma técnica que estava
desaparecendo em 2010-11, mas que se
tornou ativa novamente com seu uso em
sites como Facebook e Netﬂix.


Isto pode melhorar dramaticamente o
desempenho do site.

A idéia de conceito é manter os links
internos, barra de navegação e logotipo
presas no mesmo local enquanto os
visitantes percorrem o conteúdo.


03. Círculos


Essa tendência estava um pouco morta e não
havia tido grande inﬂuência até pouco
tempo. A coisa muda com a chegada do
CSS3.


Esses arquétipos podem ser conﬁgurados
como links de navegação, ícones de rodapé,
etc.


04. Grandes Ilustrações
Vetoriais


Até certo tempo você não encontrava
trabalhos de ilustração muito ligados em
marcas na web. Mas a qualidade do talento
dos ilustradores e designer tem melhorado
muito.


05. Menus multi-coluna


Há momentos em que um site é composto
de muitos links. Normalmente, a solução é
mover os links na barra lateral.

Testes com usuários tem mostrado
resultados muito bons em manter ligações
fundamentais na parte superior das páginas.


Algumas tendências são muito bem
resolvidas, preto no branco. No entanto,
layouts multi-coluna são elegantes e
oferecem uma vasta gama de possibilidades
para se criar sites brilhantes.


A melhor maneira de se sentir confortável
com esse estilo é a práticar e experimentar.


6. Animações com
jQuery/CSS3/HTML5


Web design deve englobar a toda a
experiência do usuário, bem como a estética
de fantasia e animações.


7. Fitas e banners


Essa tendência havia começado a ganhar
força em 2011.


8. Fontes costumizáveis


Em 2011 esta tendência disparou em
popularidade, especialmente entre os
designers que trabalham com WordPress.


9. Infográﬁcos


Essa tendência certamente não afeta o
design web em geral, mas, enquanto
experiência do usuário, a apresentação do
conteúdo ter iniciando um nova era da
mídia.


Nunca antes a informação foi apresentada de
uma ferramenta maneira tão fácil de
consumir.


10. Simplicidade


O objetivo ﬁnal de qualquer site é levar seus
visitantes do ponto A ao B o mais rápido
possível.


Conclusão


O uso dessas tendências sempre será
inﬂuenciado pelo seu cliente e o objetivo que
ele pretende alcançar.


De qualquer forma, tais tendências devem
ser observadas e compreendidas.


Lembre-se de usa-las como referência e não
como cópia.


Referências


http://www.topresultsonline.com.au/the-
impact-for-web-design-from-ipad-and-iphone/

http://css-tricks.com/font-rendering-
differences-ﬁrefox-vs-ie-vs-safari/

http://webdesignledger.com/tips/web-design-
trends-in-2012

http://stuffandnonsense.co.uk/projects/
320andup/


http://ryanscherf.net/

http://www.comicsanscriminal.com/

http://www.netontwerp.com/index_en.htm

http://dotmick.com/

http://columnﬁvemedia.com/

http://www.mozilla.org/en-US/thunderbird/


http://mailchimp.com/

http://neuarmy.com/

http://www.bestmadeco.com/

http://letterlearner.com/

http://heartbreakerfashion.com/

http://www.sassyduck.com.au/


http://www.google.com/webfonts

http://www.adverblog.com/2011/08/18/some-
fun-facts-about-instagram-infographic/

http://visual.ly/

http://www.girlfriendnyc.com/

http://www.vernonclarke.com/index.html


http://snagly.de/

http://webdesignledger.com/inspiration/25-
fresh-examples-of-minimalist-web-designs


[dig2012] 11 - interfaces online

Mais conteúdo relacionado

Semelhante a [dig2012] 11 - interfaces online

Mais de Eduardo Novais

[dig2012] 11 - interfaces online