L: 22/02/2021
Master in Informatics and Computing Engineering
Database and Web Applications Laboratory
Instance: 2020/21
—
Lecture #2 (part 1) :: 17/02/2021
Goals
By the end of this class, the student should be able to:
Understand the concept of User-Centered Design in Interaction Design.
Describe each stage of Interaction Design Process.
Understand how and when to use Design Patterns.
Learn best practices in Interaction Design.
Content
What is Interaction Design?
Interaction Design Process
User Centred Design
IxD, UX and UI
Interaction Design Dimensions
Mental Models
Interaction Design Principles
User Interface Elements
Design Patterns
What do Interaction Designers Do?
Wireflows
Bibliography
Dix, A., Finlay, J., Abowd, G. D., & Beale, R. (2004). Human–Computer Interaction, Third Edition. Pearson.
Cooper, A., Reimann, R., Cronin, D., & Cooper, A. (2007). About face 3: The essentials of interaction design. Indianapolis, In: Wiley Pub.
Preece, J., Rogers, Y., & Sharp, H. (2015). Interaction Design: Beyond Human-Computer Interaction, Fourth edition. John Wiley & Sons, Ltd.
Kalbach, J. (2007). Designing Web Navigation. Sebastopol, CA: O’Reilly Media, Inc.
Saffer, D. (2010). Designing for Interaction — Creating Innovative Applications and Devices. Berkeley, CA: New Riders.
Morville, P., Rosenfeld, L., Arango, J. (2015). Information Architecture: For the Web and Beyond, 4th Edition, O'Reilly Media.
Moggridge, B., & Atkinson, B. (2007). Designing interactions. Cambridge, Massachusetts: MIT Press.
Tidwell, J. (2005). Designing Interfaces, Second Edition, O'Reilly Media.
Materials
-
-
-
-
-
-
-
UI Patterns,
UI Patterns, last accessed in February 2021
Martijn van Welie
wellie.com, last accessed in February 2021
Lecture #2 (part 2) :: 24/02/2021
Goals
By the end of this class, the student should be able to:
Understand the fundamentals of visual design and the intrinsic complexities of designing interactive systems.
Understand the impact of visual design on usability and readability.
Identify common mistakes and pitfalls of visual design, specifically on the web.
Content
The importance of visual communication on the Web
Impact of the visual communication on usability and legibility
Introduction to elements of visual communication
Introduction to principles of visual communication
Proximity
Similarity
Continuity
Closure
Visual Flow
Constrast
Hierarchy
Bibliography
Lupton, E., & Phillips, J. C. (2008). Graphic Design The New Basics (Second Edi). New York: Princeton Architectural
Lupton, E. (2014). Type on screen. (Ellen Lupton, Ed.). A Design Handbook.
Maria, J. S. (2014). On Web Typography. New York: A Book Apart.
Samara, T. (2007). Design Elements: A Graphic Style Manual. Rockport Publishers, Inc.
Sherin, A. (2012). Design Elements: Color Fundamentals. Rockport Publishers.
Stein, B. (2017). Webfont Handbook. New York: A Book Apart.
White, A. (2011). The Elements of Graphic Design (Second Edi). New York: Allworth Press.
Materials
Summary
An introduction to Interaction Design, by Andreia Pinto de Sousa. Principles, Patterns, and Usability.
Introduction to the elements and principles of Visual Communication Design, by Andreia Pinto de Sousa.
— LBAW, 2020/21
« Previous | Index | Next »