[dig2012] 11 - interfaces online

Interfaces OnlineEduardo Novais - Design de Interfaces Gráficas

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é fizeram 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 modificaçõ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 significativa.


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


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 pixelsiPhone4: 640 x 960 pixelsiPad2: 1024 x 768 pixelsiPad3: 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 desafio 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 fluído ou invés dos de largura fixa.


02. Navegação fixa


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 Netflix.


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 influência até pouco tempo. A coisa muda com a chegada do CSS3.


Esses arquétipos podem ser configurados 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áficos


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 final 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á influenciado 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-firefox-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://columnfivemedia.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.sassyduck.com.au

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

Design

Transcript of [dig2012] 11 - interfaces online