Active Outline
General Information
- Course ID (CB01A and CB01B)
- ARTSD065.
- Course Title (CB02)
- Graphic Design: UI/UX
- Effective Term
- Fall 2024
- Course Description
- This course focuses on hands-on User Interface and User Experience Design fundamentals with an emphasis on the creative integration of type and image as related to user interface design and interactivity. Topics will include user flows, user navigation, screen content and organization, screen layout, importing imagery, file formats, grids, white space, visual hierarchy, corporate identity/branding, and typography issues. The primary software programs used are Adobe XD, Photoshop CS, and Adobe Illustrator.
- Course Family
- Not Applicable
Course Justification
This course belongs on the A.A. degree in the Graphic Design CTE program. This course is CSU transferable. As part of a sequence of courses, it is an intermediate course in the sequence of courses that introduces hands-on Web page design fundamentals with an emphasis on the creative integration of type and image as related to the World Wide Web.
Foothill Equivalency
- Does the course have a Foothill equivalent?
- No
- Foothill Course ID
Formerly Statement
Course Development Options
- Basic Skill Status (CB08)
- Course is not a basic skills course.
- Grade Options
- Letter Grade
- Pass/No Pass
- Repeat Limit
- 0
Transferability & Gen. Ed. Options
- Transferability
- Transferable to CSU only
Units and Hours
Summary
- Minimum Credit Units
- 4.0
- Maximum Credit Units
- 4.0
Weekly Student Hours
| Type | In Class | Out of Class |
|---|---|---|
| Lecture Hours | 3.0 | 6.0 |
| Laboratory Hours | 3.0 | 0.0 |
Course Student Hours
- Course Duration (Weeks)
- 12.0
- Hours per unit divisor
- 36.0
Course In-Class (Contact) Hours
- Lecture
- 36.0
- Laboratory
- 36.0
- Total
- 72.0
Course Out-of-Class Hours
- Lecture
- 72.0
- Laboratory
- 0.0
- NA
- 0.0
- Total
- 72.0
Prerequisite(s)
ARTS D053. or ARTS D054.
Corequisite(s)
Advisory(ies)
Limitation(s) on Enrollment
Entrance Skill(s)
General Course Statement(s)
Methods of Instruction
Lecture and visual aids
Discussion and problem solving performed in class
In-class exploration of user interfaces and user flows
Homework and extended projects
Laboratory discussion sessions and quizzes that evaluate the proceedings weekly laboratory exercises
Assignments
- Reading
- Class assignment handouts (4-6 projects) and tutorials
- Recommended texts and references
- Tutorials
- What is UI and UX
- Visual Research
- Visual Contrast / Visual Salience
- Gestalt Principles
- Layout, F / Z compositions
- Symmetry vs Asymmetry
- Above the fold
- Logo development
- XD introduction
- Color theory
- XD assets
- XD low resolution wire frame
- User empathy
- User personas & scenarios
- User stories and journeys
- User Flow
- Grid systems
- XD high resolution prototype
- XD interactive prototyping
- XD deliverables
- Hands on projects
- Website design critique of two sites: Class presentation and written report.
- Design the home page for different sites/audiences (Corporate, Small Business and Extreme Pop Culture). Create the comprehensive sketches in XD, output color screen graphics and present on screen.
- Design a website of your choice. The site must include a home page, a typical category page and one sub-category page (longer than one screen). It must also indicate rollovers, navigation and sub-navigation menus.
- Design a time based phone based application. The application shows a linear user flow that drives the user towards a desired solution.
- Discussions - Students will participate in class discussions and critiques pertaining to projects focusing on articulating and evaluating concepts visually, and creating with a high degree of craftsmanship.
Methods of Evaluation
- Evaluation of three to four projects, of web page, user interface designs demonstrating proficiency in basic computer graphic techniques and the student's ability to solve projects and produce original work with as much creativity and originality as possible.
- Evaluation of student discussions and critiques pertaining to projects focusing on articulating and evaluating concepts, form, and craftsmanship.
- Assess Lab activity - Students will demonstrate through practical application, techniques and skills associated with professional user interface design.
- Examinations or quizzes to evaluate comprehension and mastery of key terms and concepts discussed in lectures, related to user experience, user interface design and interactivity.
- Evaluation of a final project which illustrates the production of digital art for user experience design, user interface design.
Essential Student Materials/Essential College Facilities
Essential Student Materials:
- Cloud based storage account or thumb drive for storage.
- #1 Technical drawing pen
- Pencil assortment: 2H, 2B, 4B
- 18" steel ruler and a Pica or Haberule
- Erasers, masking tape and assorted templates
- Black, fine and broad line marker
- Tracing paper pad and a layout bond pad
- Other materials may be required to complete specific projects.
- Teleconferencing software
- Adobe Creative Cloud Software
- Internet Browser
- Adobe XD
- Adobe Indesign
- Adobe Illustrator
- Adobe Photoshop
- 30 station smart classroom
- Digital Drawing Tablets
- LaserWriter and inkjet printers
- Video projection monitor
- Digital camera
- Security storage cabinet
Examples of Primary Texts and References
| Author | Title | Publisher | Date/Edition | ISBN |
|---|---|---|---|---|
| Diana MacDonald | Practical UI Patterns for Design Systems: Fast-Track Interaction Design for a Seamless User Experience | Apress | (June 27, 2019) 1st ed. edition | ISBN-10 â : â 1484249372 ISBN-13 â : â 978-1484249376 |
| Design 360° | Interactive Design for Screen: 100 Graphic Design Solutions | Flamant | (April 15, 2019) | ISBN-10 â : â 8417084053 ISBN-13 â : â 978-8417084059 |
| Everett N McKay | UI is Communication: How to Design Intuitive, User Centered Interfaces by Focusing on Effective Communication | Morgan Kaufmann | (June 25, 2013) 1st edition | ISBN-10 â : â 0123969808 ISBN-13 â : â 978-0123969804 |
| Shaoqiang Wang | Design for Screen: Graphic Design Solutions for Great User Experiences | Promopress | (February 28, 2017) Multilingual edition | ISBN-10 â : â 8416504563 ISBN-13 â : â 978-8416504565 |
| Cheryl Platz, Erika Hall | Design Beyond Devices: Creating Multimodal, Cross-Device Experiences | Rosenfeld Media | (December 1, 2020) 1st edition | ISBN-10 â : â 1933820780 ISBN-13 â : â 978-1933820781 |
Examples of Supporting Texts and References
None.
Learning Outcomes and Objectives
Course Objectives
- Produce digital art that is appropriate for user interface and user experience design
- Evaluate and compare design systems, color options, file size and formats, animation, and audio/video considerations
- Implement appropriate software to create and manipulate type and image for user interface design
CSLOs
- Demonstrate an understanding of web page design fundamentals with an emphasis on the creative integration of typography and image.
- Demonstrate an understanding of the technical issues that impact design decisions.
- Demonstrate a basic knowledge of the terms and vocabulary associated with web design.
Outline
- Produce digital art that is appropriate for user interface and user experience design
- Creativity and digital technology, screen based and delivery, ethical and legal issues
- Planning, invention, and technique with user interface design related tools
- Craftsmanship, and execution in user interface design
- Evaluate and compare design systems, color options, file size and formats, animation, and audio/video considerations
- Browser features, monitor displays, color and resolution
- File resolution vs. file size, web file formats, transparency and interlacing
- Animated file formats, audio file formats, and video formats
- Implement appropriate software to create and manipulate type and image for user interface design
- Image input and processing
- Image manipulation software options
- Color palettes, bit depth and dithering
- Page design vs. screen design
- Font selection and type characteristics
- Screen based type vs. vector based type
Lab Topics
- Produce wireframes.
- Produce site architecture.
- Produce a navigation system.
- Produce a interactive user interface.
- Produce UI iconography.
- Produce interactive user workflow.
- Produce an application prototype.
- Produce an interactive prototype.
