The 3 Master Principles of Web Design
Floating around the universe, are certain universal principles that transcend disciplines. I would like to explore a few of them here, and talk about how they can be applied to web design.
The Three Master Principles
#1 Simplicity
This is such an important principle, that it can easily be made into the top three web design principles, just as location is to real estate:
- location
- location
- location
… we could say the same thing about simplicity in web design:
- simplicity
- simplicity
- simplicity
The important thing to take to heart, is that your web sites should be designed to be as simple as possible. You want to keep it simple for two main reasons:
- To make it easy for you to update.
- To make it easy for visitors to navigate the web site.
The simplicity principle applies to design, structure and the code.
What do I mean by ’structure’ of the web site?
I am simply referring to the URL structure. So we are talking about directory structures, page names etc. I’ve detailed this in my article on intelligent paths in websites.
I think the other two (design and code) are self evident.
… Now let’s look at principle number two:
#2 Modularity
Web sites, from the ground up, should be designed in a modular manner: websites should be built up as a series of modules/components rather than as a run-on sentence.
So that means a few things:
- Creating logical divisions in your website’s structure.
- Extracting out of your web pages, common elements (like footers) and use ‘include’ mechanisms to reinsert those elements back into your pages.
- Using external CSS style sheets rather than embedding CSS code in your pages.
Modularity helps you comply with principle number one (simplicity) and helps you to save time and effort. Knowing how to intelligently segment your site into logical structures is a sign of maturity in your abilities as a web designer.
… When I see a web designer first conceive of a web site as a series of building blocks/components, I know this web designer knows what they’re doing!
… Now onto principle number three:
#3 Balance
When I think of balance, the first thing that pops up in my mind is a boxer moving around the ring, always in balance, so that they can easily move in and out to land that knockout punch.
Being in balance gives the boxer his best chances to hit and not be hit. If off balance, they will be limiting their choices … missing opportunities to get out of the way (of a punch) or to move in and deliver a nice flurry of punches.
So what is the balance in a web page?
You can look at this in a few ways, but for me, the most important is to balance out how much information you deliver on a page versus making the page easy on the eyes. If the page is too busy, then users will be frustrated trying to find what they want to find. The same thing for the search engines, to much content on a page removes specificity, making it hard for the engine to categories your pages properly.
Design Aesthetics
This can be also looked at from the point of view of design aesthetics - white space on a page. You need ‘breathing room’ in your pages so that it is easy for eyes to move around unfettered by obtrusive content.
So what is the balance in a web designer?
It is the balance of being a coder vs. designer and how knowing a bit of both, will make you a much better web designer.
Understanding the aesthetics of web design (nice layouts, usability concerns) is an important ingredient to any successful web site. If it doesn’t look and feel good to the visitor … they will leave and not come back.
On the other hand, if you know nothing of code and just rely on programs like Dreamweaver, eventually you may find yourself with a big mess of code that makes keeping the website up-to-date a hard thing to do.
That’s all I got to say about that.
Stefan Mischook
www.killersites.com
February 28th, 2008 at 6:47 pm
I completely agree. Simplicity is key, I’m always selling the benefits of clean, blank ’space’ on websites to customers.
Having an understanding of both design and coding is also a critical success factor if you want to be a really good web developer and give your customers the best value for money.
February 28th, 2008 at 8:04 pm
I couldn’t agree more. I’m amazed at how many times I’ve seen websites that are way too cluttered and busy, either in normal view or in code view. Simplicity truly is key to communicating anything.
In the marketing world they say “a confused prospect never buys”, and it’s true. Unless your website is clear in what it’s purpose is, and isn’t distracting from that purpose, it will do well.
In my mind, a good website should be a peace of artwork. Clean and beautiful both from the code view and the user’s perspective. This goes beyond mere looks into menus, usability, accessibility, and even SEO. After all, a well designed site should be beautiful and useful to everyone who comes across it, whether they are blind, deaf, color blind, or even just on dial up.
PS nice design on this site, I’ll be back
March 10th, 2008 at 10:58 am
“Simplicity is the ultimate form of sophistication” - Leonardo Da Vinci He he who can argue with the master of design himself…
March 11th, 2008 at 6:24 pm
Designing with a good balance of aesthetics and usability is one of the toughest things I find. Usually when beginning a new design, visualizing how everything will fit together is a bit of a nightmare but once the ball gets rolling it gets easier.
good post though, and i’m glad you mention how important it is for designers to have some basic knowledge of development also.
March 16th, 2008 at 9:34 am
What an elegant and simple presentation of the basic concepts of web design. Unless a client has a view of the text they want to write, it is easy to direct them to simplicity. Oh the headaches if they have the text already prepared. My pet peeve when looking at a web site is inadequate white space.
Thank you for covering the category of designers needing a basic understanding of coding. Simplicity extends not only to the look, but also to the skeleton of any site, the code.
March 20th, 2008 at 8:53 am
I base all my designs on the idea of simplicity! Simplicity with good structure will outweigh any complex web page.
I also believe preparation should have an inclusion, as this is very important for all three principle.
But good work!!
March 26th, 2008 at 11:58 pm
Very well said, Stefan! A clean, easy-to-use website layout should always be the target when designing a site.
It’s amazing how far we have come with respect to web design best practices yet so many designers still miss many of the important basic principles like the ones listed here.
Considering the end-user and preparing a website’s structure from the beginning can save a lot of hassles later on in terms of design time and revisions, optimization, marketing, usability, and return on investment.
By following these guidelines, more commercial sites could convert website users into buyers. They represent a cornerstone of an Internet marketing success story.