9 Fundamental Concepts For Effective Web Design
Your website design is not something you can afford to take for granted. Skillfully done web designs are deceptively simple looking. Most visitors don’t consciously notice when a great website design provides specific benefits like…
Ease of use
Comfortable to the eye
Effective at presenting information
For most “regular” visitors (not designers), websites that achieve these results are just “good” websites.
When a visitor feels that way, that means the design is facilitating positive user experiences, and not causing negative reactions of confusion, frustration, and bouncing your site completely.
That’s what you want from your website design–a positive contribution to user experience.
Let’s now look at some design techniques that are used by many of the best websites. Please note that design is fluid and constantly changing from year to year, so these “fundamentals” are not dogma. Nor are they the only design strategies that work.
These are just 10 effective design observations we have noticed. These should be helpful for your own websites. Depending on the goals of your website, not all ten of these design dynamics may be right for you. You can pick and choose.
So, let’s get started.
1. Page Space
There is a human tendency to want to fill up empty spaces…this often applies to web pages. We see that from the number of websites that cram too much copy and design onto a page.
A good web designer understands the power of empty space on a page. Here are three examples…
*Line Spacing – You don’t want too little space between lines of copy…that makes it difficult to read. And so does too much space between lines.
Finding just the right balance for your line spacing has been a challenge for publishers since the beginning days of the printing press. Printing pioneers of the middle ages were known to place lead bars between the lines of copy.
The good news is you don’t have to do that in web design. Simply use the “line-height” selector in CSS to adjust line spacing.
*White Space – The term is talking about empty space in general, not only white space. Your empty space can be in any color. Whatever color dominates your page, consider how some empty spacing could provide some balance and proportion to the page. Have you noticed how upscale brands and high end products and services tend to use large amounts of white space? Websites & Ads for certain products like watches or luxury autos like to use empty space used as an element of design.
*Padding – This term implies leaving some space, or “padding” between elements such as a photo and text, or or borders and table. Text should not touch photos, and borders shouldn’t overlap tables.
2. Eye Guidance
Did you know that a web designer who can direct the eye movements of those who visit his websites is doing a masterful job? For like a shepherd skillfully directing his sheep to go where he wants them to, the web designer who can anticipate the typical eye movements of visitors and use varying degrees of visual weight on each page as a shepherd uses a staff to encourage movement in specific directions.
For example, eye tracking studies have proven that website viewers generally first look at the top left corner of the web page. That’s why so many websites place their logo in the upper left of the page.
Okay, that’s easy enough. But then what? This is where the real expertise kicks in. How do you get the viewer to go to point B? Point B is your second most important priority on the page. It could be a statement of purpose or a photo, then perhaps you want them to see a body of text…the sequence is up to the designer of your website.
Here are the tools to help you achieve what we call “eye guidance.”
Contrast — If you want something to stand out, make it look different than the other things around it on the page.
Size — If you really want something noticed, make it larger. Or, if everthing else is big, make it smaller.
Design Elements — The red arrow is a great example of this. Highly effective at getting folks to look at something.
Position — Where you place something on the page will greatly determine how much it gets noticed.
Color — Bold and soft colors do a great job of attracting attention when used strategically.
Two eye tracking tools you can use to test your users behaviour that we recommend:
3. Develop a Web Developer Mentality
With the move to CSS layouts, creating a website has become easier for web designers. But knowing how to build websites is still a huge plus for a designer, as it helps a designer to know their limitations as well as the potential of website design.
For example, here are some examples why web designers need to know their limitations and full capabilities of their trade…
A. Can This Really Be Pulled Off? Your client has agreed to your idea of using a really unique font. But in your excitement, you didn’t check to see if it could be used in standard HTML format. Oh boy. Now you have to tell them to forget about it. Not fun. Or how about this scenario: You have discovered that your elegant design that’s 1200 pX wide requires most visitors to use a horizontal scroller, thus turning what was supposed to be a visual strongpoint into a negative turnoff.
B. Do You Know the Limitations of CSS? For example, at times, vertical alignments in a web design are difficult, and best left alone. Not knowing this could delay a project.
C. Do you know ways to simplify your process, thus, save time?
Here’s one way of doing this: Web marketing puts a premium on the “call to action”, right? For a designer, this can translate to creating a download button with a clearly understood image on it, to help facilitate conversions. But spending time on button images can get time consuming. Once you switch to using CSS to create site buttons, you will have more time to invest in other design elements.
No matter how well each individual web page is designed, a visitor will want to click to other pages (hopefully.) That’s why web designers need to know about navigation.
Help your visitor get from point A to point B. Make sure your navigation buttons are easily found (at the top) and provide simple direction on where they lead. The buttons should look like navigations buttons, with simple text that’s easy to identify.
Often, typography is the most common element a designer for the web works with. That’s why they need to think about things like:
Fonts — Each font expresses something different. Make sure the one you choose fits the style of your website.
Font sizes — Awhile back, people needed glasses to read all the trendy, tiny text across the web. Thankfully, those days are over. Be sure your text sizes match throughout each web page, are legible (readable), and the right size for each function. Headlines and subheads should stand out from body text, and making them larger is the best way to go about that.
Spacing — Are your text lines spaced effectively? Make sure lines of text are not so close together that it makes for difficult reading.
Line Length — Newspapers have known for over a hundred years that lines of text shouldn’t be too long from left to right. That’s why they created columns of text. Websites need to think about their readers in the same way.
Color — Sometimes a design element has its place, like low-contrast text. But consider who the audience is, and whether or not the hip look should trump readability.
Paragraphing — Your paragraphs should be readable. That’s priority number one. Sure, justifying the text can look sharp, but the auto-spaced gaps between some of the words can end up looking goofy. This point is particularly true when it come to articles and other forms of long copy that are meant to be read. In these instances, using left-alignment is best.
Of course, you want to design good alignment, which doesn’t always equal straight lines for everything. The primary focus is designing a sense of order on the page. This helps visitors comprehend what they are taking in as they look at the web page. To help with consistency, you might want to approach a project using grid design. A great read about grid designing is Smashing Magazines’ Designing with Grid-Based Approach.
Besides the aforementioned aspects of usablility–navigation, eye control, and text–let’s look at three additional ones that are important as well:
Keeping to Standards – Innovation and creativity have their place, but when they cause people to bounce your site due to confusion and frustration, then it’s time to get back to the basics of usability. For example, underlining a piece of text for emphasis is not good usability when there is no link to it. That’s what people expect. Your web site should not surprise people with unconventional design elements.
Testing a Design Before “Going Live” Prototyping enables you to test a website design to see firsthand how well (or not well) the design supports user experiences. Many times things are not noticed about web designs until they are actually used. Doing this before you open your website to the public can make a huge difference.
Think about user tasks
Take time to consider what the actual purpose of your website to its users. Create a list of the tasks, how they get accomplished, and strategize how to create a simple path for them.
Does a search box provide a ton of help to your visitors? Then provide one that’s easy to find on every page. Are users getting confused right from the beginning on your homepage? Simply provide the most common and easy to identify tabs there (like About, FAQ, Contact.)
The less frustrating your usability, the happier your visitors will be, which leads to more conversions.
Soon after diving into a career in web design, many discover why their mom’s were so adamant about wearing clothes that matched…There is something to be said for visual consistency.
Colors, font selection, button styles, heading sizes, illustration styles, design elements, photo choices, and factors need to have a consistency on a website, or else the visitor finds a hodge podge of sights that aren’t comfortable.
Professionals keep their design consistent. They know that consistency throughout a website emits a sense of quality and competency.
Preparing a good set of CSS stylesheets early in the process will help your design stay consistent.
Nobody wants to visit a website that’s fuzzy, blurry…you know, hard for the naked eye to make out the fine details . As if they were wearing the wrong prescription of glasses.
Although the above description may be a bit exaggerated in most cases, designers that don’t consider the pixels will end up creating web pages that present their own visual issues.
If you are using CSS, keeping your web design crisp and sharp should be easy. But if you’re using Photoshop, there are things you can do to help minimize the haziness. One way to do it is to hold your shaped images snapped to the pixels. Yes, you may have extra work to manually clean up lines, boxes and shapes. But the results are worth it.
A few other tricks are as follows: Always create text using the anti-aliasing setting. Sharp might work best. Also, keep your borders clearly defined by turning your contrast way up high. To keep the contrast exagerated, slightly over-emphasize your border just a tad more than usual.
Again,these design principles may not cover everything, but the nine listed here will contribute a lot to your website’s overall success.