There are certain elements that result in a creative website design – these elements are the different objects used to create the final layout. Too many elements, too many colors can leave the design looking cluttered. Identifying the elements that are to be a part of the layout is important before proceeding with the design itself.
A complex design is not necessarily a useful design. A design should be useful and straightforward. It should define at a glance what the site is about? Get the user to find what they are looking for – at a glance.
A few points that you can keep in mind when working on the layout of a webpage are:
- The number of elements on a page.
- The images used on a page.
- Use of text or image links.
- The amount of white space used in the background.
- The position and colour of the primary call to action.
Other factors that should be taken into account before proceeding with the design would be:
Resolution is the term used to describe the number of dots, or pixels, used to display an image. The higher resolutions mean that more pixels are used to create the image, resulting in a crisper, cleaner image.
When it comes to screen resolution no matter how perfect the design is, if the viewer needs to scroll to the side or the bottom – chances of the viewer leaving are high. Your pages should work at any resolution, from 800×600 to 1280×1024 and beyond. Typically you should design for a 1024 x 768 setting and ensure that the page contracts properly when viewed in an 800×600 setting.
There is a certain criterion that you can keep in mind when designing a page layout. Make sure that the key information to be presented is above the fold so that viewers can see the information at a glance without scrolling. Bigger screens show more content above the fold and require less scrolling. Ensure that the absolutely critical information remains visible at 800×600. Use a liquid layout using percentage widths to control layout. This allows the layout to adjust to the size of the browser window and different screen resolutions. All the web page elements rearrange themselves to suit the browser window or user’s screen resolution, if done correctly.
There are no standards about creating any Web 2.0 elements but certain features like clean colors, many gradients (so as to bring about depth and dimension), larger, bolder fonts and greater contrasts in color combined with a lot of white space to create a fresh, clean look are common to most styles. Sharp edges have given way to more rounded corners. Images with reflections and drop shadows are used to give a 3-dimensional finish.
How the design is displayed depends a lot on the real estate available on the display screen. Use fixed-width and percentage-based design so that the display can be managed well. For a fixed-width design it is better to have an 800 x 600 resolution. This ensures that the design does not stretch on different display media.
Color can contribute to effective and attractive web designs. If your web site has a solid colored background, make it a Web Safe color so that if the site is displayed on computers displaying 256 colors, the display will be clean and colors will not break up.
Colors represent the site’s message and should remain consistent throughout the site. Choosing the colors as per what the website is serving can go a long way in creating the right identity. Try not using more than 5-6 colors on a single page as multicolored websites tend to have the fewer return visitations.
Warm colors tend to be more exciting and aggressive. Using them in small doses can be inviting and an attention getter. Red is attention grabbing and makes a loud impression; therefore use it in moderation if necessary. Cool colors (blues, greens,) tend to be more soothing and calming. Creating a site with a combination of warm and cool colors will confuse the visitor. It may make the site look busy and result in quicker exits.
Use colors that represent the theme of your website. For eg. a site dealing with a younger audience can be use more warm colors, sites with a theme of nature would be better using green rather than purple.
Fonts that look good on print and fonts look good on a monitor are different. Using a font that is not common and not installed on most computers will end up rendering distorted text when the page is displayed. To improve the readability of your text makes sure that there is a contrast between the color of your text and the color of the background on which the text is displayed. Black or grey on a white background works the best.
When selecting a font check the font for simple strokes, good height, good spacing between the letters. This makes readability easier on the eye. Some of the most widely used fonts are:
This font was designed for the screen and is the most common sans-serif typeface used on the Web today. The ample amount of space between each character, as well as the amount of white space within the characters makes this font legible on screen.
This is another popular font designed for the screen. Trebuchet’s strokes are blocky and clear, it has a good height (large x-height) thus increases legibility even at a smaller size.
With large x-height this font transfers well on screen
Here are some sites where a number of fonts can be sourced:
CSS web design
CSS allows complete and total control over the style of a hypertext document. By using CSS in the web design (Cascading Style Sheets) all pages within the website can have the design elements changed as the designer just needs to edit the style sheet. Using CSS can keep both the style and the content separate. This allows for easier updates and revisions. Because a separate style sheet is created and linked to all the web pages, you get better control over website edits. So if you want to change a certain aspect of your page, you only need to alter one file, as a single CSS file can contain positioning, layout, font, colours and style information for the entire web site.
When used along with HTML it results in less code hence a faster page load. Since table layouts are not used for positioning elements, text loads really fast, resulting in a fast page load. The Style sheet is downloaded only once, and automatically reused for every page. On an average a website will load four to five times faster if it makes use of cascading style sheets.
The good blend of all the elements results in a page that communicates the message, which is the whole purpose of creating the page in the first place.