Iconesque web images for best usability

To convey the user important information & action steps we use icons in our design.This makes the application look asthetic & clean.I have collected some of the images from diffrent web applications & websites to give a wonderful insight into the diffrent patterns that can be used in icons.

Shopping cart icons:
These icons are widely used,their presence indicates that the site incorporates e-commerce engine.

Mail icons are used to convey that a mail needs to be sent, inbox, mail this page to friends etc.

These icons are used to indicate that the current page can be printed by clicking the icon, in most of the cases the printable version of the page is printed.

These icons you will find in community sites & blogs.You need to write some comments - these icons are saying to you

In blog sites these icons are common however they are also available in articles & research paper websites.

Mostly arrows are used to put emphasis on a particular section or highlight a point.They are usually used to invoke the user to take action.

The function of bullets is to highlight the important points,steps, parts etc in the applications.

Hope the icons gave you indepth view of how they easily enhance usability in web apps.

Top online retailers "ADD to Cart" action buttons

Have you ever wondered why amazon.com,walmart,big W,Target USA,JC Penny,E-bay are the most visited online retailers.The answer lies in the User experience they provide to the users.The most important section in online retail is making the users click on "Add to Cart" action button & "Check out".If you are able to make the user do this two critical steps easily then your sales will skyrocket.

Therefore the importance of Add to cart buttons becomes more important to accomplish this.The below action buttons i have collected from popular online retailers, hope this will give you a deeper perception on the creativity used in "ADD to cart" action buttons.

Get inspired by the above designs & make a good UX for your online retail users.Please drop an e-mail to me at: smartsanjaykumar@gmail.com if u need any UX clarifications.

How to make quick UX project plan

Making a project plan used to make even experienced people in IT industry a little uncomfortable.However manking the project plan is not so complicated if you focus on the basics of the project elements.The major elements/ingredients of making a good project plan is
Bird eye view of the projects tasks to be carried on diffrent dates
WBS - Work break up structure
Roles & deliverables

First Step: Divide & Conquer strategy, Have a clear picture about the project.Divide the complete project in diffrent phases if possible.Each phase is now broken down into diffrent activities.If it is possible to break activites into sub activities then do so. Now map the complete chunk of phases to the diffrent dates, map the sub sections to the date available for the phases.Dates can clash as multiple phases can be worked upon by diffrent teams or same teams.
Second Step: Now the main works start-WBS work break down structure. The project is already broken down into phases & phases are broken down into activities.Map the activites to its respective number of resources, type of resource, Man days(Efforts in days).The project specific deliverables can also be shown in the same row of each activity to avoid discrepency in the project plan.
After following second step, We can map WBS as shown below.
Third & Final Step: Finally prepare a Team description stating the name, role in the project & the responsiblites for completion of the project.
In this way a UX project plan can be easily made, however it can be used for any project. In case you have any doubts & need clarification please mail me: smartsanjaykumar@gmail.com

UX Capability presentation

How to prepare UX capability presentation for prospective clients?

A good UX capability presentation can make or break a new project & a prospective business partner so all business leaders should know the fine benchmarks for the presentation.The manner in which the slide is organised, the template used,the color scheme used etc should be chosen with care.Never choose the color scheme that may offend the client due to their cultural backgorunds.

First step: Find a suitable theme to be used in the presenatation.If you are using MS word 2007 then you can be a lucky as it asks for themes in the begining & even you can download the themes online when you are going to open a new ppt.Make sure the theme you selected matches the clients business,process,branding,project etc this will engage the client.

Second step: Once the slide theme is selected, work on the master slide.Include the client logo & your company logo on suitable places on the master slide.Include the slide number.The other things that can also go in are copyright information.

Third step: Work on the introduction slide.Mention your company's name in bold,the punch line & the name of the ppt.

Fourth step:Include some funny images & cartoons depecting the importnace of User Expereince.You can also include famous quotes on UX like.Design is not just what it looks like and feels like. Design is how it works
– Steve Jobs

Fifth step:Mention all the services your company offers in UX consulting on a sperate slide.

Sixth step:On a new slide state the services you will provide for the clients industry.In the consequite slides explain each service in detail.

Seventh step:Leverage technology slide, state how your service can help the client to leverage technology.

Eighth step: Schematic diagram of the methodology you follow in UX.Explain the methodolgy in detail.

Ninth step: Schematic diagram of UX models like garret, funnel of UX etc that you follow which will help the client's business.

