Skip to content

Latest commit

 

History

History
110 lines (66 loc) · 4.66 KB

02-ProjectUI.md

File metadata and controls

110 lines (66 loc) · 4.66 KB
Raw

Pretty Portfolio Projects, Please

⏱ Agenda {docsify-ignore}

  1. [05m] 🏆 Objectives
  2. [20m] 💬 TT: So, About That UI...
    1. General Rules of Thumb
  3. [15m] 💻 Activity: UX Examples
  4. [15m] 💻 Discuss: UX Examples
  5. [10m] 🌴 BREAK
  6. [35m] 💻 Activity: Design Checklists (Part 1)
  7. [05m] 🌴 BREAK
  8. [25m] 💻 Activity: Design Checklists (Part 2)
  9. [10m] 🔄 Recap: What's Next?

[05m] 🏆 Objectives

  1. Analyze a project from a user's perspective and identify specific opportunities for improvement.
  2. Generate a list of action items that improve the look, feel, and functionality of your projects.

[20m] 💬 TT: So, About That UI...

Last night, I crunched the numbers on the Portfolio Project Audit, and guess what I learned? Across all concentrations, we all felt we had room to grow when it came to user experience.

Let's look at some ways we can do that today!

General Rules of Thumb

PROTIP: Save a copy of the image below so you can reference it later on in class --- and in the future!

Don't Make Me Think

[15m] 💻 Activity: UX Examples

In your breakout room, select a website that everyone is familiar with.

Go to the homepage in your browser, and use it to answer the questions below:

  1. Find at least one rule from the infographic above that the site follows well.

  2. Find at least one rule the site violates or lacks.

  3. Get creative! How would you improve the user experience in 20 minutes or less?

    EXAMPLE: Add a label that reads "Hello, USERNAME" in the header near the logout button. This will clearly indicate to the user that they're still logged in to the website.

[15m] 💻 Discuss: UX Examples

Call on the students in each breakout room in random order and ask them to share about the website they selected.

[10m] 🌴 BREAK

[35m] 💻 Activity: Design Checklists (Part 1)

  1. Visit Checklist Design in your browser.
  2. Remember the portfolio project you evaluated last time we met? Open it up in your IDE of choice.
  3. Select one checklist from Checklist Design that are relevant to your project.
  4. Evaluate your project based on the checklist.
  5. Take a screenshot of the checklist (you'll need it later on).

PROTIP: Make sure to run your project locally and evaluate each checklist item visually. Don't just guess based on the code you've written! Verify the feature actually works by using it.

[05m] 🌴 BREAK

Get up and stretch before the next activity!

[25m] 💻 Activity: Design Checklists (Part 2)

Follow the instructions above, but select a different checklist that best fits your project.

[10m] 🔄 Recap: What's Next?

  1. Submit both screenshots in the Portfolio: Project Design Checklist assignment on Gradescope.
  2. Make at least three of the changes you identified today in your portfolio project. You'll be submitting this project for re-evaluation later on in the term.

📚 Resources & Credits