Download - Interface design
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: [email protected]. Jenny LiuProject [email protected] Direct
Today’s Objectives
Review Positioning Review User-Center Design Design/Development processes Layouts
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.
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.
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
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.
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)
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