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?

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
10. Castelo de Areia
11. Castelo de Areia
12. Castelo de Areia
13. Castelo de Areia
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
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
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
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
45. Psicologia TEORIA DA ARTE COMUNICAcÃO CIÊNCIA COGNITIVA
46. design é arte?
60. ???
61. design
62. sobrinhos
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?
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
106. designer projeta A INTERFACE frontender executa A INTERFACE
107. Como era feito o processo no
108. Quero uma bola!
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
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
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
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
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
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
155. Obrigado!!