Why Design Comes First: True Confessions of a Guilty Coder

Posted by Aaron Carlino on 26 October 2011

Guest blogger Aaron Carlino is a web developer who is better known in the SilverStripe community by his whimsical pseudonym Uncle Cheese. Aaron has been doing web development since 2005, and found his niche in SilverStripe programming after an exhaustive search for a content management solution that was welcoming to developers and would stay out of his way. Since then, he has established a strong reputation in the SilverStripe community as a mentor, support provider, and, most notably, a contributor to some of the application’s most popular modules. 

I love good design. I say that with all the humility and candor of an admitted addict, because there’s a certain amount of inner betrayal that it makes me feel. In my heart I’m a coder, but the truth is, nothing excites me quite like good design. I don’t know why it is, but I have a few ideas. Maybe, for instance, it’s because it’s not something I’m naturally good at. I’ve been blessed with many great talents in my life, but the unspoken curse of the talented is that, while we’re stimulated by the things we do well, we are also perennially plagued by the things we can’t do well. These things remain open, unfinished conquests, and we consequently elevate them to a higher echelon of respect and worship. That’s how design is to me. I want to be good at it, but I know I never will be, and I’m therefore forever in its admiration.

It seems to me there’s something much bigger going on here, though. My love of good design isn’t just about some quirky hang-up rooted in a guilty coder’s conscience.

Why does good design really matter?

Good design is something all of us should respect and admire in our quests to create great websites and web applications, and here are three reasons why.

1. Good Design Begets Good (Anything Else)

Good design is motivating – it’s inspiring. Good design sets a tone. It informs us of the level of care and attention we should give to a project. When design comes first, the rhythm, pace and attitudinal patterns of a project are established, and all of that energy is propelled into the production phase, where it furnishes a great product.

At Bluehouse Group, we’re fortunate to enjoy the talent of what I consider a top-notch art director. Josh Turner has been with us for a number of years, and I haven’t seen much of anything leave his desk that isn’t done with a high degree of finesse, strategy, and exceptional aptitude. I’ve learned that the best thing about working with a great art director is that he has the power to shape everyone’s attitude about a project and motivate us to do it extremely well.

When I get my eyes on the approved designs for an upcoming project, I feel like a fine carpenter reviewing the blueprints for a dazzling room with an ocean view. I look forward to being challenged to think differently. I welcome the responsibility of making a great idea come to life.

Along those same lines, I have thoroughly enjoyed the approach that SilverStripe has taken with the upcoming 3.0 release of its CMS. All along the way, SilverStripe has kept an open channel of communication to its base of users and stakeholders, keeping us updated with the plans for the major release. Then, in the spring, they posted scores of high-quality designs to their public Github repository. The response was overwhelming. The community was energized and excited about the future of SilverStripe. We couldn’t wait to get our hands on it, and developers were asking what they could do to help push the release date closer. To this day, in those rare moments where I feel ambivalent about SilverStripe, I refer myself to those designs, and it revives the batty-eyed infatuation I’ve had for the product since 2007.

Good design has a power over us. It is the point at which an in-vitro idea, held captive in the abstract realm is born into the physical world. Like any newborn being, we welcome it, care for it, and allow it to grow up and become something great.

2. Good Design Prevents Broken Windows

New York City, 1985 -- Mayor Rudy Giuliani, in a desperate attempt to slow the rapidly accelerating crime rate, consulted George Kelling, author of the book Fixing Broken Windows: Restoring Order and Reducing Crime in Our Communities to help develop a strategy to reduce crime. Keller was armed with a very compelling theory. He suggested that when urban environments appear to be poorly cared for on the outside, they invite bad behavior and mischief on the inside. That is, by staying on top of the basic hygiene of a human habitat – fixing broken windows, removing graffiti, cleaning sidewalks, fining the turnstile jumpers at the subway station – it sends the message that the place is cared for and respected, and the reduction in violent crime will subsequently fall.

Giuliani committed to it, and while the results were highly debated among criminologists and politicians, it is hard to deny that crime was reduced significantly, and continued to fall for the next ten years.

So what does this say about the importance of design? As humans, we’re hardwired to glorify and nurture the things that merit our affection, and to impoverish the things that don’t. Good design is a brand new city – free of broken windows – that demands our respect. It asks for nothing less than our best work.

