Walk a mile in design shoes — Get your coding feet in shape
It’s said the great musical genius J.S. Bach used to spend hours by candlelight copying manuscripts of his number one talent crush, Antonio Vivaldi. The very act of rewriting and reliving note-by note the process of an admired master helped him grow as a composer more than any lessons or analysis.
This week I’ve been working on a project to bring a classic psd (photoshop document) design to life as a web page. Even without photoshop skills (or a subscription!) a psd can be worked with in the Adobe Creative Cloud Assets program.
every detail of the design: pixel sizes, fonts, colors and layout by section is available for inspection and extraction. Clicking a section highlights and reveals the exact size as well as hidden CSS information:
Alternatively, sections can be extracted and downloaded in their precise proportions:
Like Bach rewriting each note, the process of taking apart a beautiful design and pixel by pixel putting it back together again demystifies great design, while inspiring beautiful code.
Great design creates an illusion of simplicity for the viewer. Relationships between elements, calculated consistency, patterns and symmetry all contribute to the visual logic, where the brain automatically organizes and connects. When artfully done, these repetitions of proportion, coloration, typography and image might be imperceptible to the conscious mind, but when you code every pixel of the screen and run into the same numbers in full detail, the patterns are that much clearer.
How does this inspire beautiful code? One of the great pleasures of coding is efficiency. We want to wave the magic wand of a single selector or rule and have a massive effect on our products. This code is often called DRY (Don’t Repeat Yourself). Psd designs make the repetition of patterns obvious and the necessity for a single selector to name a repeating geometric pattern becomes clear. Single classes for types of wrappers, headings or image classes can be used throughout the code. These mathematic connections also reveal semantic connections. Designers take care to make sure the size and shape of information we digest is intuitively ordered and scaled by importance. This has implications for HTML as well as CSS structuring.
Bottom line: a great website means we are communicating the greatest amount of information in the simplest, most delightful way to our users. With efficient design, we are decluttering and smoothing their processing of this information. To borrow another metaphor from the art world, it is said Chinese Brush painters might spend a whole day observing the movements and inner impetus of a subject, then with a single stroke, capture the essence of a fish, a bird, or a wave’s motion. Every moment we as developers spend up close and personal with great design helps us understand the true dynamics of what we’re trying to communicate and leads to the most rewarding coding experiences.
