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, You can also send her your résumés and any questions you may have via Jenny Liu Project Administrator 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

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.

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:

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 processes Examples

Development Process (Lynch & Horton) Site definition and planning Information architecture Site design Site construction Site marketing Track, evaluate, & maintenance Source: Lynch & Horton, Plan/Analysis Design Develop Test

Source: Lynch & Horton, 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, Site Development Process (Lynch & Horton)

Step 1: Gather development team, analyze needs/goals, and work through development process to refine plans. Source: Lynch & Horton, 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, 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 flow  Fixed width/fluid height  Etc. Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly. Information Architecture

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 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)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