Web design tips for beginners

At the outset we need to remember that Web design is a tricky art which is driven by technology and code. Hence it is splendid mix of creative and the analytical skill sets. To create a visually appealing, functional site which is useful to the end user, all the aspects have to seamlessly blend.

1. A vision for your site and clarity is essential, before going ahead, you should be clear with the “Hows” and “What’s” before getting your hands dirty. A clear vision helps you come up with a rough master plan of how to go about designing your site.

   Understand what is the core purpose, who the actual end users are, what you are trying to accomplish and what message you want to convey to your audience, once you have done this introspection you’ll have a better idea of how to proceed.

   Remember your website is a tool for communicating and sharing ideas in the best possible way with your target audience, try to see if this basic goal has been met.

2. A easy to use navigation is the backbone of any website. The navigation should be straight forward, highly intuitive and prominent. Today most of the sites have a horizontal main navigation bar which is available throught the site in all the pages. Apart from providing a means to move back and forth between sections of the website it also ‘grounds’ the website, hence a great Navigation design is crucial for any site. ‘Bread crumbs‘ which show navigation trails at the top of the page look classy and help the user figure our exactly where he is located, so that he does not get lost in the maze of diverse web pages. It helps the user to quickly retrace his steps in case he wants to go back.

3. Typography deals with font types and sizes. Though there are a plethora of fonts for the print media, however when it comes to the web, we need to design with only a few common fonts found across most computers. Since content is central to a web design, skillfully used fonts, font colors and font sizes result in great readability and account for at least 50% of good web design.

   Try to play with the size and font type of different titles, headings, sub-headings and content to make the content more readable. You can also give similar treatments to certain groups of content or components for easy identification. It’s a simple trick to group sections together and to keep the user focussed on the content.

4. It is best to spend a fair deal of time initiallylooking at related sites and trying to understand what best suites your project. Try to come up with a layout that has the end user and his requirements in mind. It should exactly be mapped to the users needs, tasks that he is generally likely to perform on the site and his expectations from the site. It should be neat, well conceptualized and should put the user at ease.

   Things to avoid are cluttering the layout with too many big images, animations, backgrounds etc. Instead use eye catching icons to attract your users attention to a particular area of the screen. Personally I am all for simple, neat, minimalistic design with a lot of white space and just the bare minimum graphics. Some times designers over emphasise on graphics whereas the general user is more interested in being able to grasp the information, hence graphics shouldonly be used to complement the content, not distract the user.

   It would be a good idea to sketch your draft layout on paper and progressively improve it till you are ready with a clear picture. It is advisable to spend a lot of time and energy on coming up with your layout, as a well conceived layout is always proves to be a time saver down the line.

   Ultimately a site layout should strikes the right balance between aesthetics, functionality and User needs.
   
   (Sample Layout designs of webpages)

5. Colors are always known to affect moods, hence it is important to select your page colors to suit your theme. Its always good to have a Primary color and Secondary colors defined for your site. Even a simple page with ‘just right’ colors creates a memorable and lasting impression on the user. Whereas an incompatible color scheme can make even a great site look gaudy resulting in the user being distracted while using the website.

   Professionals refer the color wheel (shown in the image) and with their understanding of color principles come up with sites that are not just functionally good but fully balanced in color usage. Choosing colors and other design principle is more of an art and can be acquired over a period of time through practise. However one thing is clear that it is of paramount importance which can make or break the user experience.

6. Key to delivering a great user experience is to make your web page come to Life with a host of interactive design elements like Dropdown menus, On mouse over effects, Expand collapse menus, Scroll bars, Accordions etc to name a few. With a great User interaction design plan you can make your site easy to use, quick, and even a fun filled experience to the users.

   Though this might seem daunting to a beginnner, it is quite simple with the plethora of Javascript frameworks available today like Dreamweaver Spry, jQuery, JExt and MooTools etc. The new generation of web sites (Web 2.0 sites) rely on these heavily to enable animations, actions and other types of interactivity.
   Incorporate interactive design thoughtfully in your site, so that users are thoroughly engaged, are able to easily make sense of the information in an easy and funfilled way.
   For an example of a page created using Dreamweaver Spry go our article Dreamweaver Spry page.

7. How many times have you waited in vain for a page to load and then switched to something else. Here are some reasons to create a fast loading page..

   1. Remember that making a user wait for long, will result is loosing a large section of your potential viewers, this is should be strictly avoided.
   2. Lighter fast loading pages are easy for users with slow internet connections to view.
   3. It is also seen that a web page load time is also taken as an aspect of page ranking by Search engine algorithms.

   Here is a list of ways to created a fast loading page..

   1. The first and foremost thing you could do is to remove or minimize Graphics, Flash and scripts as they hugely increase your file size.
   2. Optimize your HTML code, CSS code & script code by taking care to see that there are no extra tags, unnecessary nested tags or unused scripts or scripts with errors.
   3. Try to put scripts at the bottom of the HTML file if possible.
   4. As far as possible stick to a pure CSS tableless design right from the start of your page design. Theadvantage of Div tags over tables is that it results in better load time and you can better manage changes to your layout.
   5. Divs are also more scalable to meet any design change requirements in the future.
   6. On the server side, ASP, PHP and database performance optimization is crucial to a functional and fast loading web site.

   Remember there is nothing more pleasing to a user than a fast loading page, it is like a welcome sign ( or like being on time on your first date) and it always gives a great first impression.
   For a detailed article on creating Fast Loading Page check out our article lorem Creating fast loading pages.

8. Okay, so you’ve launched your site and you have high worth, useful, interesting and unique content. Well does this mean that visitors will start flocking in droves? Well, may be not, the internet is one mammoth reservoir of information that it is worse than finding a needle in a haystack. Hence making your website findable is also an important part of commercial web design, a game which you need to master to show that you exist on the web.

   While it is difficult to describe all the methods for improving Search Engine ranking some of the simplest ways are as follows..

   1. Have important keywords in your title, description, content and alt tags of your web page. This results in higher keyword density on the page and helps in improving your ranking with the search engines.
   2. Also use HTML instead of flash as the present web technology is not fully geared to understand a flash based webpage.
   3. Try to have as many other sites which link to your site, the search engine algorithm interprets this as a sign of a high worth site and gives it a higher page ranking.
   4. Use web site Analytics tools like Google analytics to monitor how your visitors use your site, where they come from and what keywords they type to find your site. The insight that this data can provide will be invaluable in coming up with a properly focussed SEO effort.

   Google at present leads the search engine race, the overall percentile distribution is as below..