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

How Studying History Of Arts Helped Me Become A Better Frontend Designer

Nils
September 02, 2020

How Studying History Of Arts Helped Me Become A Better Frontend Designer

Nils

September 02, 2020
Tweet

More Decks by Nils

Other Decks in Programming

Transcript

  1. HOW STUDYING HISTORY
    OF ARTS HELPED ME
    BECOME A BETTER
    FRONTEND DESIGNER

    View full-size slide

  2. NILS BINDER
    @supremebeing09

    View full-size slide

  3. NILS BINDER
    @supremebeing09

    View full-size slide

  4. Design
    Backend
    Development
    Frontend
    Development

    View full-size slide

  5. Design
    Backend
    Development
    Frontend
    Development

    View full-size slide

  6. Backend
    Development
    Frontend
    Development
    Design

    View full-size slide

  7. Frontend
    Design
    Backend
    Development
    Frontend
    Development
    Design

    View full-size slide

  8. Frontend
    Design
    Backend
    Development
    Frontend
    Development
    Design
    UX Engineering

    View full-size slide

  9. Frontend
    Design
    Backend
    Development
    Frontend
    Development
    Design
    UX Engineering
    Interface Development

    View full-size slide

  10. Frontend
    Design
    Backend
    Development
    Frontend
    Development
    Design

    View full-size slide

  11. Frontend
    Design
    Backend
    Development
    Frontend
    Development
    Design
    Photography UX-Design CSS
    Accessibility
    Speed API Data Storage
    Illustration UI-Design HTML
    Presentational JS
    JS Frameworks Business Logic

    View full-size slide

  12. Frontend
    Design
    Backend
    Development
    Frontend
    Development
    Design
    Photography UX-Design CSS
    Accessibility
    Speed API Data Storage
    Illustration UI-Design HTML
    Presentational JS
    JS Frameworks Business Logic

    View full-size slide

  13. Frontend
    Design
    Backend
    Development
    Frontend
    Development
    Design
    Photography UX-Design CSS
    Accessibility
    Speed API Data Storage
    Illustration UI-Design HTML
    Presentational JS
    JS Frameworks Business Logic

    View full-size slide

  14. Frontend
    Design
    Backend
    Development
    Frontend
    Development
    Design
    Photography UX-Design CSS
    Accessibility
    Speed API Data Storage
    Illustration UI-Design HTML
    Presentational JS
    JS Frameworks Business Logic

    View full-size slide

  15. Backend
    Development
    Frontend
    Development
    Design
    Photography UX-Design CSS
    Accessibility
    Speed API Data Storage
    Illustration UI-Design HTML
    Presentational JS
    JS Frameworks Business Logic
    Frontend
    Design

    View full-size slide

  16. Backend
    Development
    Frontend
    Development
    Design
    Photography UX-Design CSS
    Accessibility
    Speed API Data Storage
    Illustration UI-Design HTML
    Presentational JS
    JS Frameworks Business Logic

    View full-size slide

  17. Backend
    Development
    Frontend
    Development
    Design
    Photography UX-Design CSS
    Accessibility
    Speed API Data Storage
    Illustration UI-Design HTML
    Presentational JS
    JS Frameworks Business Logic

    View full-size slide

  18. Backend
    Development
    Frontend
    Development
    Design
    Photography UX-Design CSS
    Accessibility
    Speed API Data Storage
    Illustration UI-Design HTML
    Presentational JS
    JS Frameworks Business Logic
    Frontend
    Design

    View full-size slide

  19. Frontend
    Design
    Backend
    Development
    Frontend
    Development
    Design
    Photography UX-Design CSS
    Accessibility
    Speed API Data Storage
    Illustration UI-Design HTML
    Presentational JS
    JS Frameworks Business Logic

    View full-size slide

  20. Frontend
    Design
    Backend
    Development
    Frontend
    Development
    Design
    Photography UX-Design CSS
    Accessibility
    Speed API Data Storage
    Illustration UI-Design HTML
    Presentational JS
    JS Frameworks Business Logic

    View full-size slide

  21. Robert Rauschenberg.
    White Painting [seven panel].
    1951

    View full-size slide

  22. „Paint them so they look like
    they haven’t been painted. No
    hand, just put a coat of paint
    on them.“
    7 times 182.9 cm x 45.3 cm
    Latex Paint

    View full-size slide

  23. Brice Marden
    „Paint them so they look like
    they haven’t been painted. No
    hand, just put a coat of paint
    on them.“
    7 times 182.9 cm x 45.3 cm
    Latex Paint

    View full-size slide

  24. Brice Marden
    „Paint them so they look like
    they haven’t been painted. No
    hand, just put a coat of paint
    on them.“
    7 times 182.9 cm x 45.3 cm
    Latex Paint

    View full-size slide

  25. Brice Marden
    „Paint them so they look like
    they haven’t been painted. No
    hand, just put a coat of paint
    on them.“
    7 times 182.9 cm x 45.3 cm
    Latex Paint
    Robert Rauschenberg, 1951

    View full-size slide

  26. Brice Marden
    „Paint them so they look like
    they haven’t been painted. No
    hand, just put a coat of paint
    on them.“
    7 times 182.9 cm x 45.3 cm
    Latex Paint
    Robert Rauschenberg, 1951
    HTML / CSS

    View full-size slide

  27. Brice Marden
    „Paint them so they look like
    they haven’t been painted. No
    hand, just put a coat of paint
    on them.“
    7 times 182.9 cm x 45.3 cm
    Latex Paint
    Robert Rauschenberg, 1951
    HTML / CSS Browser

    View full-size slide

  28. Brice Marden
    „Paint them so they look like
    they haven’t been painted. No
    hand, just put a coat of paint
    on them.“
    7 times 182.9 cm x 45.3 cm
    Latex Paint
    Robert Rauschenberg, 1951
    HTML / CSS Browser Rendered Website

    View full-size slide

  29. Rene Magritte.
    La Trahison des images.
    1929

    View full-size slide

  30. Georg Flegel.
    Stillleben mit Käse und Kirschen.
    1635

    View full-size slide

  31. @supremebeing09

    View full-size slide

  32. @supremebeing09

    View full-size slide

  33. @supremebeing09

    View full-size slide

  34. @supremebeing09

    View full-size slide

  35. @supremebeing09

    View full-size slide

  36. @supremebeing09

    View full-size slide

  37. @supremebeing09

    View full-size slide

  38. @supremebeing09

    View full-size slide

  39. @supremebeing09

    View full-size slide

  40. @supremebeing09

    View full-size slide

  41. @supremebeing09

    View full-size slide

  42. @supremebeing09

    View full-size slide

  43. @supremebeing09

    View full-size slide

  44. @supremebeing09

    View full-size slide

  45. @supremebeing09

    View full-size slide

  46. @supremebeing09

    View full-size slide

  47. @supremebeing09

    View full-size slide

  48. @supremebeing09

    View full-size slide

  49. @supremebeing09

    View full-size slide

  50. @supremebeing09

    View full-size slide

  51. Backend
    Development
    Frontend
    Development
    Design

    View full-size slide

  52. Backend
    Development
    Frontend
    Development
    Design

    View full-size slide

  53. Frontend
    Design
    Backend
    Development
    Frontend
    Development
    Design

    View full-size slide

  54. Frontend
    Design
    Backend
    Development
    Frontend
    Development
    Design

    View full-size slide