1. Interface design Multimedia and Web

2. 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. jliu@bluearcher.com Jenny Liu Project Administrator jliu@bluearcher.com 412.353.0602 Direct

3. Today’s Objectives Review Positioning Review User-Center Design Design/Development processes Layouts

4. CSS Positioning Review

5. Positioning Four types of positioning:  Absolute  Relative  Fixed  Static

6. 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.

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

8. Setting Positioning Values Position element from the top and left edges of window: #banner {position: absolute; left: 100px; top: 50px; width: 760px;}

9. 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.

10. Fixed Positioning Element is locked into place on the screen. When scrolling, fixed elements remain in place. Useful for creating a fixed sidebar.

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

12. Layouts

13. 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.

14. User Centered Design Key points

15. 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

16. Iterative design process User Testing Design Prototyping Involve users throughout the process Process is highly iterative

17. 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

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

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

20. 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.

21. 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.

22. Web Site development processes Examples

23. 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

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

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

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

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

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

29. Development process Teague (2009): 1. Plan site 2. Build site 3. Deploy site 4. Iterate the process

30. 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

31. 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

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

33. Build Cutting Chrome  Use background images  Transparent png (Example)Example  CSS sprites  Photoshop/Illustrator, etc.

34. Build Prototype | show interactivity  Define markup structure  Create CSS | program Organize CSS Programming

35. Deploy Alpha – site not released Beta – site made available to public – not promoted. Iterations

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