J. Correia Lopes

FEUP/DEI & INESC TEC

User Tools

Site Tools


teach:lbaw:lectures:03

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

teach:lbaw:lectures:03 [21/02/2020 14:41] (current)
Sérgio Nunes created
Line 1: Line 1:
 +====== LE03: 28/02/2020 ======
  
 +**Master in Informatics and Computing Engineering\\
 +Database and Web Applications Laboratory\\
 +Instance: 2019/2020**
 +\\
 +---
 +\\
 +
 +====== Lecture #3 :: 28/02/2020 ======
 +
 +===== 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
 +    * Typography
 +    * Color
 +  * 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 =====
 +
 +  * Andreia Pinto de Sousa, //Basics of Visual Design//, {{03-designvisual.pdf|Illustrations presented in class}}, February 2020
 +  * Amy Schade, Yunnuo Cheng, And Samyukta Sherugar [[https://​www.nngroup.com/​articles/​top-10-enduring/​|Top 10 Enduring Web-Design Mistakes]], last accessed in February 2020.
 +  * Jakob Nielsen [[https://​www.nngroup.com/​articles/​top-10-ia-mistakes/​|Top 10 Information Architecture (IA) Mistakes]], last accessed in February 2020.
 +  * Jakob Nielsen [[https://​www.nngroup.com/​articles/​top-10-application-design-mistakes/​|Top 10 Application-Design Mistakes]], last accessed in February 2020.
 +  * Jason Santa Maria, [[https://​alistapart.com/​article/​on-web-typography|On Web Typography]],​ last accessed in February 2020.
 +  * Jeffrey Zeldman [[http://​alistapart.com/​article/​understandingwebdesign|Understanding Web Design]], last accessed in February 2020.
 +  * Melissa Clarkson [[https://​procomm.ieee.org/​elements-of-visual-communication/​|Elements of Visual Communication]],​ last accessed in February 2020.
 +  * Nick Babich, [[https://​www.smashingmagazine.com/​2016/​10/​icons-as-part-of-a-great-user-experience/​|Icons As Part Of A Great User Experience]],​ last accessed in February 2020.
 +  * Aurora Harley, [[https://​www.nngroup.com/​articles/​icon-usability/​|Icon Usability]],​ last accessed in February 2020.
 +
 +===== Summary =====
 +
 +  * Introduction to the elements and principles of Visual Communication Design, by Andreia Pinto de Sousa. ((//​Introdução aos elementos e princípios de Design de Comunicação Visual, por Andreia Pinto de Sousa.//))
 +
 + --- //LBAW, 2019/20//
 +
 +[[02|« Previous]] | [[index|Index]] | [[04|Next »]]
teach/lbaw/lectures/03.txt · Last modified: 21/02/2020 14:41 by Sérgio Nunes