Plan

• Exercise week 40 presentation
• Scope and Structure
• Implementing a Wireframe with HTML and CSS

Pensum:

Elements of User experience Chapter 4-6

Sexy Webdesign chapter 2,3,4

Exercise for week 40.

DK project report (Danish students)

Redesign (website)

 

Int project report (International students)

Redesign (website)

Read the following multimedia designer (first year projects).

• Describe how the report works with the strategy and research plan?
• What is the Strength and weaknesses of the research related to site objectives and user needs?
• What do you think about the overall report and redesign?

Present your thougths to the research for to the class.

Scope and Structure

• Requirement specification
  • Functionality
  • Content
  • Mood, Look and Feel

The Requrement specification

Describe: “What are we going to make?” / Hvad er det mere præcist vi skal lave?

Reason:

So You/the team/the client Know What You’re Building!
So You/the team/the client Know What You’re not Building!

 

Gathering requirements (Hvordan finder vi frem til mere specifikke krav til produktet?)

• Specification based on :
  • Clients needs. Priority of requirements
  • Strategic gools/ Objectives for the websitet.
    
  • The persona's needs and behavior.
  • Feedback on the prototypes.
• With userscenarios, use cases
  • Video scenario
  • Storyboard/cartoon

 

Structure of a requirement specification (spec.) could be:

• Indhold: Content requirements (central text elements, image types/format, video etc. )
  
• Funktionalitet: Functionality requirements (Navigation, Forms, Validering, features.....)
• Teknisk:Technical requirements (Browser version, HTML standards, Screen Resolution)
• Look and feel: Mood,message, usability, ref. to design manual

Genetic rules for a good requirement specification:

• Be specific
• Avoid subjective language ( krav skal kunne testes, verification )
• Prioritize the requirements (e.g. high=must have , low= wish to have)
• Each requirement should have a unique id.

Exercise:How is the requirement specification in the MDU reports?

Structure plan

• Interaction Design (Scenario, Use cases for user tasks )
• Informationsarchitecture (Intuitive access to information :Card sorting, Sitemap, mindmap )
• Modelling (sitemap, sequence diagrams etc.)

Exercise: Make a sitemap for a default portfolio website. You can e.g. use www.writemaps.com

The skeleton Plan

• Interface design (facilitate user interaction with functionality)
• Navigation design (facilitate user's movement through the information architecture) - Chapter 4 in Sexy Webdesign
• Wireframes (modelling layout)

The webpage of the wireframe above.

Exercise: Make some wireframes of the 2 webpages that you like.

• Use paper and pencil like on page 54.
• Or make a screen dump of the page and open it in an drawing application like Photoshop, CoralDraw, Fireworks or Paint.
  • Draw a wireframes on the screen dump (if possible in a seperate layer)
  • Write some meta text about the wireframe (screen resolution, size of elements in pixel, dynamic elements, navigation etc.)

 Implementing a Two-column layout example

Very short intro to HTML and CSS

http://www.html.net/

Page with No Layout 

1. With a Fixed centered layout = "Ice cube " = using a fixed width wrapper

width:800px;

}

2. With a Floating Layout with Absolute and Fixed elements

Floated = Liqued layout adjust to the size of the Browserwindow.

#award {    

#coupon {

left:-90px;
position:fixed;
top:300px;

}

The three column layout

Exercise: Tutorial two column layout

James James Garrett model