A Design is an individual display of headers, columns and footers used creatively to create a distinct identity for a website. It involves an aesthetic arrangement of objects on a single page.
There are certain elements that result in creative website design – these elements are the different objects used to create the final layout. Two 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 – defining at a glance what the site is about. Get the user to find what they are looking for – at a glance.
Some design elements that can make a significant difference to the performance of a web page are:
1. The position and color of the primary call to action
2. The number of elements on a page
3. The images used on a page
4. Use of text or image links
5. The amount of white space used in the background
There are some factors that should be taken into account before designing. These are mentioned below:
CSS allows complete and total control over the style of a hypertext document. By using CSS (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, colors 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.
For designing a website, make sure that you hire Design Professionals who are well-versed in CSS as well as HTML and can provide you an affordable and creative website design.
Thirdly since the HTML code is a lot cleaner search engines will crawl faster resulting in faster indexing of the webpages.
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 800x600 to 1280x1024 and beyond. Typically you should design for a 1024x768 setting and ensure that the page contracts properly when viewed in an 800x600 setting.
There are certain criterions 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 800x600.
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.
Common browsers used today are Internet Explorer, Mozilla Firefox, Opera, and Chrome. Each browser has a different way of interpreting code to display the webpage and design.
How the design is displayed depends a lot on the real estate available on the browser. To ensure that the design does not stretch on different browsers, use
a 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.
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 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 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.
Taking a little care that the website being designed uses search engine friendly web development allows the site to be reachable by search engines and will make a difference to the numbers that a website can reach. Following search engine design guidelines that keep the site on the right side of search engines will help in getting better search engine placement and better returns.