Login or Register
Facebook
Why Must I Go This Route?
Drawar allows you to register through your Facebook, Google, Yahoo, AOL or Twitter accounts. The reason this method is used is because it makes sure real people are going to use the site and participate in the Community. It also means no personal info is stored here which is a very good thing.
If you need a reason to register then just check out the About page. Drawar is a great place to learn and discuss design amongst great people.
A web design and development community for people with a thirst for knowledge. Follow the Community on Twitter right here.
The Principles of Great Design
As a designer or lover of design you might find yourself asking not what is design, but what makes a design great? How often have you gone through a gallery and looked at some great designs and told yourself that you are going to open up Photoshop or a browser and do the same thing right now only to find that when you are done the end result simply doesn't match what you were expecting?
Drawar in my mind has a good design, not a great design, but one that is good enough. Good enough however really shouldn't be the goal we are trying to reach with a design. You can call it User Experience, but I just like to refer to it as the experience. When I go through Drawar I still recognize that I am on a webpage. Maybe you see it differently and in a better light, we all have our different perspectives. Although the experience of Drawar is through the discussions and community, it would be nice to have the design further enhance the experience that the site provides overall.
Great designers sweat the details. I worked with Mike Rundle for over six years so I know what steps great designers go through to make sure all the details are in the right place. He would spend weeks on a header and wouldn't stop until each pixel was in the right place. We don't notice these things because they flow so naturally to us, however we sure notice when something seems out of place. I'm the type that likes to throw something together real quick and get it out there and iterate over time, but that is also why I'm not a real/paid/successful designer.
When I wrote about the best designs of 2009 I tried to explain why I thought the designs were so well done. When people ask me to give my feedback on a design it's hard for me to do so if it immediately doesn't catch my eye. When a design doesn't click or offer the experience it means that a number of things are missing or wrong with it. There is no secret formula to great design that one can follow, but there have to be some principles that you aim for because the best designers always seem to produce great designs consistently.
The Principles
Balance
The sum is greater than the parts. We all know this, but how often do we look at the parts of a design to make sure they are there to balance out the sum? Too often you find designs where it seems on element tries to take control of the design. Every design will have dominant elements to it, but they are always balanced out nicely by smaller elements. This is where paying attention to detail really pays off.
Apple's website is a great example of this. There is always a dominant image on any given page, but that image is balanced out nicely by other elements of the design. In contrast, how often do you visit a site where no element is dominant and everything is trying to fight for power (the Drawar homepage maybe)? Balance doesn't mean everything carries equal weight, it simply means that you make sure all parts equal one solid design.
Another term that can be used with similar effect is proportion. If you are making a meal where the main dish is steak, you don't cover 75% of the plate with mashed potatoes and only 15% steak. Having a good proportion helps to maintain the balance of the site. Interior decorators get paid so well because they help to bring balance to a room. Ever been in a room where the balance felt off? It's hard to get settled into and personally it always makes me feel uneasy.
Contrast
This is something that I have yet to master. Great design provides the eye with necessary variety. Without contrast, good design becomes boring. It loses it's power. While balance and proportion are used to maintain cohesiveness, contrast is used to maintain interest. Usually this applies to the colors that are used on a site. When a site sticks with a singular color scheme, it causes the eye and mind to lose focus.
Rarely do you find a man in an outfit of a singular color. If you are wearing a white tuxedo, it is good to contrast it with a black belt and black shoes to accentuate the look. All white, while looking pretty cool, loses interest quickly because there is nothing used to help keep the interest.
I love kettle's website because the bright yellow contrasts so well with the black. In most cases yellow on the screen is hard to read, but the black provides enough contrast where it isn't hard to read and it keeps the design interesting. Contrast is great in manipulating the feelings of your users.
Economy
I like the term economy because it reminds me of a budget. In any design we are limited by something. It could be budget, space or materials. Economy takes into account that less is more and finds the best way to work within the limitations that we are presented.
How many great meals are made (designed) with a minimal amount of ingredients? The more we add to the dish the more the flavors get masked and lose their essence. Economy is the ability to use only the resources that are necessary. Just because you are given a million color palette doesn't mean that you need to use all of them. Some of the best designs on the web use at most three colors.
A great example of a site that knows economy is David Kaneda's blog. Nothing on the site is overdone and yet it isn't minimal to the point of losing your interest. The site works with limited elements and yet finds a way to maximize the effectiveness of each one.
Direction
This is another place where many designs fail. Designers have to remember that they are designing to guide the eyes of the user to some goal. Going back to the Apple website, what if they had the large image at the bottom of the page instead of the top? Wouldn't your eye be drawn to the bottom initially instead of having it work its way down? This is why ads on sites bother me so much. They aren't integrated in the design to help enhance direction. Instead, they seemed to be placed to purposefully disrupt the direction of the design. You want your readers to read your content, but instead they keep getting pulled to the blinking image on the right.
TechCrunch recently did a realignment with their ads to put them more in the direction of the content. Instead of having a large listing of ads in the sidebar on the homepage, they placed the ads in between the entries. This goes along with the direction of the design and causes less disruption than before.
Great designs are like a map that gently guide the user's eye down a path.
Space
White space. Sometimes I see a design that uses too much and other times I see one that uses too little. I don't know what it is, but good designers just seem to have a good eye for spacing. Great designers understand the importance of using a grid and within that grid they can find the spacing that is required to pull great effect from the design. The problem with white space is that many people perceive it to be applicable only to minimal designs. Why wouldn't the spacing of elements play just as an important role on a content-rich site than it does on a poster?
Looking at the New York Times website, the spacing of sections is the only thing keeping the site together. It's a clean design and although I do wish there was a lot less going on, the designers worked with what they had to and utilized spacing to the max.
Two Examples
Below are two examples of sites that I feel take each of these principles into consideration to produce fantastic designs. They have nothing in common with regards to content, style or topic. The beauty of great design is that it is always different, but you always can trace its greatness back to these core principles which other great designs share.
Creating a great design is difficult because you can't apply only one of these principles well, they all have to be applied and work together. Good design might take into a consideration a couple of the principles, but great design sees each of these principles as a necessity.
This article was a bit different than what you usually see right? That is what Drawar is all about. It's not about being different, it's about helping all of us dig deeper into what web design really represents. It thrives off its members contributions so if you like what you see consider becoming a Plus Member or Drawar Friend.
17 Comments
Great post as usual. The only thing I'd add is that don't be afraid to break the "rules".
Every great design I've seen breaks a then thought of rule of design.
Great article,
All principals I wish I had learned earlier in my design career.
I love how you continually express that you aren't a designer but your knowledge of design is exceptional, please keep the great articles coming!
Just a couple of examples:
A few years ago no one created light on dark designs, it was perhaps an unwritten rule that websites should be dark text on white backgrounds, but some really great designs break this rule (some you linked to above) and stand out from crowd even more.
I'm a big fan of the UXMag (http://www.uxmag.com) design, it has an awesome grid structure that they bend (if not break) to great affect.
Those principles seem to be very bias towards visuals. I'm not sure that they're principles of good design at all.
@WiBu: Indeed they are visual based. Great design plays to the senses. On a multimedia site there might be music to add to the overall design. Food has taste and texture. Apple products not only have a look, but also a feel to them.
What is a principle of design to you if not these?
@iisbum: Dark on light isn't a design rule as much as a usability issue. If you can apply the correct contrast it works very well. In regards to UXMag, it is a great example of balance and spacing.
I'll admit I haven't spent much concious time at all thinking about principles of good design. While I could attempt to come up with some on the spot, I wouldn't do myself justice.
I think there's a fundamental difference as to how we see design. I see design as purely functional, everything has and is a function be it man made or naturally occurring. A conversation is a function, a website is a function, breathing is a function just as 2+2 is a function. Even purely visual objects (objects in the abstract sense) are purely functional, the visuals are just a function of interface, a way of communicating another function, be it easy to grasp such as text representing words or something more abstract such as different colours or shapes provoking certain reactions; it is the same thing, one is just more standardised, and thus easier to understand, than the other.
On the topic of visual design: I don't believe visual design should seek to create beauty through aesthetics alone. Something should be beautiful because it functions so well, because it got the underlying message across efficiently, not because it exploits basic human characteristics for the sole purpose of pleasure.
This article seem to be elements of good visual design, things you should consider and explore, not principles. Granted, this is just petty semantics.
Hopefully all that made sense.
Anonymous@drawar not feeling controversial today? All true except your assertion that you're not a designer. That's just over-modest bollocks :D
AnonymousGood stuff. I wish I had this when I drafted my Smashing Magazine article about design critique (coming soon to a browser near you) as I totally would have linked to it. Nice summary Scrivs.
Anonymous@drawar i like your website and your work; gonna check out that article when I get back to the "office".
@WiBu: Let's run with your everything has a function theory. If everything has a function, every aspect of that thing has a function as well. All the principles above are merely characteristics of a function. The yellow font on a site is a function characterized by how it contrasts with the black background.
AnonymousDesign is all about being functional and the 'rules' are only meant as guidelines. Great design uses the rules as a starting point and 8 times out of 10 will find a way to break them in a logical fashion and make the audience make a choice whether it is conscious or not, and the piece becomes the 'talk' of the design community. The best design is not what is being done today, but what had been done hundreds of years ago by the great Masters of the Renaissance who systematically planned both mathematically and visually all elements or their art to create works that truly stood the tests of time. They created the rules that we follow today. I think what we lack in recent years is the ability to look back to the artists of old who can teach us much more than the designer in the country next to us who uses the latest pantone to attract our attention. I'm not discounting any amazing designers/artists of today, but I think we can give credit to where the functional originally came from.
Yup,though I'm not sure what you're getting at.
What I was trying to say is that design should not be entirely based on the visuals. The visuals are simply an enabler for a greater function.
What is the function of the yellow font? Is it purely to give it "power" and to stop it from being "boring"? Or is it to train the eye, to give it direction, to force you to notice something, to give points of focus?
In a similar way, what is the function of space? Is it purely aesthetic or is it so we can distinguish individual elements, to give it balance?
As far as them being principles, again, I'm not sure. They're more like examples of what makes a design, different elements, rather than rules or guidelines on which to design from or judge a design. Balance, Contrast, Economy, Direction, Space are not principles and the supporting text and examples do nothing to make them principles.
Personally I don't think you can define good design by the elements it uses or how it uses them, as you have tried to do. Good design is defined by the result, the effect it has; it's overall function. Everything else is simply an enabling function.
Perhaps it was just me expecting something different from an article that was labelled "The Principles of Good Design".
AnonymousGreat article, helped me a lot with thoughts on my own design projects. Thanks :)
@Scrivs As someone who's pretty new to web and graphic design, I just want to say THANK YOU. My entire Web Design degree was the equivalent of 'here's how you use a saw, now go build a house'. Answering 'How?' is meaningless without first answering 'Why?'.
@WiBu I'm with you on the role of graphic design. Design is the rhythm section of the band, the pedestal on which a statue rests, or, to tie it all together, the house where people live. But technical proficiency allows for greater functionality. (and it also makes it fun, which imho is pretty damn important)
The one thing that worries me is that a lot of the "experience" designers look for aren't the same as what the general user should experience...
It's really hard to separate yourself from the looks and ask things like, "does the color combinations inspire confidence?" or "does the the thing being sold seem solid and dependable?" and blah blah blah.
Almost all the principles, in my opinion, are used to create the impression of organization (grid), cleanliness (colors), what's important (proportion/hierarchy), and whatever else is needed by the owner of the website.
I'm not sure what the hell I'm rambling about... I just think it's important to say that the reason to use these principles isn't to get a better design--it's to get a more effective website!
That may sound like the same thing, but I don't think it is...
Post A Wonderful Comment
To comment you need to take a couple of seconds to login or register. Seriously it takes seconds and if your comment is worth it, which I have no doubt that it is, then you should do it.
@drawar I guess i will just because you said so... ;)