[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

quarta-feira, 11 de abril de 2012

Vocês até fizeram uma disciplina sobre isso.

quarta-feira, 11 de abril de 2012

:)

quarta-feira, 11 de abril de 2012

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

quarta-feira, 11 de abril de 2012

Apresentação

quarta-feira, 11 de abril de 2012

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

quarta-feira, 11 de abril de 2012

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;}

quarta-feira, 11 de abril de 2012

Mac Firefox 2

quarta-feira, 11 de abril de 2012

Mac Safari 2

quarta-feira, 11 de abril de 2012

Mac Opera 9

quarta-feira, 11 de abril de 2012

Mac IE 5

quarta-feira, 11 de abril de 2012

PC IE 6 (Windows 2000)

quarta-feira, 11 de abril de 2012

PC IE 7

quarta-feira, 11 de abril de 2012

PC IE 8

quarta-feira, 11 de abril de 2012

PC Opera

quarta-feira, 11 de abril de 2012

PC Firefox

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

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.

quarta-feira, 11 de abril de 2012

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

quarta-feira, 11 de abril de 2012

Tamanho

quarta-feira, 11 de abril de 2012

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

quarta-feira, 11 de abril de 2012

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

quarta-feira, 11 de abril de 2012

Samsung Galaxy S2: 480 x 800 pixelsiPhone4: 640 x 960 pixelsiPad2: 1024 x 768 pixelsiPad3: 2048 x 1536 pixels

quarta-feira, 11 de abril de 2012

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

quarta-feira, 11 de abril de 2012

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

quarta-feira, 11 de abril de 2012

Tendências

quarta-feira, 11 de abril de 2012

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.

quarta-feira, 11 de abril de 2012

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.

quarta-feira, 11 de abril de 2012

01. Web design sensível

quarta-feira, 11 de abril de 2012

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

quarta-feira, 11 de abril de 2012

Assim, espera-se em 2012, o crescimento de sites com layout fluído ou invés dos de largura fixa.

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

02. Navegação fixa

quarta-feira, 11 de abril de 2012

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.

quarta-feira, 11 de abril de 2012

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.

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

03. Círculos

quarta-feira, 11 de abril de 2012

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.

quarta-feira, 11 de abril de 2012

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

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

04. Grandes Ilustrações Vetoriais

quarta-feira, 11 de abril de 2012

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.

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

05. Menus multi-coluna

quarta-feira, 11 de abril de 2012

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.

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

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.

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

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

quarta-feira, 11 de abril de 2012

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

quarta-feira, 11 de abril de 2012

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

quarta-feira, 11 de abril de 2012

7. Fitas e banners

quarta-feira, 11 de abril de 2012

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

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

8. Fontes costumizáveis

quarta-feira, 11 de abril de 2012

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

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

9. Infográficos

quarta-feira, 11 de abril de 2012

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.

quarta-feira, 11 de abril de 2012

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

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

10. Simplicidade

quarta-feira, 11 de abril de 2012

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

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

quarta-feira, 11 de abril de 2012

Conclusão

quarta-feira, 11 de abril de 2012

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

quarta-feira, 11 de abril de 2012

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

quarta-feira, 11 de abril de 2012

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

quarta-feira, 11 de abril de 2012

Referências

quarta-feira, 11 de abril de 2012

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/

quarta-feira, 11 de abril de 2012

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/

quarta-feira, 11 de abril de 2012

http://mailchimp.com/

http://neuarmy.com/

http://www.bestmadeco.com/

http://letterlearner.com/

http://heartbreakerfashion.com/

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

quarta-feira, 11 de abril de 2012

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

quarta-feira, 11 de abril de 2012

http://snagly.de/

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

quarta-feira, 11 de abril de 2012