1 / 36

Interface design

Interface design. Multimedia and Web. Call For Résumés

logan-hansen
Download Presentation

Interface design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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 Design • Involve users throughout the process • Process is highly iterative User Testing Prototyping

  17. The Process • Plan/Analysis - Identify needs, establish requirements for the user experience (understand the problem and your users) • Design - create alternative designs to meet needs • Develop – Building prototypes that can be communicated and assessed • Evaluate - throughout process, test what is being built and the user experience

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

  19. User-Centered Design • Specific Activities: • Understand/specify the context of use • Specify user and organization requirements • Create prototypes • Evaluate designs with users against requirements. (British Standards Institution 1998; Stone, Jarrett, Woodroffe, & Minocha, 2005)

  20. User-Centered Design • Major Steps in the process • Requirements-definition - client gives developers information about functionality and requirements. • (e.g., how many users will buy books versus submit manuscripts) • Establish design for the project. • Develop prototypes that reflect the emerging design, using the programming language or development environment.

  21. User-Centered Design • Major Steps • Submit prototypes to client for feedback and modifications. • Revise prototypes to reflect the client’s changes. • Repeat steps 3 and 5 for additional part of the system.

  22. Web Site development processes Examples

  23. Development Process(Lynch & Horton) Plan/Analysis Design Develop Test Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/index.html Site definition and planning Information architecture Site design Site construction Site marketing Track, evaluate, & maintenance

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

  25. Site Development Process(Lynch & Horton) Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/index.html 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.

  26. Site Development Process(Lynch & Horton) Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/index.html Step 1: Gather development team, analyze needs/goals, and work through development process to refine plans.

  27. Site Development Process(Lynch & Horton) Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/index.html 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.

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

  29. Development process Teague (2009): Plan site Build site Deploy site Iterate the process

  30. Plan site Information Architecture • Know the problem and users – critical!!! • Make sketches • Define site structure – • Decide page flow • Fixed width/fluid height • Etc. Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly.

  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

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

More Related