2025 Fall Workshop Series • Workshop 1

UI/UX + Git

Learn how to design an accessible, multi-platform user interface of a web application using Figma, and how to manage version control within projects!

This workshop

will be recorded

But if you’re attending our workshop live,

please fill out the attendance form we’re about to display :)

Slido for anonymous Q&A

yellkey.com/pretty

code: 2699690

Agenda

1. Introduce us
2. Introduce DISC
3. UI/UX Design
1. Accessibility
2. Responsiveness
4. Figma
5. Git/GitHub
6. Homework

Brock Brown

• Class: Junior
• Major: BS Computer Science (McCormick)
• Experience:
• 1x SWE Intern @ Barton Studio
• CS 214 TA (sometimes)
• CS Interest: Full-Stack SWE, Data visualizations, cloud computing(?) idk
• Hobbies: Gym, baking, listening to music (Spotify > Apple Music no diff sorry🙏)

Technical Lead

Christian Lee

• Class: Junior
• Major: BS Computer Science (McCormick)
• Experience:
• Research @ Prescience Lab Northwestern
• CS 213 PM
• Pizza Chef @ Anticos
• CS Interests: Computer graphics, low-level development
• Hobbies: Movies, Videography, Gaming, Cooking

Technical Lead

Vihaan Shah

• Class: Senior
• Major: BS/MS Computer Science
• Experience:
• SWE Intern @ Oracle
• SWE Intern @ Atomera
• PM for CS 310, CS 358
• CS Interests: Backend Development, Cloud Computing, Distributed Systems
• Hobbies: Travel, Sports, Video Games

​

Technical Lead

Everyone else

Co-President

Aanand Patel

CS | Senior

Co-President

Joanna Soltys

CS (BA/MS) | Senior

VP Member Dev

Paula Fregene

CS + MLDS | Junior

VP Marketing

Jazlyn Ho

CS + Music | Sophomore

VP Business Dev

Yong-Yu Huang

CS + English | Senior

VP Finance

Ejean Kuo

CS + English | Junior

What is DISC?

Our Mission

Founded: 2017 2024-2025: ~300 members!

DISC’s goal is to expand Northwestern students' perceptions of the capabilities of technology. Recognizing the power of collaboration across difference, we look for the right balance of technical and non-technical skills to assemble project teams of diverse and hardworking student leaders interested in using technology to make a positive impact on the world. We challenge our members to grow as they work for community clients in Evanston and Chicago.

Follow us on Cats on Campus!

tinyurl.com/disc-cats

Fall Workshops: Mondays @ Tech LR3 6:30-8:00 PM

Winter/Spring Studios

• Weekly, hour long studios
• Work time and team check-ins
• Work time outside of studio is highly encouraged
• Mini-workshops specific to projects
• Applications late fall quarter (Due start of winter quarter)
• Rank which teams you’re interested in, informal interview
• No tech background required!

​

Next Steps

• Join our Discord: tinyurl.com/disc-ord
• Join us on Cats on Campus: tinyurl.com/disc-cats
• Check out our website: discnu.org
• Follow our Instagram: @disc_nu
• Add our Google Calendar: tinyurl.com/disc-cal
• Keep an eye out for updates regarding workshops
• We will share a recap of this info session and important links soon!

What is UI/UX?

UI: User Interface

UX: User Experience

UI/UX is very important

• First impressions matter
• Tiny details matter
• Professional feel
• We are working with real orgs

Accessibility

Accessibility is very important

Accessibility is very important

• Ensures equal access to information and services for all users
• Inaccessible websites keep disabled people out of work
• Improves User experience (UX) for everyone
• Increases customer reach and base
• Complies with legal requirements and avoids potential lawsuits
• As a company, you can get sued for inaccessible websites
• Demonstrates social responsibility and inclusivity
• By June of 2025, already 2014 total lawsuits were filed against companies for not following ADA (The Americans with Disabilities Act) guidelines

