[dig2012] 11 - interfaces online

832 views

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
832
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

[dig2012] 11 - interfaces online

  1. 1. Interfaces Online Eduardo Novais - Design de Interfaces Gráficasquarta-feira, 11 de abril de 2012
  2. 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. 3. Vocês até fizeram uma disciplina sobre isso.quarta-feira, 11 de abril de 2012
  4. 4. :)quarta-feira, 11 de abril de 2012
  5. 5. Mesmo todos sabendo de muito, é necessário antes vermos conceitos básicosquarta-feira, 11 de abril de 2012
  6. 6. Apresentaçãoquarta-feira, 11 de abril de 2012
  7. 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. 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. 9. Mac Firefox 2quarta-feira, 11 de abril de 2012
  10. 10. Mac Safari 2quarta-feira, 11 de abril de 2012
  11. 11. Mac Opera 9quarta-feira, 11 de abril de 2012
  12. 12. Mac IE 5quarta-feira, 11 de abril de 2012
  13. 13. PC IE 6 (Windows 2000)quarta-feira, 11 de abril de 2012
  14. 14. PC IE 7quarta-feira, 11 de abril de 2012
  15. 15. PC IE 8quarta-feira, 11 de abril de 2012
  16. 16. PC Operaquarta-feira, 11 de abril de 2012
  17. 17. PC Firefoxquarta-feira, 11 de abril de 2012
  18. 18. quarta-feira, 11 de abril de 2012
  19. 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. 20. Mais importante é não conte com texto com o posicionamento de layout específicoquarta-feira, 11 de abril de 2012
  21. 21. Tamanhoquarta-feira, 11 de abril de 2012
  22. 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. 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. 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. 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. 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. 27. Tendênciasquarta-feira, 11 de abril de 2012
  28. 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. 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. 30. 01. Web design sensívelquarta-feira, 11 de abril de 2012
  31. 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. 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. 33. quarta-feira, 11 de abril de 2012
  34. 34. quarta-feira, 11 de abril de 2012
  35. 35. quarta-feira, 11 de abril de 2012
  36. 36. 02. Navegação fixaquarta-feira, 11 de abril de 2012
  37. 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. 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. 39. quarta-feira, 11 de abril de 2012
  40. 40. quarta-feira, 11 de abril de 2012
  41. 41. quarta-feira, 11 de abril de 2012
  42. 42. quarta-feira, 11 de abril de 2012
  43. 43. quarta-feira, 11 de abril de 2012
  44. 44. quarta-feira, 11 de abril de 2012
  45. 45. quarta-feira, 11 de abril de 2012
  46. 46. quarta-feira, 11 de abril de 2012
  47. 47. quarta-feira, 11 de abril de 2012
  48. 48. quarta-feira, 11 de abril de 2012
  49. 49. 03. Círculosquarta-feira, 11 de abril de 2012
  50. 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. 51. Esses arquétipos podem ser configurados como links de navegação, ícones de rodapé, etc.quarta-feira, 11 de abril de 2012
  52. 52. quarta-feira, 11 de abril de 2012
  53. 53. quarta-feira, 11 de abril de 2012
  54. 54. 04. Grandes Ilustrações Vetoriaisquarta-feira, 11 de abril de 2012
  55. 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. 56. quarta-feira, 11 de abril de 2012
  57. 57. quarta-feira, 11 de abril de 2012
  58. 58. 05. Menus multi-colunaquarta-feira, 11 de abril de 2012
  59. 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. 60. quarta-feira, 11 de abril de 2012
  61. 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. 62. quarta-feira, 11 de abril de 2012
  63. 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. 64. 6. Animações com jQuery/CSS3/HTML5quarta-feira, 11 de abril de 2012
  65. 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. 66. 7. Fitas e bannersquarta-feira, 11 de abril de 2012
  67. 67. Essa tendência havia começado a ganhar força em 2011.quarta-feira, 11 de abril de 2012
  68. 68. quarta-feira, 11 de abril de 2012
  69. 69. 8. Fontes costumizáveisquarta-feira, 11 de abril de 2012
  70. 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. 71. quarta-feira, 11 de abril de 2012
  72. 72. quarta-feira, 11 de abril de 2012
  73. 73. quarta-feira, 11 de abril de 2012
  74. 74. 9. Infográficosquarta-feira, 11 de abril de 2012
  75. 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. 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. 77. quarta-feira, 11 de abril de 2012
  78. 78. quarta-feira, 11 de abril de 2012
  79. 79. quarta-feira, 11 de abril de 2012
  80. 80. 10. Simplicidadequarta-feira, 11 de abril de 2012
  81. 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. 82. quarta-feira, 11 de abril de 2012
  83. 83. quarta-feira, 11 de abril de 2012
  84. 84. quarta-feira, 11 de abril de 2012
  85. 85. Conclusãoquarta-feira, 11 de abril de 2012
  86. 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. 87. De qualquer forma, tais tendências devem ser observadas e compreendidas.quarta-feira, 11 de abril de 2012
  88. 88. Lembre-se de usa-las como referência e não como cópia.quarta-feira, 11 de abril de 2012
  89. 89. Referênciasquarta-feira, 11 de abril de 2012
  90. 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. 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. 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. 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. 94. http://snagly.de/ http://webdesignledger.com/inspiration/25- fresh-examples-of-minimalist-web-designsquarta-feira, 11 de abril de 2012

×