Pro Yearly is on sale from $80 to $50! »

Arte, Design e Frontend - Monalisa CSS - Shankar Cabus

Arte, Design e Frontend - Monalisa CSS - Shankar Cabus

O que é arte? Design é arte? E o que o frontend tem a ver com isso? Como eles podem se ajudar?

Dc87153c75336a2482935e051b118d01?s=128

Shankar Cabus

April 02, 2015
Tweet

Transcript

  1. Arte Design Frontend @shankarcabus

  2. Frontender Shankar Cabus 0nipresente Designer Artista

  3. O que é arte?

  4. pense um pouco…

  5. Monalisa Artista: Leonardo da Vinci Material: Tinta a óleo Dimensões:

    77 cm x 53 cm Localização: Museu do Louvre Período: Renascimento Gênero: Retrato
  6. Muntcha cor Artista: Joãozinho Material: Hidrocor Dimensões: 21 cm x

    29 cm Localização: Escola Arte de Criança Período: Moderno Gênero: Abstrato
  7. Painting Artista: Jackson Pollock Material: Tinta a óleo Gênero: Abstrato

  8. None
  9. None
  10. Castelo de Areia

  11. Castelo de Areia

  12. Castelo de Areia

  13. Castelo de Areia

  14. None
  15. None
  16. None
  17. Beethoven - Symphony No. 5 (Proms 2012)

  18. Kit Ilusão - Receba seu Kit Ilusão

  19. Arco-íris de massinha de modelar

  20. Escultura de Ron Mueck

  21. Arte do latim ars, significa técnica ou habilidade

  22. definição atividade humana ligada às manifestações de ordem estética ou

    comunicativa, realizada por meio de uma grande variedade de linguagens, tais como: arquitetura, escultura, pintura, escrita, música, dança e cinema. O processo criativo se dá a partir da percepção com o intuito de expressar emoções e ideias, objetivando um significado único e diferente para cada obra
  23. a arte varia de acordo com o tempo e cultura

  24. None
  25. None
  26. None
  27. None
  28. None
  29. Fotografia premiada de Dikky S. Oesin

  30. ???

  31. Pro artista, a arte é uma realização pessoal, uma construção

    de si, algo feito pra si. A arte tem um papel, não uma função, não existe uma obra de arte utilitária. A arte é uma forma de expressão. Alberto Cabral
  32. Capela Sistina

  33. Arte é qualquer coisa criada pelo homem e que desperte

    em você um sentimento de admiração, baseado em sentimento, beleza, originalidade e/ou grau de dificuldade. Shankar Cabus
  34. None
  35. a arte está no de quem a vê

  36. design é arte?

  37. “Design é a idealização, criação, desenvolvimento, configuração, concepção, elaboração e

    especificação de objetos que serão produzidos industrialmente ou por meio de sistema de produção seriada e que demandem padronização dos componentes, envolvendo a repetição das diferentes etapas de produção. É uma atividade estratégica, técnica e criativa, normalmente orientada por uma intenção ou objetivo, ou para a solução de um problema.”  Wikipedia
  38. None
  39. None
  40. Modelagem 3D de Raoni Nery

  41. Jogo League of Legends

  42. enquanto tamanho(alfabeto) > 1: S0 := retira_menor_probabilidade(alfabeto) S1 := retira_menor_probabilidade(alfabeto)

    X := novo_nó X.filho0 := S0 X.filho1 := S1 X.probabilidade := S0.probabilidade + S1.probabilidade insere(alfabeto, X) fim enquanto X = retira_menor_símbolo(alfabeto) # nesse ponto só existe um símbolo. para cada folha em folhas(X): código[folha] := percorre_da_raiz_até_a_folha(folha) fim para Algorítmo de Huffman
  43. Site Airbnb

  44. None
  45. Psicologia TEORIA DA ARTE COMUNICAcÃO CIÊNCIA COGNITIVA

  46. design é arte?

  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. ???

  61. design

  62. sobrinhos

  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. sobrinhos

  73. DESIGNER E SOBRINHOS TRAVAM UMA GUERRA SANGRENTA

  74. Dar a melhor experiência para o usuário O QUE O

    DESIGNER QUER É:
  75. Dar a melhor experiência para o usuário ENTENDEU?

  76. Dar a melhor experiência para o usuário

  77. Dar a melhor experiência para o usuário

  78. inútil

  79. útil

  80. melhor experiência

  81. Sensível Para se colocar no lugar do outro

  82. Princípios de um bom design Dieter Rams

  83. inovador As possibilidades para inovação não estão, de forma alguma,

    saturadas. O desenvolvimento tecnológico está sempre oferecendo novas oportunidades para inovação no design. Porém o design inovador sempre se desenvolve paralelamente à tecnologia inovadora, e nunca pode ser um fim em si mesmo. #1
  84. útil Um produto é comprado para ser usado. Ele tem

    de satisfazer determinados critérios, não apenas funcionais, mas também psicológicos e estéticos. O bom design realça a utilidade de um produto sem desrespeitar nada que possivelmente possa afastar-se disso. #2
  85. estético A qualidade estética de um produto é parte integrante

    da sua utilidade, pois os produtos que usamos em nosso dia-a-dia afetam a nossa pessoa e o nosso bem-estar. Mas somente objetos bem executado podem ser belos. #3
  86. compreensível O bom design esclarece a estrutura do produto. Melhor

    ainda, pode fazer o produto falar. Na melhor das hipóteses, é auto-explicativo. #4
  87. honesto Um produto não é mais do que ele é.

    Um bom design não tenta manipular as pessoas com promessas que não podem ser cumpridas. #5
  88. Minucioso Nada deve ser arbitrário ou deixado ao acaso. Cuidado

    e rigor no processo de design, mostram respeito para com o consumidor. #6
  89. Simples Bom design é o mínimo design possível. Menos, porém

    melhor, pois se concentra em aspectos essenciais, sem sobrecarregar com o supérfluos. Apresenta apenas o que agrega valor as pessoas e ao negócio. #7
  90. quando devo usar o design? Sempre que desejar que algo

    seja útil para alguém
  91. E o código?

  92. None
  93. None
  94. “Codificação é a idealização, criação, desenvolvimento, configuração, concepção, elaboração e

    especificação de objetos que serão produzidos industrialmente ou por meio de sistema de produção seriada e que demandem padronização dos componentes, envolvendo a repetição das diferentes etapas de produção. É uma atividade estratégica, técnica e criativa, normalmente orientada por uma intenção ou objetivo, ou para a solução de um problema.”  Wikipedia
  95. “Design é a idealização, criação, desenvolvimento, configuração, concepção, elaboração e

    especificação de objetos que serão produzidos industrialmente ou por meio de sistema de produção seriada e que demandem padronização dos componentes, envolvendo a repetição das diferentes etapas de produção. É uma atividade estratégica, técnica e criativa, normalmente orientada por uma intenção ou objetivo, ou para a solução de um problema.”  Wikipedia
  96. pra você ser um bom programador você tem que ser

    um bom designer
  97. .foo { width: 20px; height: 150px; } .foo .inner-foo {

    width: 10px; height: 10px; } .bar { width: 5px; height: 5px; border-radius: 50%; } .bar .foo { background: blue; } .foo { width: 20px; height: 150px; } .foo .inner-foo { width: 10px; height: 10px; } .bar { width: 5px; height: 5px; border-radius: 50%; } .bar .foo { background: blue; }
  98. design frontend backend

  99. design frontend backend WORLD

  100. design frontend backend WORLD

  101. frontend??

  102. No processo de desenvolvimento de um website, o frontend é

    a parte referente à interface.
  103. HTML JAVASCRIPT CSS informacão e estrutura acão e comportamento estilo

    e formatacão
  104. None
  105. None
  106. designer projeta A INTERFACE frontender executa A INTERFACE

  107. Como era feito o processo no

  108. Quero uma bola!

  109. None
  110. Mais tempo de criação Mais código a ser escrito Mais

    difícil de manter Mais dinheiro Menos comunicação Menos performance Menos organização Menos reaproveitamento
  111. PADRÃO ORGANIZACÃO COMUNICACÃO

  112. Quero uma bola!

  113. Sketch controle de versão design review padrão de layout e

    código
  114. padrão de layout e código

  115. REAPROVEITÁVEL PADRONIZADO

  116. FILOSOFIA PARA MANTER A ORDEM

  117. None
  118. None
  119. nunca quebre uma janela

  120. disciplina

  121. DEFENS R DA ORDEM

  122. mão na massa

  123. responsivo

  124. escalável e manutenível

  125. Escalável Reaproveitável Organizado Legível Manutenível Modularizado Padronizado Espacado Identado Comentado

    Componentizado
  126. None
  127. None
  128. BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON

    BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button
  129. 8px 8px 8px 8px 8px 8px 8px 8px 8px 8px

    8px 8px 8px 8px 8px
  130. None
  131. Select Option five Option four Option three Option two Option

    one ! Select Option five Option four Option three Option two Option one !
  132. Select Option five Option four Option three Option two Option

    one !
  133. Select Option five Option four Option three Option two Option

    one !
  134. Select Option five Option four Option three Option two Option

    one !
  135. Option five Option four Option three Option two Option one

    Select ! Select Option five Option four Option three Option two Option one ! Select ! Select ! Placeholder ♥ Placeholder ♥ Placeholder Placeholder
  136. Option one Description one here Optional The second description Test

    Optical Another description Cropt Ipsum Description Another very big option with trunca... opt Another very big option with truncat… Cropt Ipsum Description Test Optical Another description Optional The second description Option one Description one here opt ! Option five Cropt Ipsum Test Optical Optional Option one Opt Optive Cropt Ipsum Test Optical Optional Option one Opt !
  137. Placeholder Placeholder ! Placeholder ! Placeholder " Placeholder " Placeholder

    Placeholder Placeholder
  138. No Yes No Yes Label Label Label Label Label Label

    Label Label
  139. Label Label Label Label Label Label Label Label No Yes

    No Yes
  140. Light 112sp Regular 56sp Regular 45sp Regular 34sp Regular 24sp

    Regular 20sp Regular 16sp (Device), Regular 15sp (Desktop) Medium 14sp (Device), Medium 13sp (Desktop) Medium 14sp (Device), Medium 13sp (Desktop) Regular 12sp Medium 14sp (Device), Medium 13sp (Desktop) MEDIUM (ALL CAPS) 14sp Display Display Display Display Headline Title Subhead Body Body Caption Menu Button
  141. None
  142. × Lorem ipsum dolor sit amet, consectetur adipiscing elit. !

    × Lorem ipsum dolor sit amet, consectetur adipiscing elit. " × Lorem ipsum dolor sit amet, consectetur adipiscing elit. ? × Lorem ipsum dolor sit amet, consectetur adipiscing elit. $
  143. E o código?

  144. show me the code

  145. None
  146. None
  147. 19.3kb Bootstrap 31.6kb JusBrasil 8.4kb Monalisa 20.1kb Foundation Economia de

    23.2kb
  148. apenas 8.4kb! 170 Monalisas

  149. 4.400.000 usuários novos mês 4.400.000 * 23.3kb = 98GB

  150. 98GB 2,4Mbps 83 horas à economizadas

  151. migration

  152. migrar todas as páginas de vez migrar aos poucos X

  153. ta pronto? NÃÃÃÃÃÃO!!! terminou? documentacão testes novas necessidades melhorias

  154. None
  155. Obrigado!!