Home > Web Design > The basics of web design

The basics of web design

Millions of webpages populate the World Wide Web today, and, put bluntly, many of  these pages are not well-designed.  Unlike designing, say, a logo, web design has both an aesthetic component and a function component.  Both of these must be carefully considered if you are going to make a website that will stand out from the pack.



The above is the home page for a website I designed as part of a project for a graphic design course.  It’s certainly not perfect, but it will do as an example.  This site, a redesign of an existing web page, shows off the basics of good web design.  First is a header.  You want something that’s eye-catching without being overly chaotic.  Choose a color scheme and stay with it.  When setting up your page, the dimensions are important.  Monitor sizes vary wildly, obviously, but there are guidelines that you should remember.  1000 pixels wide is the maximum, but 800 is safer.  My page is set at 800 pixels to make it as accessible as possible.


As for height, you want the most important information and links on your site, mainly your navigation bar, above 700 pixels.  Anything below that mark is “below the fold,” meaning that many people will have to scroll down to see it.  Usability is a major concern, as people won’t want to visit a site that is a pain to navigate.  Speaking of navigation, your navigation bar is absolutely one of the most important things on your homepage.  It should be horizontal so as to avoid people having to scroll down to see it.  I placed my nav bar directly below the header in order to draw the eye to it.


Lastly, we come to the concept of modular design.  See how, on my page, the content is divided up in to discreet “boxes?”  That’s modular design.  Those boxes compartmentalize relevant information and keep the page well-organized.  The boxes on my page are organized so as to flow from left to right, just as they are read.  This is an example of how a modular design streamlines your page and adds to both its aesthetic value and its functionality.

Categories: Web Design
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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

%d bloggers like this: