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

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?

Shankar Cabus

April 02, 2015
Tweet

More Decks by Shankar Cabus

Other Decks in Design

Transcript

  1. 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
  2. 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
  3. 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
  4. ???

  5. 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
  6. 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
  7. “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
  8. 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
  9. ???

  10. 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
  11. ú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
  12. 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
  13. 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
  14. 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
  15. Minucioso Nada deve ser arbitrário ou deixado ao acaso. Cuidado

    e rigor no processo de design, mostram respeito para com o consumidor. #6
  16. 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
  17. “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
  18. “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
  19. .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; }
  20. 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
  21. 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
  22. Select Option five Option four Option three Option two Option

    one ! Select Option five Option four Option three Option two Option one !
  23. 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
  24. 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 !
  25. 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
  26. × 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. $