WEB Usability

Users should be considered throughout the website design process. Usability should not be an afterthought. Testing and fixing a website after it has been built is inefficient and unlikely to produce good results. The best approach to take is to incorporate a model of "pervasive usability" into your design and production process.

The benefits of planning usability into your project are:

• Increased end-user satisfaction
• Increased end-user productivity, success, and completion
• Reduced long-term development costs (costs incurred from fixing poorly designed products)
• Reduced training and support costs
• Return business to improve your competitiveness

A Model of "Pervasive Usability" in Website Design

1. Requirements Analysis

• Determine the goals for the website from the perspective of the user and the business.
• Determine the user needs and target usability requirements.
• Evaluate existing versions of the site.
• Perform a competitive analysis.
• Perform user interviews and surveys.

2. Conceptual Design

• Sketch out a site design and architecture at an abstract level.
• Conduct a task analysis to find critical features.

3. Mockups / Prototypes

• Rapidly create visual representations (mockups) or interactive representations (prototypes) of the site.
• Evaluate usability through focus groups, user tests, and walkthroughs.
• Use the evaluation results to create more mockups or improve the prototypes.
• Repeat this process (design iteration) until the design and usability goals are met

4. Production

• Create the final product.
• Evaluate functionality through testing, quality assurance, usability testing, and field testing.
• Use the evaluation results to improve the product.
• Repeat this process (production iteration) until the business goals are met.

5. Launch and Maintenance

• Launch the website.
• Maintain and refine with user feedback.
• Use the feedback to create new requirements, and begin major design improvements (system iteration).

Evaluation occurs at every stage of the process. Similar types of evaluation can occur at different stages of the design process to keep in mind the goals of the project and the users' needs. And if it comes down to a choice, reduce the scope of the project rather than the usability.

CSS

Cascading Style Sheets

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Tutorials, books, mailing lists for users, etc. can be found on the “learning CSS” page. For background information on style sheets, see the Web style sheets page. Discussions about CSS are carried out on the (archived) www-style@w3.org mailing list (and sometimes on the CSS blog) and on comp.infosystems.www.authoring.stylesheets.

WireFrames

Client like this layout.
According to him it is much more clear and simple.

Absolute Skin Care

Need to develop the simple clean site in CSS and XHTML for Absolute Skin Care on behalf of Catchlight Company.

Tasks:

• Research on the existing site.
• Research on variety of layouts
• Write a description of the site in max of 100 words
  
• Design the Layout in Photoshop, Illustrator
• Finally design the site in Dreamweaver.
  

Absolute Skin Care

Liked the Colours, Subtle and Sleek. I think these are dark myself. I think if we can use her existing coffee colours and contrast thaose with a deep red we'd be on the right track


















like the curve pattern here. Persoonally I'm not so sure.
















Liked the bold colours here

















This one also for the simple Clean look. Ultimately, this is what we should be aiming for. Simple and Clean.

















Clean and Simple. My thoughts are that it fits with her colours so that's probably why she chose it.

Class Note

Using CSS and Design
1> Design the layout to fit CSS (cascading style sheets)
2> Div Tags + Drewmweaver
3> one way to lay a page out

Description of the DIV Tag: The

tag in XHTML is a tag that defines logical divisions within the content of a page. What this means is that a

tag defines sections of a Web page to make it easier to manage, style, and manipulate. You can use the

tag when you want to center a block of content or position a content block on the page. The

tag is a very powerful tool for Web developers.

** Screen Resolution of Mac And Pc is different.

HTML

Designing web with style sheet is easy. A blank space with a header and a footer.Navigations down the banner. most important part of the web layout is top left, where usually the logo sits.

Meta taging

The element provides meta-information about your page, such as descriptions and keywords for search engines and refresh rates.