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

Beautiful Rubyist

Beautiful Rubyist

We — as Rubyists — have proven to be perceptible to aesthetics through our choice of programming language.
In our daily work we often have to touch user interfaces — on the web, desktop and mobile apps or even in API definitions. And while we might sometimes secretly enjoy working so close to the user and out in the open, visible to everyone, we do so rarely with confidence.

It’s time to gain some confidence! This talk will attempt to bring visual aesthetics and code together and to explain some of the most fundamental rules of art and visual design through Ruby: Using Ruby idioms, patterns and syntax we will try to clarify basics like hierarchy, composition, contrast and proportion using everyday interface–related problems as examples and hopefully take on an interesting journey through language, design and code.

You can find a “transcript” here: http://polarblau.com/2013/08/18/beautiful-rubyist.html

Florian Plank

August 17, 2013
Tweet

More Decks by Florian Plank

Other Decks in Programming

Transcript

  1. “Silence is the language of god,
    all else is poor translation.”
    (RUMI)

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. LANGUAGE

    View Slide

  7. 1

    View Slide

  8. Contextual learning

    View Slide

  9. DESIGN

    View Slide

  10. Semantic change

    View Slide

  11. “Backlog”

    View Slide

  12. “Design”

    View Slide

  13. DESIGN & LANGUAGE

    View Slide

  14. PROGRAMMING

    View Slide

  15. Formal language

    View Slide

  16. DESIGN vs. CODE

    View Slide

  17. “Design is where science and art break even.”
    (ROBIN MATHEW)

    View Slide

  18. “Real web designers write code.
    Always have, always will.”
    (JEFFREY ZELDMAN)

    View Slide

  19. CODE vs. DESIGN

    View Slide

  20. “Real web designers write code.
    Always have, always will.”
    (JEFFREY ZELDMAN)
    “We didn’t have a designer on the team.”

    View Slide

  21. “Real web designers write code.
    Always have, always will.”
    (JEFFREY ZELDMAN)
    “This looks like an engineer built it, I know.”

    View Slide

  22. “Real web designers write code.
    Always have, always will.”
    (JEFFREY ZELDMAN)
    “I can’t even draw,
    just quickly threw something together.”

    View Slide

  23. “Real web designers write code.
    Always have, always will.”
    (JEFFREY ZELDMAN)
    “I’ve no talent for these kind of things.”

    View Slide

  24. “Talent is cheaper than table salt.
    What separates the talented individual from the
    successful one is a lot of hard work.”
    (STEPHEN KING)

    View Slide

  25. PRINCIPLES of DESIGN

    View Slide

  26. Elements of design

    View Slide

  27. Line
    Color
    Shape
    Size
    Texture
    Space
    Direction
    Form

    View Slide

  28. PRINCIPLES of DESIGN

    View Slide

  29. Scale & Proportion
    Unity
    Hierarchy
    Balance
    Emphasis
    Contrast
    Rhythm

    View Slide

  30. Simplicity vs. ornamentation

    View Slide

  31. “Clutter and confusion are failures of design,
    not attributes of information.”
    (EDWARD TUFT)

    View Slide

  32. View Slide

  33. View Slide

  34. Feature: Recover password
    In order to …

    View Slide

  35. string.empty?

    View Slide

  36. list << member

    View Slide

  37. a, b = b, a

    View Slide

  38. “Actually, I'm trying to make Ruby natural,
    not simple.”
    (MATZ)

    View Slide

  39. drink! unless glass.empty?

    View Slide

  40. “High performance computing requires
    high level of abstraction and that’s what makes
    languages like Ruby or even Python good.”
    (ARA T. HOWARD)

    View Slide

  41. class User
    has_many :friends
    end

    View Slide

  42. “Nature loves simplicity and unity.”
    (JOHANNES KEPLER)

    View Slide

  43. View Slide

  44. Password
    Password
    confirmation

    View Slide

  45. Password
    Show password?

    View Slide

  46. Similarity

    View Slide

  47. Gestalt theory

    View Slide

  48. Proximity
    Similarity
    Continuation
    Repetition
    Closure

    View Slide

  49. 2

    View Slide

  50. View Slide

  51. View Slide

  52. x = 42

    View Slide

  53. duck.respond_to?(:quack)

    View Slide

  54. View Slide

  55. Contrast

    View Slide

  56. View Slide

  57. View Slide

  58. class Person
    def eat
    end
    private
    def digest
    end
    end

    View Slide

  59. View Slide

  60. Hierarchy

    View Slide

  61. View Slide







  62. View Slide

  63. the beginning
    I am Alpha and
    Omega
    and the ending.

    View Slide

  64. class Giraffe < Animal
    end

    View Slide

  65. 1
    2
    3
    4

    View Slide


  66. View Slide

  67. We’re all designers — all day, every day.
    We do speak compatible languages.
    We can transfer knowledge.
    Talent is cheap.
    Learning is king.

    View Slide

  68. @polarblau

    View Slide