THINGS TO KEEP IN MIND WHILE DESIGNING WEBSITE UI

THINGS TO KEEP IN MIND WHILE DESIGNING WEBSITE UI

Tweet

As I had promised in my previous post to write on the basic things of web designing, here is an article that focuses on the basic aspects to keep in mind while designing a website. They say, if you're a salesman, then its not the product or the service, but rather, its the customer whose of prime importance to you, as he is the person to whom the stuff is targeted. In web designing as well, the case is somewhat the same. You need to customize the website according to the audience intended. Hence instead of directly designing a website in an ad hoc manner, I recommend that you try to perform a case study of your audience.

Before we commence with the topic, I expect you to have some basic knowledge of HTML (HyperText Markup Language), CSS (Cascading Style Sheet) and Javascript. HTML forms the basic framework of your website, CSS serves the styling part of the page and finally, Javascript adds to the user interaction part of the page. If you really have some apprehensions regarding where to learn these scripts and languages then my article on Best Online Web Designing Tutorials may be a help. Make sure you check it out for one out of the best solutions.

There are certain basic ingredients of a good website that people generally tend to miss as they fail to analyse the facts governing the significance of those features. Let us that a step-by-step walk through of all the basic needs of a good website. Here ,even though all these concepts apply throughout the web designing hierarchy, but I basically mean a blog page by referring to the word "webpage" here.

COLOR COMBINATIONS OF WEBPAGE

 Color used to define a webpage is of prime importance from a web designer's perspective. The colors used to define your website provide a pictorial storyboard to your webpage. Say, if you want to design a website that preaches about yoga and meditation you would rather go for a soothing and calm color such as a sky blue or a lighter shade of olive green as the website is intended to invite the visitors seeking peace and relaxation.

On the other hand, if you're designing a website that is hosting a rock band then you may go for vivid grayscale colors and even somewhat intermediate to dark shades of red, blue and green.

Always make sure that the color combinations of the foreground and the background don't contrast each other way too much to pinch the optic nerves of the visitor. At the same time, try to ensure that the foreground color doesn't get merged with the background color due to lack of contrast.

FONT STYLE, COLOR AND SIZES

If you're a blogger, then this point needs to be of prime consideration for you. In any website that hosts a lot of written content such as blogs, fonts play a vital role in deciding the quality and looks of the page. Again, the same old adage of the customer-salesman comes into play.

Try to decide your font according to your intended audience. If you are designing a website that tends to invite old aged people, say a religion or a charity website, then keep the font size somewhere between 25 to 40 points, so that it is clearly visible to everyone coming up to the site.

On the other hand, if the website is intended for the young generation, say a dating and social networking website, then a font size ranging between 12-18 points might play the trick.

Don't forget to check the match of color of fonts with your website template. If you do, you loose the score. Always try to keep your visitor at the greatest level of sophistication. Try to use a font style that is both inviting and interesting. For example, if you are hosting a typographical art based website, the you can go for something ranging between bold fonts such as Helvetica (Typographers' favorite) to cursive fonts such as Commercial Script. Try to keep the font of the page content text as simple and easily readable as possible. Fonts such as Georgia, Trebuchet MS and Calibri might work good for such usage.

PAGE HEADER AND FOOTER

Header is the topmost part of the website's template and is kept constant throughout the website. It generally includes the name and description of your webpage mostly followed by a website menubar. It represents the brandmark of the organization. If you are some company, then it must possess your logo.

Always remember- "The first impression is the last impression." Header is the first and the foremost thing one notices as he/she lands upon the website. An attractive header with an impressive brandmark means half the job of fishing your visitor into the net is done. So, try to design the header with utmost clarity of thought and at the same time try to impart elegance and catchiness to it. If feasible, go for a designer or a freelancer to do the favors.

Footer must contain a sitemap with distinctive links or tags to the pages of chief importance. Many successful websites such as Digg, Speckyboy Design Magazine etc. use this style to impart interactivity. Also put up your copyrighting and privacy statements or links in the footer of the website template.

CONTENT SPAN ACROSS THE PAGE

This is a point equally generalised for all website templates. The content of the page should be organized in such a way that the visitor is comfortable reading it. the content must not span across the entire browser window as:

1. It gives an ugly look to the webpage.
2. It is difficult to focus on the complete computer screen at the same time.
3. It is difficult to keep track of the line you're reading to follow up.

At the same time, make sure that the content span is not to narrow to loose the user's attention. If the content span is made equal to the sidebar spans, then the focus of the user (visitor) might frequently shift away from your cotent. In case you're comparing multiple things, then the use of equally sized spans is very mush recommended as it allows the user to simultaneously shift his looks and compare the content of the two columns.

As most of the web users in the current scenario use a screen resolution ranging between 1024 x 768 and 1280 x 1024, a content span of 700 pixels and a sidebar span of 200 pixels including the paddings and margins (900 pixels overall) would serve to be the best solution.

Always remember the three Cs for designing a website-

1. Creativity- How beautifully can you showcase your brand to your audience?
2. Cautiousness- How much do you know the kind and nature of your audience?
3. Clarity- How clearly can you define your objectives to your audience?

When it comes to web designing, the best way to learn and demonstrate is by experimentation. Never try to stick with the conventions. As a bit of an advice, try to innovate because in the field of web designing, it is never the bureaucrat who is a successful presenter. Comments and queries are always welcome. Cheers.