Active Outline

General Information

Course ID (CB01A and CB01B)
ARTS D056.
Course Title (CB02)
Graphic Design: UI Prototyping and Digital Publishing
Course Credit Status
Credit - Degree Applicable
Effective Term
Fall 2024
Course Description
This course is an analysis and interpretation of the elements and principles of design as applied to the practice of user interface design and digital publishing. The design process as it relates to the use of the computer to create type, image, and layout in digital user interface design will be emphasized. The primary software presented is Adobe XD. Other programs used are Adobe Photoshop and Adobe Illustrator.
Faculty Requirements
Discipline 1
[Art]
FSA
[FHDA FSA - ART]
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. This course introduces the principles of layout and the organization of information as they relate to the field of graphic design visual communication.

Foothill Equivalency

Does the course have a Foothill equivalent?
No
Foothill Course ID

Course Philosophy

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

TypeIn ClassOut of Class
Lecture Hours3.06.0
Laboratory Hours3.00.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. or instructor approval

Corequisite(s)

Advisory(ies)

ARTS D055A

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

Quiz and examination review performed in class

Homework and extended projects

Laboratory discussion sessions and quizzes that evaluate the proceedings weekly laboratory exercises

Assignments

  1. Reading
    1. Class assignment handouts (4-6 projects) and tutorials
    2. Recommended texts and references
  2. Tutorials
    1. Formal Design Process
    2. UI Heuristics
    3. Low resolution prototyping
    4. Logo design theory
    5. Establish a design language
    6. XD File structure
    7. DPI
    8. Deliverables
    9. Wireframes
    10. Minimalism
    11. UI XD File Build
    12. Digital Mockups
    13. Responsive layouts
    14. Visual communication and story telling
    15. User Flow
    16. Skeuomorphism
    17. XD Styles
    18. XD Components
    19. Color schemes
    20. XD Interactive Prototyping
  3. Hands on projects
    1. Design and refine multiple website landing page prototypes.
    2. Design iconography which drives a user interface design.
    3. Design and refine phone or tablet-based application user interface prototype.
    4. Design a multi-screen user flow that provides a solution for a user.
  4. 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

  1. Participation in three to four projects, presented as an interactive digital prototype demonstrating proficiency in the student's ability to solve projects and produce original work, including the student's ability to solve projects with as much creativity and originality as possible through following the formal design process.
  2. Evaluation of student discussions and critiques pertaining to projects focusing on articulating concepts visually, and creating with a high degree of craftsmanship.
  3. Assess Lab activity - Students will demonstrate through practical application, techniques and skills associated with professional digital layout and digital publishing software.
  4. Exams or quizzes to evaluate comprehension and mastery of key terms and concepts discussed in lectures, related to digital prototyping and publishing.
  5. Evaluation of a final project that evaluates content designed in Adobe XD that integrates text, image, and user interaction.

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
Essential College Facilities:
  • 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 cabinets

Examples of Primary Texts and References

AuthorTitlePublisherDate/EditionISBN
Brian WoodAdobe XD Classroom in a BookMacromedia Press(2020 release) 1st EditionISBN-10 ‏ : ‎ 0136583806 ISBN-13 ‏ : ‎ 978-0136583806
Diana MacDonaldPractical UI Patterns for Design Systems: Fast-Track Interaction Design for a Seamless User ExperienceApress1st ed. edition (June 27, 2019)ISBN-10 ‏ : ‎ 1484249372 ISBN-13 ‏ : ‎ 978-1484249376
William Lidwell , Kritina Holden, Jill ButlerUniversal Principles of Design, Revised and Updated: 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through DesignRockport Publishers2nd Second Edition, Revised and Up ed. (January 1, 2010)ISBN-10 ‏ : ‎ 1592535879 ISBN-13 ‏ : ‎ 978-1592535873
Design 360°Interactive Design for Screen: 100 Graphic Design SolutionsFlamant(April 15, 2019)ISBN-10 ‏ : ‎ 8417084053 ISBN-13 ‏ : ‎ 978-8417084059

Examples of Supporting Texts and References

None.

Learning Outcomes and Objectives

Course Objectives

  • Implement basic computer operation for user interface design and digital publishing.
  • Prepare and produce user interface designs on the desktop (the art making process/laboratory exercises) e.g. XD, Photoshop, Illustrator.
  • Construct graphics-based user interface content in Adobe XD that integrates graphical elements, text and images.
  • Produce a body of work that displays an understanding of User Interface Design for Digital Publishing.

CSLOs

  • Exhibit an understanding of the elements and principles of graphic design as applied to the practice of user interface design and digital publishing.

  • Demonstrate an advanced understanding of the design process as it relates to the use of the computer to create typography and layout in user interface design and digital publishing.

Outline

  1. Implement basic computer operation for user interface design and digital publishing.
    1. Vocabulary of digital publishing terminology
    2. File and folder management
    3. Software alternatives
  2. Prepare and produce user interface designs on the desktop (the art making process/laboratory exercises) e.g. XD, Photoshop, Illustrator.
    1. Understanding the formal design process
    2. Thumbnail drawing and preliminary conceptual development
    3. Comprehensive analog illustrations and presentation techniques
    4. Low fidelity layout iterations
    5. Medium fidelity layout iterations
    6. Typography, images, and production considerations
    7. The grid and design systems for visual organization
  3. Construct graphics-based user interface content in Adobe XD that integrates graphical elements, text and images.
    1. Typographical visual communication
    2. Image sourcing for conceptual meaning
    3. Compositional formatting for user needs
    4. Iconography for form and function
    5. Layout design that provides solutions
  4. Produce a body of work that displays an understanding of User Interface Design for Digital Publishing.
    1. Multiple website landing page prototypes
    2. Phone or tablet-based user interface prototype
    3. Published interactive multi-screen user flow

Lab Topics

  1. Compile conceptual research.
  2. Compile visual research.
  3. Produce low fidelity User Interfaces prototypes.
  4. Produce medium fidelity User Interfaces prototypes.
  5. Produce high fidelity User Interfaces.
  6. Produce iconography.
  7. Produce user workflow.
  8. Publish user workflow.
Back to Top