When we give less than our best work, the proverbial “broken windows” start to arise, and it’s hard to turn things around. We’ve all been part of projects like this:

Client: I need this widget on the home page.

Designer: OK. I’m concerned about how it will work with the rest of the elements on the page. Let me make a couple of comps for you and you can tell me what treatment you like.

Client: I don’t have time for that. Just stick it somewhere.

A “stick it here” and a “stick it there” later, the design has fallen into disrepair. It becomes progressively harder to keep the site beautiful, and progressively easier to commit “crimes” such as jamming a widget where it doesn’t belong. Why? Because every subsequent developer who touches the site is informed that the bar has been lowered for this project, and he sees diminishing returns for investing time into it.

To this end, at Bluehouse Group, nearly every change we make to a website goes through design first. Even if it’s just for 15 minutes, we always consult our design team. The result? Our sites remain beautiful, and always worthy of our care.

3. The Design is the Product

George Carlin once quipped while explaining his spirituality, “I worship the sun. Why? Well, first of all, I can see the sun. That kind of, you know, helps the credibility along.”

OK, so he’s not the most pious fellow in the world, but he does make a good point. We’re visual people. We get sold on things that look good. Just look around. Television and the Internet are dominant media. Politicians are good looking. E-commerce websites spend big money on interactive photo features for their products. There’s no doubt about it -- we eat with our eyes.

Code, on the other hand, is a bit of a thankless job. 99.9% of visitors to a website are not going to look at the underlying HTML/CSS and JavaScript, and none of them are going to see the server-side code. Quite frankly, most of the people whose opinions really matter about a website don’t care about the elegance of the code. They only care when it breaks. They’re much more interested in how things look – then, now, and in the future.

Even though we should know better, we’re all guilty of disproportionately favoring the visual to the hidden. When buying a new home, we get sold on granite countertops, stainless steel, and hardwood floors. We understand these things, and we have the tools to evaluate them. When we hear that the electrician did a supreme job on the wiring, if such a thing is mentioned at all, we’re nonplussed. We think, “Well, I would hope so!” This is because most of us don’t have a means of evaluating electrical handiwork, so we take it for granted.

We’re visual people, and we can all identify what looks good and what looks bad. Design is easy to sell. Good code, on the other hand, simply satisfies an abstract requirement that the buyer does not understand and therefore cannot value.

Unfair, isn’t it, coders?

So what is good design? A coder’s opinion

Defining good design comes with all of the hurdles and trappings of trying to define something like happiness. It’s an abstract and impossible task. We all have our perspective, however, so here’s the definition of good design from a guy who doesn’t know a layer mask from a lasagna.

Good design is frictionless. Steve Krug’s best-selling Bible of usability Don’t Make Me Think was successful because it emulated its very title. It’s painless and easy to read. Thinking isn’t something that jibes really well with the web. People use the web to find information, and they want it fast. Thinking is a huge roadblock to finding information, and should be saved for slower-paced media like newspapers, books, and movies. Good design is uncluttered and puts information behind as few clicks as possible. Good design understands the way the human eye relays information to the brain, and is optimized to make it an efficient and enjoyable process.

Good design is beautiful. It’s not as subjective as you think. Beautiful web design is easy to identify. It has a lightweight and harmonious color scheme. It aligns to an exacting grid and breaks it for dramatic effect where appropriate. It never places too much contrast between text and background, and it never, ever uses the hexadecimal #000.

Good design doesn’t need color. Color is an ancillary component to a good design. When rendered greyscale, a good design is functionally lossless. With such a high level of importance placed on its organization and typography, color is merely an enhancement to a good design. A good design is well equipped to live in a black-and-white world.

Good design is subtle. Designers should heed the same rule for Photoshop effects that many women follow when wearing makeup: “If they can tell you’re using it, you’ve used too much.” We’ve all seen inappropriate and excessive application of graphic technique. It comes in the form of rainbow gradients, hovercraft drop shadows, arbitrary curvature, do-nothing textures, and lighting effects that suggest there are four suns. Good design doesn’t need to clue you into its bag of tricks. It’s humble, and it has nothing to prove.

Let design lead the way