Tenth step: Include case studies of previous projects with benefits & screen shots followed by way forward.Capability ppt needs a lot of work & care, i have only highlighted the major elements that are usually present in the ppt with there sequence.

In this way you can make a crisp & lucrative UX capability presentation for prospective clients.If you need any help & clarification please mail me: smartsanjaykumar@gmail.com

How to perform Task Analysis?

What is task analysis?
Task analysis is performed for critical tasks that determines the fate of the web application.For example in an Airline website the critical tasks would be
- Search for flights based on price,timings,special offers & destinations.
- Airline ticket buying
- Finding Help & support

Each task is given to users & there behaviour,actions,system responses are evaluated.Mostly the person performing the task analysis accompanies the user while he or she is performing the task.

Design of the task analysis form?
After determining the tasks to be analyzed, a form is prepared to be filled by users who are going to perform tasks.A typical form will have an introduction,description of the tasks to be performed,user form,user notes,user feedback & disclaimer.
Task performance by users.
The users are given the task analyis form, they fill there details & continue with the task assigned.The expert who is perfoming the task analysis accompanies the user & notes down the user actions, the time he took to complete the tasks etc.

Presentation of the analysis.
The task analysis can be presented beautifully in the form of presenation.There are two ways to present it.
Single slide task analysis presentation
Multiple slide task analysis presenation

Single slide task analysis presenation
The complete task analysis is shown in one slide is the ground rule.This type of presentation we go when we are intrested to have a small presentation & the task is not so complicated.The slide will have the followings elements.

User details & background
Name: Sanjay Age:25Gender: male
Education Qualification: B.E
Competency Level: Expert
userOccupation/Work: User Experience Consultant
Objective to visit the site: Book a flight ticket
Problem Faced by Sanjay while performing the task: He did not know that on fare offered dates the tickets are already sold out He is not able to return to the booking page after selecting the seat.He is not able to figure out at what step is he inHe is not sure for which flight the tickets he has chosen for the TO journeyHe is also not sure about the seats for which he has chosen the ticket
Task result: Successful in completing the task There return tickets on the selected dates were sold out so he could not book the ticket.

Step by step description of task perfomed with system responses(In a flow chart)
Step1: User enters the login ID, password in the form & clicks on submit button
System response 1: The personal page is displayed with a welcome message stating the user name.
In this way the whole process is depicted on the single slide.

Multiple slide task analysis presentation
In multiple method screen shots of user steps & system responses are taken. Each screen shot is illustrated with the following details.
Page name: NYSE login page
Click no: 1
Refresh no:1
Activity: User types the URL in the browser ,he is looking for the login section. He easily finds it ,enters his credentials & clicks on Login Button.
System response: The page refreshes & the user is taken to the user home page.
Observation: User is interested to view the dividends on the home page.
Last but not the least
Finally in the end summary of observations & recommendations to improve the task will follow as shown below.

Observations & recommendations
1.It took 4 clicks for the user to accomplish his task.
2.Select period scroll bar is an intuitive feature in the application.
3.The Information Architecture of the application is user friendly so User does not face any major problem in completing his task.
4.Visual graphs to display the dividends data helps User to easily analyze the data & make decisions.

In this way Task analysis is performed.In case any clarifications & help please e-mail me: smartsanjaykumar@gmail.com

UX Resources that consultants hide from common people

The resources that are highlighted below are used by most of the UX consultants in making stunning application that amazes you.Let us have a look at each one of it in some depth.Even you can try some of them free of cost.

Card Sorting tool —> http://www.optimalsort.com
Ever you got intrested to decide Information Architecture of an application.You can easily perform card sorting using Optimal sort.The website allows you to make a free account & perform online card sorting.

Eye tracking stimulator —> http://about.stompernet.com/scrutinizer
The Scrutinizer is a web browser, based upon the Adobe AIR toolkit and the WebKit browser, that offers a simulation of the human visual system. Using this simulation, you can get a better idea of how users interact with your site design.The Scrutinizer browser applies a visual filter to where the mouse is located, simulating foveal vision centered around the mouse.The parts away from the mouse will be deteriorated into lower resolution, both in detail and color.

Keyword suggestion tool —> http://freekeywords.wordtracker.com/keyword-suggestion-tool.html
Keywords are most important to make the site search engine friendly.Reseach shows that 60% of the users reach the websites by search engines, this makes the Keywords to be used on the webpages more important. Use the keyword suggestion tool to make your web pages search engine friendly.