What Accessible Design Looks Like

• High color contrast for readability
• Clear navigation and consistent layout
• Alternative text for images
• Keyboard accessibility for all functions
• Proper header structure and semantic HTML

Tools for Accessibility Testing

• Lighthouse in chrome/chromium browsers
• axe DevTools (extension)
• Screen readers
• Color contrast analyzers

Tools for Accessibility Testing

Responsiveness

Importance of Responsive Design

• Website can adapt to various screen sizes & devices
• Improves user experience across different platforms
• Boosts Search Engine Optimization (SEO) rankings
• Increases conversion rates (if you're building a SaaS or E-Commerce Site)

Some Devices that you Design & Develop for:

• Mobile
• Tablet
• Desktop
• Ultrawide
• Small Height

Key Principles of Responsive Design

• Fluid grids & Layouts
• Flexible Images & Media
• CSS Media Queries
• Tailwind classes
• Mobile-First Approach
• Start designing for mobile devices first
• Easier to scale up to desktop designs later (rather than the reverse)

Testing Responsive Design

• Browser Developer Tools
• Real device testing (using deployed site)
• Responsive Design Testing Tools
• BrowserStack

​

Wireframing

Benefits of Wireframing

• Clarifies site architecture & layout
• Facilitates early user feedback
• Saves time and resources
• Allows for rapid prototyping and iteration
• Improves communication between team members

Wireframing Strategies

Wireframing Tools

Figma Demo

tinyurl.com/disc-ui-ux-demo

What is a Design System?

• Short Answer: a blueprint
• Long Answer: a set of building blocks and standards that help keep the look and feel of products and experiences consistent
• Advantage: can reduce the amount of time spent re-creating elements and patterns while designing and building products and interfaces at scale, especially with a team of multiple designers
• While you might not need a design system for a small project like a personal website, it’s super helpful when working on larger teams with larger products for both consistency and efficiency sake

Figma Resources

• How to get an education account (more features than standard)
• Figma Wireframing Kits you can copy/paste components from
• Design systems 101: What is a design system?
• Figma Video Courses (basically just a short playlist of tutorials)
• I recommend “Figma for beginners” and “Introduction to Design Systems”
• Figma YouTube Channel (some recommendations below)
• Components
• Layout Grids
• Auto Layout
• Prototyping 101
• The recording of this workshop/demo :)
• Figma file from our workshop (feel free to use this as a template)

Git

What is git?

• Free, open-source version control system
• Solves 2 big problems:
• History: how do i keep track of how my code has changed over time?
• Collaboration: how do i manage multiple people working on the same codebase at the same time?
• Fun fact: created by Linus Torvalds (the dude who made linux)

History

• Common problems:
• I made some changes i don’t like and i want to undo them
• A feature stopped working. I need to see what the code used to look like to debug
• This part of the code looks terrible. Who tf wrote this

Google docs solution

• Track every single change
• Add/delete words
• Insert image
• etc
• View all changes chronologically
• Roughly grouped by date & time
• View who made each change

​

Why might this be a bad way to manage code history?

The git solution

• As you work, bundle related changes into commits
• Eg. you just made a bunch of changes to the navbar. Bundle those into a navbar commit.
• Grouping changes based on topic > grouping changes based on time
• Keeps track of who made each commit & when
• View commit history chronologically
• Every commit includes a snapshot of the entire codebase when you make that commit
• Easily view the codebase at previous commits & revert

Install git if you don’t already have it

1. Check if you have git installed: In your terminal, run git --version
2. If you don’t have it installed:
• Mac:
1. Install homebrew: https://brew.sh/
2. Run brew install git
• Windows:
• Install git bash. Make sure to select the "Use Git from the Windows Command Prompt" option.
• Linux: check the docs
3. Confirm you have it installed. In your terminal, run git --version

Using git to track history

