Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webdesigners para não Webdesigners

zehfernandes
October 17, 2012
Design
4
210

Webdesigners para não Webdesigners

Boas práticas de layout web.

» Material de apoio da palestra http://revistacliche.com.br/webdesignerslinks/

zehfernandes

October 17, 2012
Tweet

More Decks by zehfernandes

See All by zehfernandes
Games are more than fun
zehfernandes
1
780
CSS in JS
zehfernandes
1
270
Build for Destruction
zehfernandes
2
620
R.I.P WWW
zehfernandes
1
740
Motion U.I with style
zehfernandes
20
7.5k
Agora você vê agora você não vê
zehfernandes
0
350
Design Colaborativo
zehfernandes
2
1.1k
Bauhaus e webdesign
zehfernandes
0
230
A dialética a favor do design
zehfernandes
2
800

Other Decks in Design

See All in Design
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
1
1.3k
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
180
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.2k
How to go from research data to insights?
mastervicedesign
0
180
Dive Deep into Communication
yomtsu
0
120
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
210
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
330
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
300
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
150
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
180
Managing Design Systems (Smashing NY 2024)
nathanacurtis
2
340
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4k

Featured

See All Featured
Code Review Best Practice
trishagee
65
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
For a Future-Friendly Web
brad_frost
175
9.4k
Scaling GitHub
holman
458
140k
Designing for Performance
lara
604
68k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
How STYLIGHT went responsive
nonsquared
95
5.2k
Practical Orchestrator
shlominoach
186
10k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
GraphQLとの向き合い方2022年版
quramy
44
13k

Transcript

  1. WEB DESIGN PARA NÃO WEB DESIGNERS Hugo L. Pizaia Zeh

    Fernandes

  2. @hpizaia

  3. @zehf

  4. None

  5. TÓPICOS VEJAM SE VALE A PENA FICAR

  6. CONTEÚDO A.I LINHA VISUAL

  7. A.I LINHA VISUAL CONTEÚDO

  8. CONTEÚDO LINHA VISUAL A.I

  9. ANTES, UM POUCO DE HISTÓRIA... O CRIADOR AINDA VIVE, E

    TEM LÍNGUA PRESA!

  10. http://pt.wikipedia.org/wiki/Tim _ Berners-Lee

  11. ESTRUTURA ESTILO COMPORTAMENTO

  12. ESTRUTURA ESTILO COMPORTAMENTO

  13. ESTILO

  14. COMPORTAMENTO COMPORTAMENTO

  15. @zenorocha

  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None

  24. “A web é dinamica, adaptável e sistemática“ PAUL LYOD

  25. CONTEÚDO FIRST THINGS FIRST!

  26. O QUE PERGUTAR NO BRIEFING?

  27. 1.Qual seu objetivo? 2.Qual o público alvo? 3.QUAL O CONTeÚDO

    DO SITE? 4. JÁ possui domínio ou servidor?

  28. 1.Qual seu objetivo? 2.Qual o público alvo? 3.QUAL O CONTeÚDO

    DO SITE? 4. JÁ possui domínio ou servidor?

  29. http://www.dontclick.it/

  30. 1.Qual seu objetivo? 2.Qual o público alvo? 3.QUAL O CONTeÚDO

    DO SITE? 4. JÁ possui domínio ou servidor?

  31. http://www.zeldman.com/

  32. 1.Qual seu objetivo? 2.Qual o público alvo? 3.QUAL O CONTeÚDO

    DO SITE? 4. JÁ possui domínio ou servidor?

  33. O QUE VOCÊ PRECISA DEFINIR?

  34. http://g1.globo.com/

  35. http://logobr.org/

  36. http://www.hotpocket.com.br/

  37. ARQUITETURA DA INFORMAÇÃO ONDE ESTÃO MEUS TALHERES?

  38. ORGANIZAçÃO NAVEGAçÃO DISPOSIção

  39. None
  40. None

  41. http://www.decathlon.com.br/

  42. MindMap ou Mindmis- ter http://www.revistacliche.com.br/

  43. NAVEGAçÃO ORGANIZAçÃO DISPOSIção

  44. None

  45. http://www.revistacliche.com.br/

  46. http://experienciascompartilhadas.com.br/

  47. DISPOSIção NAVEGAçÃO ORGANIZAçÃO

  48. http://grafofilia.wordpress.com/

  49. http://wikipedia.org/

  50. http://2012.dconstruct.org

  51. CADE O ENDEREÇO NO RODAPÉ?

  52. None

  53. http://www.mockflow.com/

  54. AXURE MOXFLOW http://www.axure.com/

  55. http://www.revistacliche.com.br/

  56. LINHA VISUAL AGORA ENTRA O FILÉ!

  57. None
  58. None

  59. WINS!

  60. WINS! FATALITY

  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None

  69. GRID TIPOGRAFIA FORMA COR UX PADRÃO

  70. http://960.gs/

  71. http://cssgrid.net/

  72. http://www.importzehdesign.com/linksdobrother/

  73. None
  74. None

  75. GRID FORMA COR UX PADRÃO TIPOGRAFIA

  76. “95% da informação na web é a linguagem escrita. É

    lógico dizer que um web designer deve ter uma boa formação na disciplina de moldar informações por escrito, em outras palavras: Tipografia “ by Oliver Reichenstein
  77. None

  78. FONTE SISTEMA FONTE FACE PHOTOSHOP http://www.fontsquirrel.com/

  79. None

  80. GRID FORMA COR UX PADRÃO TIPOGRAFIA

  81. http://kuler.adobe.com/

  82. http://kuler.adobe.com/

  83. None
  84. None
  85. None
  86. None

  87. GRID FORMA UX PADRÃO TIPOGRAFIA COR

  88. http://static.bbci.co.uk/gel/0.2.10/downloads/GEL _ web _ styleguide.pdf

  89. https://www.dropbox.com/

  90. None

  91. Blocagem http://www.mozilla.org/pt-BR/firefox/new/?from=getfirefox

  92. GRID FORMA UX PADRÃO TIPOGRAFIA COR

  93. Tentativa e erro

  94. Curva de aprendizado

  95. Escaneia

  96. None
  97. None

  98. GRID FORMA UX PADRÃO TIPOGRAFIA COR

  99. http://photoshopetiquette.com/

  100. http://twitter.github.com/bootstrap/

  101. @ sobrinhoweb

  102. CONTEÚDO A.I LINHA VISUAL RESUMÃO http://www.felipex.com.br/

  103. http://revistacliche.com.br/webdesignerslinks/

  104. WEB DESIGN PARA NÃO WEB DESIGNERS PERGUNTAS

  105. OBRIGADO [email protected]