Page ranking checking tool —> http://www.prcheckingtool.com/
This tool will check 30 different Google data centers and generate Google Pagerank (PR) for your website. This is also a good tool to try an predict your future pagerank as some data centers may display your PR sooner than the real toolbar

Website task management tool —> http://www.taskee.com
Taskee is a hosted website task management tool for small and medium size webdesign companies. Taskee simplifies website task management communication process and makes it easier and cheaper to collaborate during website testing process.

Visitor heat map tool —> http://crazyegg.com/
This is a wonderful tool, it makes you aware what the users are doing on your website.It generates Heat map about the user actions on your webpages.The mouse clicks on the webpages are shown as heat maps.The analysis can go deeper than this based on Search Terms, Operating System, Browser, etc…etc.Have a look at it, it's amazing.

Webrecorder tool —> http://www.dejaclick.com/
Web recorder is a free utility designed exclusively for Firefox. It helps you to bookmark multi-step recording.You can download it for free.

Mouse gesture tool —> http://www.gmdw.com/capstone/
This is a great effort from Sameul Goldwyn in using mouse as a usability testing tool.The mouse is like a fingerprint that shows the user's most intrested content on the web page.

Web accessibility check —> http://www.accesskeys.org/tools/color-contrast.html
AccessColor tests the color contrast and color brightness between the foreground and background of all elements in the DOM to make sure that the contrast is high enough for people with visual impairments. The accessibility of the pages can be checked by entering the url of pages.

W3C markup validation check —> http://validator.w3.org/
This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. If you wish to validate specific content such as RSS/Atom feeds or CSS stylesheets, MobileOK content, or to find broken links, there are other validators and tools available.

Font collections —> http://www.dafont.com/
A good collection of fonts.

Most of the tools stated above give you a free account to try & even let you work on small projects.In case you need any clarifications mail me to : smartsanjaykumar@gmail.com

UX Architect's suggested CSS solutions

