Baruch College Digital Design Guide

Digital design resource to learn Figma UI/UX and Basics of Graphic Design Funded by Baruch College’s MakerHub MakerHub is a program of the Lawrence N. Field Center for Entrepreneurship and supported by the Baruch Student Technology Fees

<aside> 💡 Welcome! This is a digital resource guide to learning Figma UI/UX, as well as Graphic Design on Canva. Explore the different topics and modules to find what you’re looking for.

</aside>

📱🖥️ Figma - UI/UX Design

<aside> 💡

Figma is a tool/software for designing web and mobile app/screen prototypes.

UI/UX Design is a discipline that brings together digital visual design and experience design to design digital interfaces.

On Figma you can design what these screens look like, what the interactions are to get from one screen to another, and preview what it would look like on a device.

In this section, I’ve included Youtube Video Tutorials for each page, here is the link to the full playlist.

Figma also has their own website with courses, projects and tutorials that you can follow to learn how to use the platform.

</aside>

0. Getting Started - Figma Education Account Set Up

0. Getting Started - Starting a Figma File, Toolbars

0. Figma Community & Plugins

0. Figma Shortcuts

0. Learning Resources

1. Introduction to UI/UX

2. Wireframing for UI/UX - How to start your UI/UX project

3a.Prototyping - Mood board and UI Brand Kit

3b. Prototyping - Designing Frames and UI/UX Screens

3c. Prototyping - Creating Interaction Flows for UI/UX

UI/UX Case Studies

📚 Baruch College Resources

Department of Fine & Performing Arts

Business Communications Major - Graphic Communication

Graphic Communication Minor

MakerHub

Contacts:

Graphic Communications Coordinator: Professor Zoë Sheehan-Saldaña Email:

[email protected]

Graphic Communications/UIUX Professor:

Professor Grace Hamilton

Email: [email protected]

Leave Feedback!

🎫 Graphic Design

<aside> 💡

Graphic Design (also known as Visual Communications Design) is discipline around visual communications, involving how we design visual layouts.

In this resource, we will focus on digital visual design. Which is closely related and rooted in this history of print and visual design but done with digital tools.

There are many different softwares and mediums where graphic design occurs, by understanding the foundations, you’ll be able to create more effective and cohesive designs.

Digital Design Tools: Canva, Figma, Adobe Illustrator

A great beginner, free tool is **Canva** which will be introduced in this section.

</aside>

Basics of Graphic Design

How To Design a 1-Pager/Flyer

Canva Logo Design

Brand Kit