Transcript Site Development Process

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:
[email protected].
Jenny Liu
Project Administrator
[email protected]
412.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
 Relative
 Fixed
 Static
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
Design
• Involve users throughout the process
• Process is highly iterative
User Testing
Prototyping
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
www.usability.gov
SOURCE: http://www.usability.gov/methods/process.html
User-Centered Design

Specific Activities:
Understand/specify the context of use
2. Specify user and organization requirements
3. Create prototypes
4. Evaluate designs with users against
requirements.
1.
(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
processes
Examples
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
Development
Process
Lynch & Horton
Source: Lynch & Horton,
http://webstyleguide.com/wsg3/1-process/7-development-process.html
Site 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 agreedon goals and deliverables.
Development process
Teague (2009):
1. Plan site
2. Build site
3. Deploy site
4. Iterate the process
Plan site
1.
2.
3.
4.
Know the problem and users – critical!!!
Make sketches
Define site structure –
Decide page flow
 Fixed
width/fluid height
 Etc.
Information Architecture
Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly.
Plan site
3. Make wireframes
 Help
in planning structure of pages
 Serve as blueprints for development
 Should include placement and measurement
of elements in pixels
 Wireframe Example
Plan site

Visual compositions (comps)
Convey the visual design
 It is often useful to make alternative designs
 Photoshop/Illustrator, etc.

Build

Cutting Chrome
 Use
background images
 Transparent png (Example)
 CSS sprites
 Photoshop/Illustrator, etc.
Build

Prototype | show interactivity
 Define
markup structure
 Create 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/