Webupon

What You need to get started

Alright, want to make your web pages look better? Well, first of all, I recommend that you have a good program for making web pages, such as Adobe Dreamweaver, and have a fairly decent knowledge of HTML, the language in which we construct web pages, and be able to write some CSS (cascading stylesheets) and JavaScript. However, we will not be dealing with that at the moment, but instead focusing on the conceptual part of web design.

Good Planning is Essential

When you are planning on making a web page, the first thing you should do is visualize. What elements will your page have? Think of a layout, and make sketches of your ideas while they are still fresh. Never erase, for ideas that you may not think are good right now may be invaluable when coming up with new designs later. Once you have found a design that you like, you can start manifesting it in the form of actual pages. Once you have done that, you can check it with the following guidelines:

Level of Organization

Basically this is organizing things based on their importance. More important things should be larger, and less important things should be smaller. Simple, no? But it is amazing how many people fail to understand even this simple concept. You should also place more important things farther up top. So bigger and further up top = more important, and smaller and further down = less important.

Cuttoff Point

You should also take into account that most people do not want to scroll down in order to see vital information. If it is important, then it should be further up. Placing content below the cutoff point is a surefire way to not get it read by anybody. Take Google for example. Its homepage is very sparse, yet is an excellent example of good web design practice. Only the essentials are on the homepage, and even having such a sparse page, Google has tons of content, tucked away into the corners. One thing that can help a lot is having a drop-down horizontal menu, with folders. This can help you cram as much stuff as possible onto the page, while still having it look neat, organized, and easy to navigate.

Kill the clutter

As much as you may think it looks cool, having a bunch of flashy images on your home page is not the best way to go about designing a page. It simply adds to the noise. Noise is when people’s attention is diverted to multiple places at once. Things that add to noise are large blocks of text, multiple large images scattered across the page, and forms. For the home page, you should have preferably only a few focal points, else the reader will be distracted.

Visual Appeal

Yes, it is also quite necessary that you have a good looking template to start with, including a good banner/logo at the top, a a background that isn’t a color that obstructs readability and visibility. If you are using a tab menu system, the user should be able to cleanly differentiate which page they are on. You should keep the pages as clean cut as possible, while, making it also look professional.

You should avoid harsh contrasting colours, such as yellow on black, or even white on black obstructs visibility. Clean cut pages are mostly white, and you can add some light tints as well.

Your banner should flow, and it should complement the rest of your page as well. A smooth flow is the most key element to looking professional.

Don’t make me think

Your pages should require as little thought as possible to navigate. Users like to have the work already done out for them. You should not complicate things needlessly, and making up your own terms for common phrases, eg. using Submit Query instead of Search, is just another mistake that many users tend to make.

Usability

Last but not least, your design must also be practical. Pages should not take more than 3-5 seconds to load under a broadband connection, and less is preferable. Placing 3rd party javascript scripts at the bottom of your code can boost your load time significantly, and so can cutting back on large images and embedded videos that must preload. The important functions of your product or whatever it is you are making your website for must be in plain sight, and nothing should be hard to find.

Good luck, and I hope I helped!

Coming soon: Web Design 201- Stylesheets