Principles of Good Web Designing Practice

Best Design Principles
One of the greatest secrets of the web designing is that designing a functional, effective and elegant web site really isn’t that hard. It’s true. Normally anyone can do it. You don’t need to spend a lot of money to get started, the tools are available to anyone who has access to a computer and it is easy to view and make changes as you go along.  Not everyone is capable of creating a bleeding edge, award winning site.  Web design can be deceptively difficult, as it involves achieving a design that is both usable and pleasing, delivers information and builds brand, is technically sound and visually coherent. Adding to this the fact that many Web designers (myself included) are self-taught, that Web design is still novel enough to be only a side subject in many design institutions, and that the medium changes as frequently as the underlying technology does.

Usability and the utility, not the visual design, determine the success or failure of a web-site. Since the visitor of the page is the only person who clicks the mouse and therefore decides everything, user-centric design has become a standard approach for successful and profit-oriented web design. After all, if users can’t use a feature, it might as well not exist.

Good Web design, perhaps even more than other type of design, is about information. One of the biggest tools in your arsenal to do this is precedence. When navigating a good design, the user should be led around the screen by the designer. I call this precedence, and it’s about how much visual weight different parts of your design have.

Few Good Designing Principles:

Guiding the Eye: But precedence should go much further. You should direct the user’s eyes through a sequence of steps. For example, you might want your user to go from logo/brand to a primary positioning statement, next to a punchy image (to give the site personality), then to the main body text, with navigation and a sidebar taking a secondary position in the sequence.

What your user should be looking at is up to you, the Web designer, to figure out.  To achieve precedence you have many tools at your disposal:
Position — Where something is on a page clearly influences in what order the user sees it.
Color — Using bold and subtle colors is a simple way to tell your user where to look.
Contrast — Being different makes things stand out, while being the same makes them secondary.
Size — Big takes precedence over little (unless everything is big, in which case little might stand out thanks to Contrast)
Design Elements — if there is a gigantic arrow pointing at something, guess where the user will look?

Logo - [Allowed to use only on this blog - Copyrights]

Logo – [Allowed to use only on this blog – Copyrights]

Spacing: When I first started designing I wanted to fill every available space up with stuff. Empty space seemed wasteful. In fact the opposite is true. Spacing makes things clearer. In Web design there are three aspects of space that you should be considering:

Line Spacing: When you lay text out, the space between the lines directly affects how readable it appears. Too little space makes it easy for your eye to spill over from one line to the next, too much space means that when you finish one line of text and go to the next your eye can get lost. So you need to find a happy medium. You can control line spacing in CSS with the ‘line-height’ selector. Generally I find the default value is usually too little spacing. Line Spacing is technically called leading (pronounced ledding), which derives from the process that printers used to use to separate lines of text in ye olde days — by placing bars of lead between the lines.

Padding:  Generally speaking text should never touch other elements. Images, for example, should not be touching text, neither should borders or tables. Padding is the space between elements and text. The simple rule here is that you should always have space there. There are exceptions of course, in particular if the text is some sort of heading/graphic or your name is Mr.Zel 🙂 But as a general rule, putting space between text and the rest of the world makes it infinitely more readable and pleasant.

White Space: First of all, white space doesn’t need to be white. The term simply refers to empty space on a page (or negative space as it’s sometimes called). White space is used to give balance, proportion and contrast to a page. A lot of white space tends to make things seem more elegant and upmarket, so for example if you go to an expensive architect site, you’ll almost always see a lot of space. If you want to learn to use whitespace effectively, go through a magazine and look at how adverts are laid out. Ads for big brands of watches and cars and the like tend to have a lot of empty space used as an element of design.

Laying out the pages: It’s a good idea to give some substantial thought to a basic layout for the site’s pages. This part of the process is the perfect time to play around with as many ideas as you can while it is still easy to do so. The site structure will have an influence to some extent, but you should still feel free to try something new. One way to do this is to use wireframes. Wireframes allow you to develop basic ideas about appearance and structure without getting distracted by the detail. Think of a wireframe as a skeleton for your page. You’re laying out the bones of a page and leaving the flesh for later.

Basic Layouts: Almost every web site will have a few common layout elements, such as a header (often with a logo), a navigation system, a “container” for the main information on the page, and a footer. Wireframing allows you to play around with these elements to get a feel for what works for you and your site. There are some classic layouts that will be familiar to you. The Digital Pacific blog, for example, is a classic three column layout. It has a header across the top, main content on the left hand side and two columns of navigation and points of interest on the right hand side. The pattern is completed with a footer across the bottom. It is at this point that all the hard work planning goals, mapping out the site and deciding on a basic structure pays off. Deciding on a site pattern and settling on the basic layout should now be a simple process, making it easier to either start the design work or to give your web designer a clear brief. With this planning under your belt, it makes it that much easier to begin thinking about the next stages of bringing your plans to life.

Don’t make users think: According to Krug’s first law of usability, the web-page should be obvious and self-explanatory. When you’re creating a site, your job is to get rid of the question marks — the decisions users need to make consciously, considering pros, cons and alternatives. If the navigation and site architecture aren’t intuitive, the number of question marks grows and makes it harder for users to comprehend how the system works and how to get from point A to point B. A clear structure, moderate visual clues and easily recognizable links can help users to find their path to their aim.

Strive for feature exposure: Modern web designs are usually criticized due to their approach of guiding users with visually appealing 1-2-3-done-steps, large buttons with visual effects etc. But from the design perspective these elements actually aren’t a bad thing. On the contrary, such guidelines are extremely effective as they lead the visitors through the site content in a very simple and user-friendly way.

Make use of effective writing: As the Web is different from print, it’s necessary to adjust the writing style to users’ preferences and browsing habits. Promotional writing won’t be read. Long text blocks without images and keywords marked in bold or italics will be skipped. Exaggerated language will be ignored.

Talk business: Avoid cute or clever names, marketing-induced names, company-specific names, and unfamiliar technical names. For instance, if you describe a service and want users to create an account, “sign up” is better than “start now!” which is again better than “explore our services”.

Strive for simplicity: The “keep it simple”-principle (KIS) should be the primary goal of site design. Users are rarely on a site to enjoy the design; furthermore, in most cases they are looking for the information despite the design. Strive for simplicity instead of complexity.

Testing:  Test Early Test Often-principle should be applied to every web design project as usability tests always finds out the mistakes errors that can happen designing. It’s a good practice to test often the site with testing principles, whenever new updates are updated to site.

Some important points to keep in mind:

*Testing one user is 100% better than testing none and testing one user early in the project is better than testing 50 near the end. Accoring to Boehm’s first law, errors are most frequent during requirements and design activities and are the more expensive the later they are removed.

*Testing is an iterative process. That means that you design something, test it, fix it and then test it again. There might be problems which haven’t been found during the first round as users were practically blocked by other problems.

*Usability tests always produce useful results. Either you’ll be pointed to the problems you have or you’ll be pointed to the absence of major design flaws which is in both cases a useful insight for your project.

*According to Weinberg’s law, a developer is unsuited to test his or her code. This holds for designers as well. After you’ve worked on a site for few weeks, you can’t observe it from a fresh perspective anymore. You know how it is built and therefore you know exactly how it works — you have the wisdom independent testers and visitors of your site wouldn’t have.

Bottom line: if you want a great site, you’ve got to test.

3 thoughts on “Principles of Good Web Designing Practice

  1. Pingback: Principles of Good Web Designing Practice | Web Designing - Top Tips for Web Developments |

  2. Pingback: Infographic: Top 10 Super Avoidable Small Business Web Design Mistakes

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s