1. Find a code project you want to track. Navigate to the root folder of the project in the terminal. Terminal navigation commands
2. In the root folder of the project, create a git repository
• A git repository is a .git folder that holds info about your project’s commit history
• To create this folder, run git init
3. Check if you have git configured
• git config --list
• Check if user.name and user.email exist and have the correct information
• If it’s not correct, configure:
1. git config --global user.name “Insert Your Username”
2. git config --global user.email “insert your email”

Using git to track history

4. Make some changes to the code

• git status will tell you what files have changed since the last commit

5. Stage changes you want to add to the current commit

• git add . will add all changes in the current folder to the stage

6. Save and close the current commit

• git commit -m “insert_name_of_your_commit”

7. View your commit history

• git log or git log --oneline

Put your git repository on github

• What is Github?
• Helps you manage your git repositories (nice UI)
• Helps you manage sharing/collaboration
• Does a crap ton of other stuff that we won’t cover
• Login/sign up to github: https://github.com
• Use the same email as your git config
• Go to your repositories
• New
• Name it whatever you want (no spaces, use dashes instead)
• Create repository

Put your git repository on github

6. Navigate to the root of your project in the terminal

7. Connect your local git repository to the remote github repository

• git remote add origin insert-link-to-remote-git-repository

​

​

​

8. Rename the current local branch to “main”

• git branch -M main

9. Upload your local project contents & git repository to github

• git push -u origin main
• This step might require you to login to github

Branching

• When you’re working on multiple features at the same time,
• Usually larger features that span multiple commits
• …you want to group your commits by feature,
• Commits are groups of changes. Branches are groups of commits.
• …and you want multiple copies of the code on your machine.
• Each copy contains work on one feature
• Bug in one feature should not prevent progress on the others
• A branch is essentially a copy of the codebase that contains a specific set of commits
• Each feature = 1 branch

Branching + Merging

• Let’s say I create a branch called ‘navbar-feature’
• git branch -b navbar-feature
• This creates a copy of the main branch with all existing content. Now I can do my edits on this separate branch
• Now I have finished what I want to add, now I need to merge my changes.
• This will take my changes on navbar-feature and ‘merge’ it with the main branch. Now everyone can see my changes
• Demo

Homework

Fall workshop series website

https://workshops.discnu.org/

​

Project Overview

• 9 workshops = 9 assignments (1 per workshop)
• Sum of all the assignments = fully usable full stack web app
• UI/UX
• Frontend
• Backend
• CI/CD (deployment)

Read the full overview

Prompt

• Finding community on campus is hard
• Let’s make it easier
• How can we use software to streamline the search for social connection on campus?

Read the full prompt

Feature requirements

• The ability for students to make accounts and profiles
• The ability for students to view and filter the profiles of other students by some criteria
• The ability for students to save the profiles of other students they are interested in connecting with, and view the profiles they saved
• Some way for connections in-app to become connections out-of-app (like a way for connections to contact each other)

Everything else is up to you

Read the full requirements list

This week: Assignment 1

Create a wireframe of your web app using Figma.

• At least 3 different pages
• A navigation bar on every page
• A footer on every page
• A display of many profiles on the same page
• Explanations of what buttons do and what other interactions users can have with your app
• At least 4 colors (yes, black and white do count). The color palette should be accessible.
• At least 2 images
• At least 3 components

Read the full assignment

Should you do it?

That depends.

• If you don’t, nothing bad will happen
• You get out what you put in

Benefits:

• Practice using the most popular web development tools (Figma, React, Node/Express)
• Get experience working on all parts of a tech stack
• Make a project that looks great on a resume
• More prepared for the 2026 Winter/Spring Discover Program & application boost

Deadlines

Read more information about deadlines

Submission

Fill this out: https://forms.gle/998XCjBLtGdah74Y6

T H A N K S F O R C O M I N G !

Next week: Browsers, HTML, & CSS • Mo 6:30-8:00pm in Tech L361

Develop & Innovate

For Social Change