Visual Design for Technology

Syllabus

 COURSE DESCRIPTION

This course is designed to give students an understanding the principles and theory of graphic Design as it applies to technology. When completed, students will be able to brand and flavor websites and applications.  Students will explore the meaning of graphic design, how to identify its application, develop their own creative process, how to be practioner of design including having the appropriate vocabulary, to articulate ideas and concepts in a critique setting, analyze/critique graphic design using sound principles and iterate upon original work to bring it professional standards.

Who could benefit from this course:

If a student is considering

  • becoming a User Experience designer, this course is a must as Visual Design is a core skill in the profession.

  • a career in Information Systems, they will be thinking / designing system requirements and will be helping design the systems.

  • If a student is a Computer Science Major then they will be on the receiving end of the design process and being asked to code what has been designed.

“While great art makes you wonder, great design makes things clear.”

― John Maeda, The Laws of Simplicity

IS627 is a graduate level, three-credit course.  Students do not need to know how to write code and will not be expected to learn code as a requirement for this course. Nice to have skills, but not required include any visual design courses you may have taken along with Intro to User Experience, Research Methods and Information Architecture.

COURSE GOALS

Discovery, development, and strengthening skills required to layouts in a visually appealing way when working with technology.  By the end of this class you will have a basic understanding of design as it applies to technology.

LEARNING OUTCOMES

Students will learn:

  • The value and impact of shape and texture

  • How to apply design theory including gestalt to technology

  • Understand the power and nuance of typography

  • Utilize color theory

  • How to use key tools like Adobe InDesign  and Sketch 3

  • Brainstorm & develop visual design for technology

  • Receive feedback and Iterate accordingly

ACTIVITIES

Time in the classroom will be broken up into small increments with 5 minute breaks in between each increment, this is so that students have time to digest information and not be overwhelmed.  The increments will be the following formats:

  • Lecture & Hands on learning

  • Design Studio (Share and critique sessions)

  • Workshop (In class time for collaboration and exploration)

  • Presentation

Outside of the classroom students will be expected to do the following

  • Reading assignments

  • Spend time collaborating with team members

  • Conducting exercises based on the lessons

  • Brainstorming and developing final project

Course Structure

The course is broken into 4 sections:

  • Graphic Design Principles and Rules ('Whys', not just the 'Hows')

  • Typography

  • Applied Color

  • Tools

Schedule

The following how the semester will unfold, note that the schedule is subject to change:

PREWORK

Homework due first day of class

Read about heuristics, be prepared to discuss: 

WEEK 1

Class Activities

Intro to class:  rules, etc.

Break

Lecture: What is Graphic Design

  • Defined 

  • Areas of graphic design

WEEK 2

Homework due:

Reading 

Applied 

  • As a team, prepare a 5 minute presentation your assigned element 

Class Activities

Discussion: Review homework 

Break

Lecture: Elements 

  • Line

  • Shape 

  • Direction

  • Size

  • Texture

  • Color: Is light reflected off objects

Break

Workshop: 

Create and evaluate elements

WEEK 3

Homework due 

Reading

  • https://www.toptal.com/designers/visual/infographic-gestalt-principles-of-design

Applied

  • Submit finished version of “Create and evaluate elements”

Class Activities

Discussion: Homework 

Break

Lecture: Design Theories

  • Gestalt 

    • Balance, Proximity, Alignment, Repetition, Contrast & Space

Break

Workshop: 

Find websites where you can apply each one the gestalt principles to improve the website experience

WEEK 4

Homework due

Textbook Reading 


Applied 

  • Continued from Workshop.  Find websites where you can apply each one the gestalt principles to improve the website experience, present it as a poster. Submit it as a PDF to blackboard

Class Activities

Discussion: Review homework 

Break 

Lecture: 

  • Defined

  • Axial, Radial, Dilatational, Random, Modular, Transitional, Bilateral

  • Grid method Part 1

Break

Workshop: Using the example invitation given, redesign it twice, apply: 

  • Version 1: Bilateral design

  • Version 2: Dilatational Design

WEEK 5

Homework due 

Textbook Reading 


Applied homework

  • Submit Bilateral & Dilatational Designs in PDF format

Class Activities

Discussion: Review homework

Break

Lecture: Grid Method Part 2

  • History 

  • Defined and why it works

  • How to Apply 

Break

Workshop: Redesign the following webpage using Grid design: http://www.arngren.net/

WEEK 6

Homework due: 

Textbook Reading 


Applied homework

  • Submit website redesign  using Grid Design in PDF format

Class Activities

Discussion: Review homework

Break

Lecture: Typography 

  • Defined 

    • Difference between typeface and font

  • Types

  • Properties

    • Point Size

    • Screen size vs. Print 

    • How age affects size

    • Choosing / combining typefaces

  • Typeface, font, family, character set, font format

  • High contrast / Low contrast 

  • Similar shapes but not designs

Break

Workshop:  

If you don't like something, change it. If you can't change it, change your attitude. - Maya Angelou


WEEK 7

Midterm

Homework due: 

Reading 

Break

Lecture: Color Part 1 

  • Meaning and emotion (Psychology) 

  • Color and psychology 

  • Mood and symbolism 

  • Culture and place

WEEK 8

Break- No Class

WEEK 9

Homework due: 

Textbook Reading 

Article Reading 

Class Activities

Discussion: Review homework

Break

Lecture: Color  Part 2

  • Organizing with Color

    • Catching a viewer's eye

    • Series and structure

    • Infographics 

    • Layouts, motion and media 

  • Rules for working with color  

Break

Workshop: Typography poster creation leveraging color

WEEK 10
Homework due: 

Textbook Reading


Reading 

  • 20 Rules for Making Good Design https://www.uc.edu/content/dam/uc/cetl/docs/20RulesForGoodDesign_TimothySamara.pdf

Class Activities

Discussion: Review homework

Break

Lecture: 

  • Putting it all together

Break

Workshop:

WEEK 11

Homework due: 

Textbook Reading -

Class Activities

Discussion: Review homework

Break

Lecture: Sketch

  • Breakdown the major components of Sketch

  • Page

  • Property Inspectors

  • Create Wireframe

Break

Workshop: Create Visual Mockup

WEEK 12

Homework due: 

Textbook Reading -

Class Activities

Discussion: Review homework

Break

Lecture: Sketch

  • Advanced functions

  • Animation

  • Exporting and Prototyping

Break

Workshop: Create Visual Mockup

WEEK 13

Homework due: 

 Textbook Reading -

Class Activities

Discussion: Review homework 

Break

Lecture: Sketch

  • Downloading and working with different libraries 

Break

Workshop: Create Visual Mockup

WEEK 14
Homework due: 

 Textbook Reading - 

Class Activities

Discussion: Review homework 

Break

Lecture: Tangible outputs

Break

Workshop: Studio Time / Preview of  final presentation

WEEK 15

Final Presentation

WEEK 16

Workshop: Studio Time / Feedback of final presentation