Interface design

Multimedia and Web

Call For Résumés 

Blue Archer—Pittsburgh’s one-stop-shop for web design, web development, and web marketing—is currently accepting résumés. As of right now, there are no current jobs available; however, Blue Archer is looking to expand their company in the near future. If you are interested in becoming a member of our team, please provide a résumé and cover letter to Jenny Liu. Please note that in order for your résumé submission to be accepted, you must include a cover letter. In the cover letter, please include what kind of position you would like to have as well as an explanation of why you would like to work for Blue Archer.  Résumés can be submitted to Jenny during class on October 19, 2010. You can also send her your résumés and any questions you may have via email: jliu@bluearcher.com.  Jenny LiuProject Administratorjliu@bluearcher.com412.353.0602 Direct

Today’s Objectives

Review Positioning Review User-Center Design Design/Development processes Layouts

CSS Positioning

Review

Positioning

Four types of positioning:Absolute RelativeFixedStatic

Absolute Positioning

Move out of the normal flow of the page as determined by the HTML.

AP placed relative to the boundaries of closest positioned ancestor.

Absolute Positioning

Tag positioned relative to browser if it has absolute position and is not inside any other tag with absolute, relative, or fixed positioning.

Tag positioned relative to edges of another element if it’s inside another tag with absolute, relative, or fixed positioning.

Setting Positioning Values

Position element from the top and left edges of window:

#banner { position: absolute;

left: 100px;

top: 50px;

width: 760px;}

Relative positioning

Relative. Element placed relative to its current position in normal document flow.

Other elements do NOT fill in the space left in document flow.

Can create a positioning context for nested tags.

Fixed Positioning

Element is locked into place on the screen.

When scrolling, fixed elements remain in place.

Useful for creating a fixed sidebar.

Static Positioning

Normal positioning method – what an element appears in the normal document flow.

Layouts

Layouts Fixed Width - regardless of browser window’s

width, page content’s width remains the same.

Liquid – layout adjusts to fit the browser’s width.

Elastic. Fixed width with type size flexibility. Define page width using em. An em changes size when browser’s font size changes, page width based on the browser’s base font size.

User Centered Design

Key points

What is User-Centered Design?

Places the person (as opposed to the 'thing') at the center.

Studies human factors (such as perception, memory, learning, problem-solving, etc.) as they impact interactions.

Looks at user actions/activity.

http://www.stcsig.org/usability/topics/articles/ucd%20_web_devel.html

Iterative design process

User Testing

Design

Prototyping

• Involve users throughout the process• Process is highly iterative

The Process

1.Plan/Analysis - Identify needs, establish requirements for the user experience (understand the problem and your users)

2.Design - create alternative designs to meet needs

3.Develop – Building prototypes that can be communicated and assessed

4.Evaluate - throughout process, test what is being built and the user experience

SOURCE: http://www.usability.gov/methods/process.html

www.usability.gov

User-Centered Design Specific Activities:

1. Understand/specify the context of use

2. Specify user and organization requirements

3. Create prototypes

4. Evaluate designs with users against requirements.

(British Standards Institution 1998; Stone, Jarrett, Woodroffe, & Minocha, 2005)

User-Centered Design Major Steps in the process

1. Requirements-definition - client gives developers information about functionality and requirements. (e.g., how many users will buy books versus submit manuscripts)

2. Establish design for the project.

3. Develop prototypes that reflect the emerging design, using the programming language or development environment.

User-Centered Design

Major Steps

4.Submit prototypes to client for feedback and modifications.

5.Revise prototypes to reflect the client’s changes.

6.Repeat steps 3 and 5 for additional part of the system.

Web Site development processesExamples

Development Process(Lynch & Horton)

Site definition and planning Information architecture Site design Site construction Site marketing Track, evaluate, & maintenance

Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/index.html

Plan/Analysis

Design

Develop

Test

Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/7-development-process.html

Development Process

Lynch & Horton

The first step to design web site is to define your goals.

Careful planning and a clear purpose are the keys to success in building web sites, particularly when working with a development team.

Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/index.html

Site Development Process(Lynch & Horton)

Step 1:

Gather development team, analyze needs/goals, and work through development process to refine plans.

Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/index.html

Site Development Process(Lynch & Horton)

Step 2: Create charter/specifications document:

what you intend to do and why, what technology and content, how long will process take, how much you will spend, and how will you assess the results of your efforts.

Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/index.html

Site Development Process(Lynch & Horton)

Charter document is crucial to creating a successful site:

Charter document is blueprint and will help keep project focused on the agreed-on goals and deliverables.

Site Development Process(Lynch & Horton)

Development process

Teague (2009):

1. Plan site

2. Build site

3. Deploy site

4. Iterate the process

Plan site

1. Know the problem and users – critical!!!

2. Make sketches

3. Define site structure –

4. Decide page flowFixed width/fluid heightEtc.

Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly.

Information Architecture

Plan site

3. Make wireframesHelp in planning structure of pagesServe as blueprints for developmentShould include placement and measurement

of elements in pixelsWireframe Example

Plan site

Visual compositions (comps) Convey the visual design It is often useful to make alternative designs Photoshop/Illustrator, etc.

Build

Cutting ChromeUse background imagesTransparent png (Example)CSS spritesPhotoshop/Illustrator, etc.

Build

Prototype | show interactivityDefine markup structureCreate CSS | program

Organize CSS Programming

Deploy

Alpha – site not released Beta – site made available to public – not

promoted.

Iterations

Validator

http://jigsaw.w3.org/css-validator/

  http://validator.w3.org/