Whether you’re a programmer, front-end developer, project manager, or anyone else involved in making a website come to life, you can profit from allowing design to guide your decision-making and inspiration. If you’re a solo developer and you’re not skilled with design, consider hiring a designer before settling on doing it yourself. You may be surprised by how many talented designers are out there who are looking to build a portfolio and will work for low cost. Design is almost always worth the investment. If we collectively place a higher importance and value on quality design, we can make the web a much more inviting and enjoyable place that is deserving of our care.


Post your comment

Note: Comments are moderated and won't show until they are approved


  • @Jono,

    If you look closely at that website you'll see that #00 is never used. It's close, but there's always a little color in there.

    The reason #000 should be avoided is due to the difference between projected light vs. reflected light. In the physical world, light is reflected to our eyes. What we perceive as "black" is always much more of a charcoal grey and never pure black. Black only exists in the absence of light (outer space).

    As an experiment, try taking a picture of something you consider "black," and then eye drop it on Photoshop. You'll see what you think is #000 is actually quite far off.

    High contrast for dramatic effect is quite purposeful when done right, but you don't need #000 to achieve that. Our eyes don't deserve a level of contrast that is literally unearthly.

    Posted by UncleCheese, 3 years ago @unclecheese

  • Really enjoyed reading this post Aaron but I disagreed with you on one point - as a designer I have often used #000 text on a white background. Form follows function - it's not to say form isn't important but if you place a higher value on style than legibility you don't really have the best interests of your users in mind. I point you to http://contrastrebellion.com/ for examples of beautiful, high contrast web designs

    Posted by Jono, 3 years ago

  • I agree with your definitions of what good design is, but I think that it is just one sentence, everything that you feel you like is good for you - this is true for everything, including design!

    Posted by Jaclin Van Bern, 3 years ago

  • Thanks for a great post, Aaron. I agree that the 3.0 designs are a big step in the right direction for SilverStripe and have instilled a lot of confidence in it's future.

    Also a good point about the role of color in design. It's standard for a logo to be designed in grayscale before adding color, to ensure that the essence of the design communicates the right message and works across various mediums. I think this practice could be used more in web design, color can evoke emotional responses that make evaluating design decisions a lot harder.

    And lastly, a summary of my own thoughts about good design. Design is a process (not a one-off production), a means to solve a problem. Regardless of a designers skill, most web designs will not get everything right in the first crack. When designing for the web, we need to embrace testing and iteration. Good design is design that evolves to better meet the needs of the user.

    Posted by Ryan Wachtl, 3 years ago @ryanwachtl

  • A fantastic read Aaron!

    This article really speaks volumes to many audiences (not just coders and designers) but all people involved in web (sales, management, etc). In fact, it really transcends industry (i.e in the example you've made with buying a new home). Very well articulated!

    I had a couple laughs as well (i.e. "lighting effects that suggest there are four suns" - hah! too true)

    Posted by Robert, 3 years ago

  • UC your words strike many chords..

    From the first paragraph i was hooked, only a coder could have written this.. and you made me laugh with the "stick it here" mentality,, how many times i, as a non designer say to clients "i dont think that will quite work" yet they insist.. and it doesnt work..

    Brilliant piece of writing UC..

    Many thanks for your work contributing to SS.. and to all the designers who read this.. the guys with the artistic flair, you are the ones that make websites sing in the end user experience.

    Posted by Martin Jarvis, 3 years ago

  • I absolutely agree with you! Design is actually what attracts people to a site so we should make it the most attractive!

    Posted by Nate Move, 3 years ago

  • Great article on design. I'd like to say Josh is 'Chalk' and you're the 'Cheese', but in Bluehouse's designer/developer relationship, this isn't the case. Well done.

    Posted by Duncan, 3 years ago @youngbreaks

  • Hi Aaron,
    I think that's probably the best design post written by a developer I've ever read. It's great to have a developer's perspective about design and how you guys are getting more interested in user experience as a whole.
    Coming from the oposite side of the spectrum I'm watching the same movement from (good) interaction designers getting more knowledge and interest for code.
    Props for you and Josh for the great work :)

    Posted by Felipe, 3 years ago @felipeskroski

RSS feed for comments on this page | RSS feed for all comments

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.