Your SlideShare is downloading. ×

[dig2012] 11 - interfaces online

544

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
544
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Interfaces Online Eduardo Novais - Design de Interfaces Gráficasquarta-feira, 11 de abril de 2012
  • 2. Quase todos temos informações sobre o que é uma página web e sobre como ele é feitaquarta-feira, 11 de abril de 2012
  • 3. Vocês até fizeram uma disciplina sobre isso.quarta-feira, 11 de abril de 2012
  • 4. :)quarta-feira, 11 de abril de 2012
  • 5. Mesmo todos sabendo de muito, é necessário antes vermos conceitos básicosquarta-feira, 11 de abril de 2012
  • 6. Apresentaçãoquarta-feira, 11 de abril de 2012
  • 7. 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
  • 8. 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
  • 9. Mac Firefox 2quarta-feira, 11 de abril de 2012
  • 10. Mac Safari 2quarta-feira, 11 de abril de 2012
  • 11. Mac Opera 9quarta-feira, 11 de abril de 2012
  • 12. Mac IE 5quarta-feira, 11 de abril de 2012
  • 13. PC IE 6 (Windows 2000)quarta-feira, 11 de abril de 2012
  • 14. PC IE 7quarta-feira, 11 de abril de 2012
  • 15. PC IE 8quarta-feira, 11 de abril de 2012
  • 16. PC Operaquarta-feira, 11 de abril de 2012
  • 17. PC Firefoxquarta-feira, 11 de abril de 2012
  • 18. quarta-feira, 11 de abril de 2012
  • 19. 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
  • 20. Mais importante é não conte com texto com o posicionamento de layout específicoquarta-feira, 11 de abril de 2012
  • 21. Tamanhoquarta-feira, 11 de abril de 2012
  • 22. Em Comunicação Visual falamos em um site com aproximadamente 1000x581px de tamanho, não foi?quarta-feira, 11 de abril de 2012
  • 23. 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
  • 24. Samsung Galaxy S2: 480 x 800 pixels iPhone4: 640 x 960 pixels iPad2: 1024 x 768 pixels iPad3: 2048 x 1536 pixelsquarta-feira, 11 de abril de 2012
  • 25. 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
  • 26. A outra coisa a notar é que, as imagens mostradas na página não podem ser muito pesadasquarta-feira, 11 de abril de 2012
  • 27. Tendênciasquarta-feira, 11 de abril de 2012
  • 28. 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
  • 29. 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
  • 30. 01. Web design sensívelquarta-feira, 11 de abril de 2012
  • 31. 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
  • 32. 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
  • 33. quarta-feira, 11 de abril de 2012
  • 34. quarta-feira, 11 de abril de 2012
  • 35. quarta-feira, 11 de abril de 2012
  • 36. 02. Navegação fixaquarta-feira, 11 de abril de 2012
  • 37. 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
  • 38. 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
  • 39. quarta-feira, 11 de abril de 2012
  • 40. quarta-feira, 11 de abril de 2012
  • 41. quarta-feira, 11 de abril de 2012
  • 42. quarta-feira, 11 de abril de 2012
  • 43. quarta-feira, 11 de abril de 2012
  • 44. quarta-feira, 11 de abril de 2012
  • 45. quarta-feira, 11 de abril de 2012
  • 46. quarta-feira, 11 de abril de 2012
  • 47. quarta-feira, 11 de abril de 2012
  • 48. quarta-feira, 11 de abril de 2012
  • 49. 03. Círculosquarta-feira, 11 de abril de 2012
  • 50. 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
  • 51. Esses arquétipos podem ser configurados como links de navegação, ícones de rodapé, etc.quarta-feira, 11 de abril de 2012
  • 52. quarta-feira, 11 de abril de 2012
  • 53. quarta-feira, 11 de abril de 2012
  • 54. 04. Grandes Ilustrações Vetoriaisquarta-feira, 11 de abril de 2012
  • 55. 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
  • 56. quarta-feira, 11 de abril de 2012
  • 57. quarta-feira, 11 de abril de 2012
  • 58. 05. Menus multi-colunaquarta-feira, 11 de abril de 2012
  • 59. 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
  • 60. quarta-feira, 11 de abril de 2012
  • 61. 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
  • 62. quarta-feira, 11 de abril de 2012
  • 63. A melhor maneira de se sentir confortável com esse estilo é a práticar e experimentar.quarta-feira, 11 de abril de 2012
  • 64. 6. Animações com jQuery/CSS3/HTML5quarta-feira, 11 de abril de 2012
  • 65. 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
  • 66. 7. Fitas e bannersquarta-feira, 11 de abril de 2012
  • 67. Essa tendência havia começado a ganhar força em 2011.quarta-feira, 11 de abril de 2012
  • 68. quarta-feira, 11 de abril de 2012
  • 69. 8. Fontes costumizáveisquarta-feira, 11 de abril de 2012
  • 70. Em 2011 esta tendência disparou em popularidade, especialmente entre os designers que trabalham com WordPress.quarta-feira, 11 de abril de 2012
  • 71. quarta-feira, 11 de abril de 2012
  • 72. quarta-feira, 11 de abril de 2012
  • 73. quarta-feira, 11 de abril de 2012
  • 74. 9. Infográficosquarta-feira, 11 de abril de 2012
  • 75. 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
  • 76. Nunca antes a informação foi apresentada de uma ferramenta maneira tão fácil de consumir.quarta-feira, 11 de abril de 2012
  • 77. quarta-feira, 11 de abril de 2012
  • 78. quarta-feira, 11 de abril de 2012
  • 79. quarta-feira, 11 de abril de 2012
  • 80. 10. Simplicidadequarta-feira, 11 de abril de 2012
  • 81. 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
  • 82. quarta-feira, 11 de abril de 2012
  • 83. quarta-feira, 11 de abril de 2012
  • 84. quarta-feira, 11 de abril de 2012
  • 85. Conclusãoquarta-feira, 11 de abril de 2012
  • 86. 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
  • 87. De qualquer forma, tais tendências devem ser observadas e compreendidas.quarta-feira, 11 de abril de 2012
  • 88. Lembre-se de usa-las como referência e não como cópia.quarta-feira, 11 de abril de 2012
  • 89. Referênciasquarta-feira, 11 de abril de 2012
  • 90. 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
  • 91. 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
  • 92. 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
  • 93. 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.htmlquarta-feira, 11 de abril de 2012
  • 94. http://snagly.de/ http://webdesignledger.com/inspiration/25- fresh-examples-of-minimalist-web-designsquarta-feira, 11 de abril de 2012

×