Workshop I - Introduction to DISC & UI/UX

Workshop Topics

• What is UI/UX?
  UI/UX encompasses not just web design, but the design of everyday objects and experiences. We explored real-world examples like the impact of small changes on user experience and business outcomes.

• The Importance of UI/UX
  Effective UI/UX design can enhance a business's professional image, improve user experience, and support inclusivity. We emphasized the significance of accessibility, from high-contrast color choices to accessible fonts and responsive layouts.

• Designing for Responsiveness
  Adapting designs for various devices—mobile, tablet, desktop, and beyond—is crucial. We discussed mobile-first development and looked at examples of responsive design in action.

• Wireframing
  We introduced different levels of fidelity in wireframing, from pen-and-paper sketches to digital tools like Figma. Participants practiced creating a simple website wireframe to prepare for the Figma demo.

• Introduction to Figma
  We covered the basics of Figma, including its features for organization, accessibility tools, and responsive design. Attendees learned how to set up a project in Figma and explored essential elements such as auto layout, design systems, and collaborative tools. The demo walked through building a simple, high-contrast website with multiple pages, a navigation bar, a contact form, and an image grid. Participants are encouraged to recreate their wireframe in Figma as homework.

• What is Git?
  Git is a version control system that tracks changes in your files and acts as a 'time machine' for your projects. You can 'go back in time' and see when certain code edits where made, in which file, who made the edit, and other relevant details about code changes.

• Wait, then what is GitHub?
  GitHub is an online platform that hosts Git repositories (coding projects), making it easy to share code, collaborate, and manage projects with others. It builds on Git by adding features like pull requests, issues, and team collaboration.

• Basic Git flow

  1. Inititalize your repo (repository) -> git init
  2. Make changes to your files
  3. Stage changes -> git add . or git add filename.ext
  4. Commit changes -> `git commit -m "meaningful message"
  5. Push to remote origin (GitHub) -> git push
  6. Working with others? Pull their changes before making yours -> git pull origin main

Materials

Workshop recording	Slides	Homework
YouTube Link	Link	Assignment 1