CSS is a great technology to seperate the information from the design/layout of the pages.Today most of the complex web applications use this technology to the fullest.Now let me show some of the CSS techniques that you as an UX arcitect can suggest to your development teams.

                            XHTML & CSS Templates for you

                            As a web developer or a UX Architect we need not always work from ground zero to come up with nice css layouts & designs.There are handsome amount of resources already made by exceptional developers.Which can be effectively used in your designs.Here are a few of them.
                            XHTML & CSS Templates
                            • Open source template some impressive templates
                            • Maxdesign great collections
                            • CSS play see it
                            • Changingman a liquid three column CSS layout with a fixed positioned and width centre column, released under a Creative Commons Attribution 2.0 license.
                            • CSS designs for you Free website templates built using table less XHTML and CSS
                            • 3 column layouts A set of three column layouts to be used
                            • Yahoo grid css The foundational GUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.
                            • 6 shooter media collection of a variety of templates
                            • Mollio is a simple set of html/css templates
                            • Open source web templates The basic idea behind open source is very simple: When programmers can read, redistribute, and modify the source code for a piece of software, the software evolves. It is a great collection - I recommend to use some of them
                            • CSS page layouts - divide the page into different stunning sections using the source code

                            • CSS library - a complete collection of frame library.Form CSS, image CSS & DIVs + containers... many more
                            • x-designs good collection of templates
                            • sucking code - its a great gallery of templates that can be downloaded well for use
                            • box collections - use simple technique to make stunning frame sets on pages
                            • layout gala - a professional resource for other professionals
                            • Solucija a good collection of templates
                            • Jimmy These templates are 100% valid CSS/XHTML and compatible with IE5.0+, FireFox 1.5, Opera 8.5, and Safari 2. They do not use any hacks of any kind, and can easily be modified.
                            • Open source web design nice works of css templates

                            If you need any help or guidance drop a mail to: smartsanjaykumar@gmail.com

                            All the above resources can be easily used by developers & UX architects to have a great professional look to there designs.

                            Online retail today & User Experience(UX)

                            As web2.0 has come up & grown with ajaxifican of web applications + much more, we can say online retail now, has to abide the fundamentals of User experience.Businesses now can not neglect user experience in online retail.Let me take you to a quick facts & figures.
                            What is wrong with e-commerce experience today?
                            The online user has to suffer by-
                            >> Badly designed web sites
                            >> Web sites that don’t function properly
                            >> Insufficient and/or out-of-date information
                            >> Companies that are trying to hide
                            >> Badly designed or non-existent processes
                            >> Bad task flows & unnesesary workflows

                            What does online retail customers expect now?

                            Customers expectations have skyrocketed now in online retail & businesses who are not able to cater their needs are slowly moving out of business.

                            1. Fully functional websites with up to date content
                            2. Web sites designed to address the needs of users
                            3. Easy search of products & information
                            4. Clear explanation of can do & can't do tasks on the site
                            5. A coherent user experience

                            Recommendations for online retail business

                            1. Use scenario design and personas to optimize the effectiveness of your online presence
                            2. Make only promises that you can keep
                            3. Competetive pricing & search
                            4. Use RIA rich internet applications to improve user experience
                            5. Prompt customer service & resolutions
                            6. Community building efforts
                            7. Marketing & promotions by intutive channels like viral videos, CPC-cost per click,link exchange,google ads etc
                            8. Easy task flows & work flows
                            9. Security of user information shown upfront
                            10. Accessible websites
                            11. SEO - make the site search engine optimized as research shows - 65% of users reach sites through search engines.
                            12. Proper branding focus - try to build a online brand for unique quality & service

                            In this way we can say that online retail is moving faster than expected long back.Need is to take this as an opportunity for making great User Experience applications.

                            How to conduct In person sessions for making branding choices?

                            The branding choices is made by conducting in person sessions with targeted users & asking then revealing questions.Asking right questions will give perfect answers leading to exact mindset of users reflecting branding choices.In general users are provided with VSD(visual designs) of the diffrent branding,then in person sessions are conducted.Let us see how we can go forward.

                            Step one: Define goal & objectives of the session
                            >> Goal - evaluate users perception about the brand,select one of the vsd to be taken forward for the final design.Gather brand requirements from users needs.
                            >> Objectives - find brand first impressions & which key attributes lead to most positive & negative impressions.
                            - Assess users first impressions of the brand
                            - Assess users perceptions of most valuable & least valuable things in branding
                            - Asses users reactions towards the site in terms of trust,credibility & fulfilling objectivity
                            - Assess users first impressions of the design
                            - Assess users reaction to unwanted stuff in the design
                            - Assess users branding vsd prefrences

                            Step two: Methods to use
                            Define personas

                            Age: 25+Ethnicity: cross section representative of INDIA
                            Average Income: Rs.15000/
                            Have visited a home finance site in the past 12 monthsTransact financial services online
                            Screen at least 10 users form the targeted users.It will be appropriate if users are form the same geographical area for which branding is focused.Conduct face to face sessions seperately with the users.Time for one face to face session should be around 30min.

                            Step three: First impressions
                            >> What were participant's first impression.From the face to face sessions pull out the first impressions.

                            Step four: Prefrenceswhich is the selected Branding vsd.
                            >> The vsd which were chosen by most of the users will win here, highlight why users rejected the vsd & why they favoured the selected vsd.

                            Step five: Most value
                            >> What did participants percieve most value to them like the and,layout,colors used,emphasis on some features or any content topics.

                            Step six: Least value
                            >> What is least value to participants.

                            Step seven: Trust
                            >> Did they feel that they can trust the brand?Why or why not?

                            Step eight: Credibility
                            >> Did the branding seems credible?Why or why not?

                            Step nine: Objectivity
                            >> Did the branding seems objective in addresing the purpose of design.Why or why not?

                            Step ten: Reaction to unwanted stuff
                            >> What were the participants reactions to unwanted sections on the application.Did they prefer to have something that is not present in the current design.

                            Step eleven: Branding location
                            >> Which area of the design participants prefer to be used for branding.Did they prefer the top leftmost corner or top rightmost corner,or even bottom in some exceptional cases.

                            Step twelve: Important participant quotes
                            >> Highlight important quotes made by participants in there own words.

                            In this way we can select the vsd that will be used for the final branding.The above questions will defenitely help to come up with branding solutions.

                            Brand creation tips

                            I am looking on google webpages, yahoo web pages and one thought strikes me. These pages are designed by some designers at the end of the day. Their designs have created a brand. Friendfeed has also become a great success slowly. Is there magic in the hands of all the designers who design these applications. What extra they do which helps the application perform so well. Let us try to digg into this topic and get some answers.
                            I think they follow the below strategy and create brands. Based on my work experience, i can say i got a good value by doing the following things.

                            Try them and if it helps, this blog has served the purpose
                            1. Who is the user - Enquiring about the end user is most important, it is even more important than the application and the stakeholders.

                            2. Who are the stakeholders - Who are they and what are they trying to achieve in the limited time,money and resources. If you start thinking like a CEO of the stakeholders company you have killed the lion in one shot.

                            3.What is the business problem - Understand the business problem as if it is your problem. Ask intelligent questions to understand the problem scope.

                            4.Sleep - Suggest some initial solutions to yourself, if in a meeting room to the stakeholders and the team, and get their feedback on the same. If you are alone, call an old Friend and ask him for suggestions, you can even drop a call to you grand mother and see what she says. The idea is to get some initial feedback on the way you are proceeding to solve the business problem. Now sleep with the problem for 2-3 days and you will get some solutions.

                            5.Sketch it up - Sketch the business scenarios on a piece of paper, in short sketch your whole thought process.

                            6.Information Architecture - Jot down the content inventory and finally the information architecture, IA gives you a deep level thoughts at what level you are trying to solve the problem, is the screen coming at the level one or level two.

                            7.Prototype - Make some paper prototypes at a very high level, count the number of clicks the user is taking to achieve his tasks.

                            8.Test- Test the paper prototypes and if time permits make the visio or ppt prototypes and test it.

                            9.Visual design - If it works fine, give the design more realistic look by appropriate visual design.

                            10.User - At all points keep the user in mind, the stakeholder in mind and the business goal.

                            The above flow has helped me a lot in designing great apps, let's see how it helps you.

                            Where to apply web analytics effectively?

                            Web analytics defined
                            Web analytics refers to the collection, analysis and reporting of Web site usage byvisitors. The information helps site managers better understand the effectivenessof their online initiatives and helps them optimize their Web site.
                            While traditional Web analytics have concentrated their analysis on clickstream behavior of users — page by page or sequential navigation of Website visitors. These type of anlaysis leads to a huge raw data to be assimiliated & analyzed so now technocrats are focussing on business reporting. Examples of such reports include marketing campaign analysis, ROI measurement,process analysis and more.
                            Four site types where webanalytics can be effectively applied.
                            Usually the below four site types can be used for generation of webanalytics business reporting.
                            1. e-commerce: These sites are used to sell products online through online e-commerce engine.Example of such sites include amazon.com, walmart, target.com etc.The deceding factor in these sites is number of sales comleted sucessfully.
                            2. Lead generation: These sites are used to capture the contact details of customers so they can be followed by the sales force team for selling.Example of such sites include sun life insurance,new your life etc.The deciding criteria for these sites are lead capture & form submits.
                            3. Content site: These site are based on the advertising business model.Some of the sites doing well in this area are bbc news, fox entertainment, msn etc. The sucess of these sites rely on the returning visits made by the users.The goal is to keep the visitors comming back so they need to refresh the content @ appropriate rates for the site to be successful.
                            4. Support or self service: These sites are developed to reduce the loading & cut costs in terms of customer service representatives. These sites provides customers with the ability to find answers to their products queries.The success of these sites depend on providing answers for product queries.

                            Webanalytics adoption curve

                            Content or media sites enjoy the highest adoption level because many vendors have been able to provide specific metrics to them early on. Curve portrayed by Geoffrey Moore’s "Crossing the Chasm." notice that the content sites enjoy the highest adoption of Web analytics, followed
                            by commerce, lead generation and self service models.

                            Upfront count. Why?

                            We have seen numbers help users to take critical decisions and have an overview where they are headed and how they are interacting with the application.

                            Let me illustrate it by examples, in any e-mail client, in the navigation area, we display the number of messages sent, draft and available in the inbox. These numbers help the users to be aware about different sections of the application without being overwhelmed what number of e-mails are present.

                            hyenalabs-upfront count


                            In the above illustration the number “6623” helps the user know that 6623 number of e-mails are present in the inbox, taking the same rule user knows that 49 drafts are available.

                            Linkedin needs improvement

                            Linkedin has used this strategy to its benefit in the top level of the information cycle effectively. For example it tells the number of e-mail is 2 – but i don’t think this is right,


                            A question – is this number 2 indicates the total number of e-mail present or new messages received. This the user will know when he becomes a regular user of liked in. For the record 2 shows the new messages received whom you have not read.

                            e-mail notification

                            Linked in should also include numbers in “Requests to join”. this will let the user know that some requests are pending that he needs to approve.

                            linked requests

                            SHOULD WE USE THIS ONLY IN E-MAIL SECTIONS ?

                            I suggest no, we should extend this to other parts of the application, where there is a need.

                            When to use this?

                            We should use this when the below 3 conditions are present.

                            1. Number – the number which will be displayed should be countable and should represent a quantity, i.a number of friendship requests, drafts etc

                            2. Decisive – user should be able to make a good decision based on the numbers displayed.

                            3. Need – The user need should be there to display the numbers.


                            Let us see some good examples



                            Use this feature in the application in your designs and you can make the user’s life easy.

                            Need more suggestions or help regarding similar areas please contact smartsanjaykumar@gmail.com

                            How to perform site evaluation based on industry trends?

                            To perform site evaluation based on industry trends is a tough cup of coffe.Performing Heuristics evaluation is much easier as compared to this.The reason being from industry to industry the evaluation parameter will vary.In an entertainment site Bread crumbs may not matter as compared to the real estate it occupies on the web page.The stakeholder's may want their users to go round the site without any bread crumb aids to explore more.Let me show you the steps we can follow to come up with a good site evaluation based on industry trends.

                            First step: Research on Website industry positioning
                            This research can be carried in the below manner.

                            1. Client e-mail tracing: Read through the finer lines in e-mails send from the client, they mostly specifiy the industry sector in which they are positioned.Go through the meeting notes even to find out more, even you can schedule clinet calls to know exact details about the industry positioning of client business website.
                            2. Online research - Forrester: Find out the latest industry trends that are affecting the website.What are the most important parameters that will affect the user experience on the site.Which features are most liked in the web application.If you can get Forrester account then your life will become easy in this respect else you have to do some searching in google.What makes the user experience good is important.
                            3. Stream line Compitetive focus: Have a look at competetior's website, find out what are the best they are doing, the worst things they are doing etc.Try to formulate parameters & best practices by looking at the compitetion.Go through the client website also to have a good understanding about it also.

                            Second step: Finalize parameters

                            Collate the information from the above & ideate with the team to finalize the parameters.Once the parameters are done we can move on with the site evaluation.

                            Third step: Evaluate the website

                            Note : The biggest trick in site evaluation is that avoid taking a parameter first & try to find out issues related to that.Mostly if you do in this way you restrict your mind to see multiple issues on the website.My experience says "find out issues in the website & then classify it under suitable heads."

                            Fourth step: Evaluation presentation

                            We can either go for using word doc or presentation to present the evaluation.

                            Important tip: When we present the information in word doc, the biggest problem will be positoning the screen shots consistently.We can do this by placing the screen shots in tables & finally hiding the table borders.

                            In this way we perform site evaluations based on industry trends.In case you need any help & clarifications please mail me: smartsanjaykumar@gmail.com

                            Read more User Experience practices on my other write ups:


                            How to create StyleGuide for websites?

                            Creating a styleguide for a website?This situation can come in any UX project so let me help you how to become prepared for the same.A styleguide is the GEETA that is used by developers & visual designers to design webpages.Generally a styleguide will have the below sections.

                            1. Stylesheets: Explain all the CSS that will be used in developing the website.If possible provide the file location of the stylesheets or even the files in the stylesheet document in the appendix if possible.

                            2. Logos: Include all the logos that will be used in the website.Provide the actual dimensions in pixels.The position of the logos should be specified in detail.If any writing is done on the logo specify the color of the text in Hex.Last but not least provide the logos file location & the format in which it need to be used i.e gif,png,jpeg etc.

                            3. Color to use: The color to be used in the website should be specified in Hex, with a shade card view.The colors used for Text,Layout,Body,navigational links,column lines etc should be presented seperately.

                            4. Templates to use:In case pre defiend tempaltes are present to be used for home page, login page, information page etc... provide template file locations also.

                            1. 5. Home page presentation: Include the mission of the home page in short with the complete look & feel of the page.The look & feel will specify resolution in which the page can be best viewed.The page background has to be specified here.Home page- how it looks when the page is resized is also important.

                            6. Individual page style needs: Divide each page into prominent elements & sections first.Now describe each element with all the look & feel requirements.This section will be the most important as it is very specific to diffrent sections on the page.Include the style, width, images used & color of each elements.

                            7. Extra elements in the website: Focus on the additional elements present with the description of the elements.

                            8. Images & VSD: Feel free to include images & VSD in the above sections to make the styleguide descriptive & helpful for the development team.

                            In this way we can easily prepare a styleguide for a website, the same can be also done for software system however with complete focus on the software elements.

                            If you need any help & clarifications please mail me: smartsanjaykumar@gmail.com

                            Read more about User Experience on my other write ups: