/ux-ui-design

OtherNOASSERTION

UX/UI Design

“Writing software is a highly iterative, dynamic process requiring user feedback.

Again, it's like writing poetry in that you write some of it, and then you respond to it, which triggers more creativity, and you keep going.

Then, you show it to someone whose opinion you respect, and you see it differently.”

Computers run code, developers maintain it, and humans use it. This module focuses on the humans who use it and the developers who maintain it.

You will learn about Design Thinking and User Empathy by designing a home page for one of your classmates that they will develop. The main objective is to understand your classmate and help them to build the home page they need.

Along the way you will explore the world of Open Source Software by selecting a CSS Framework from GitHub, contributing to your classmates home pages, and making a contribution to your CSS Framework's repository.

Contents

Learning Objectives

What you should be learning in this module.

expand/collapse
  • You can interview another student to learn their motivations, needs, and blocks
  • You can use paper to sketch a design and test it with a user
  • You can describe the design cycle and apply it to building a home page for others
  • You can write user journeys for websites that you visit
  • You can use figma to collaboratively plan a website design

Research, Definition

  • You will be able to describe the design cycle and what steps you will take in each state (Empathize, define, ideate, prototype, testing and implement).
  • You will be able to decide when quantitative data is necessary or when qualitative data is necessary, and how to collect both types of data.
  • You will be able to conduct some user research to understand user needs, motivations and pain points. Such as user Interview and a user survey.
  • You will understand how to interpret quantitative and qualitative data.
  • You will be able to use the user research data gathered to define the problem that you need to solve and write a hypothesis on a potential solution.
  • You will use rapid prototyping techniques (such as paper prototyping) to test initial design hypotheses and receive user feedback.
  • You will use your research findings and initial rapid prototyping to map the user journeys for your websites

Ideate

  • You will learn some of the key design principles, such as alignment, proximity, contrast, balance and space
  • You can use Figma to collaboratively plan a website design
  • You will learn the basics of using a component library (Atomic design system ?)
  • You will be able to understand how to make a website design more accessible.

Open Source Software

  • You will learn what Open Source Software is and why it is important
  • You will be able to make a contribution to an Open Source project following their Guidelines and Code of Conduct
  • You will be able to evaluate similar Open Source libraries to decide which is best for your project
  • You will know how to select an Open Source license for your project

TOP

Suggested Study

Links to help you through the assignments

expand/collapse

You don't need to learn all of this, it's a lot of links.

These links will always be here for you when you need them in the future.

User Experience and User Interfaces

Empathy for Developers
UX Research, User Interviews & Personas

UX Research

User Interviews

Personas

Design Thinking
Design Thinking for Developers
General
User experience (UX)
Gestalt
Colour
Iconography
Typography and Fonts
Style Guides
Accessibility
Imagery and Photography
Illustration
Design inspiration
Free Courses
Figma

Web based tool for interface design, collaborative, add plugins from community (free, up to 2 editors and 3 projects)

Video explanation of Figma features on their official YouTube channel.

UI Kits
More Softwares
Books

Open Source Software

What is Open Source Software?

To learn more about all things Open, check out the Open Knowledge Foundation and Open Knowledge Belgium.

Open Source Licenses

The license attached to an Open Source project is not just a detail! Check out these links to learn more about the many licenses available:

Codes of Conduct

The Code of Conduct in an Open Source project describes how contributors should treat each other. Open Source projects are about sharing and welcoming:

Contributor Guidelines

Contributor Guidelines are important to standardize coding practices and workflows for an Open Source project. You could think of it as describing how the code should be treated:

How to Contribute

and finally ...


TOP

Week 1

  • Practice Stakeholder Interviews and the Design Thinking Process.
  • Take your first steps into the world of Open Source Software.
expand/collapse

Before Class

During Class

the slide show is here

Before Break

  • ~10 minutes, all together: Ice breaker! Tell a story as a class one sentence a time starting with - "One day I was walking down the street ..."
  • ~15 minutes, all together: What is design? Why is it important?
  • ~60 minutes, small groups: Draw Toast
  • ~20 minutes, all together: each group shares how to make toast (for digital drawing: Excali Draw

After Break

  • ~20 minutes, all together: Interviews! Discuss the why's and how's of discovering your stakeholder's needs
  • ~50 minutes, small groups: Prepare for this module's project
  • ~20 minutes, all together:
    • each group shares what they discussed
    • answer questions about the projects
    • generate pairs for the project using your class randomizer

After Class

individual project, 2 weeks

You've come full circle, time to rebuild that home page you started in the Precourse. Over the next two weeks you will be rebuilding your home page at username.github.io to showcase everything you've learned so far.

There will be 3 parts to the 2-week project in UX/UI Design:

  • Designing: Practice User Interviews and Design Thinking by working in pairs to come up with your Home Page backlogs, wireframes and READMEs.
    1. You will each create a repository and fork each other's repositories. (do not add each other as collaborators!)
    2. Push your interview notes to the /planning folder in your fork of their Home Page and send them a PR
    3. Help each other turn the interview notes into a Backlog and a complete Wireframe. then you're on your own!
  • Developing: Practice solo development by turning your backlog into your new Home Page. Learn about open source libraries by choosing and using a CSS Framework in your project.
    1. Complete your Development Strategy
    2. Set up your Project Board & Issues
    3. Develop!
    4. Retrospect
  • Contributing: Practice contributing to Open Source projects. A contribution can be as simple as fixing a spelling mistake, adding a translation, or participating in an issue's discussion. It's best to make small contributions you are sure will be helpful:
    • Contribute to your classmates' Home Pages. They will not give you access to their repo, so you will need to use a Fork and comment in issues/PRs as an outside collaborator.
    • Make a contribution to your CSS Framework's repository. This doesn't need to be anything fancy, whatever you are comfortable with!

You home page is a never-ending project. You can continuously improve it as you learn more, and we will rebuild it again at HYF after you learn about JavaScript APIs. The goal in these two weeks is only to make a solid start, not make everything perfect.

Checklist

## My Home Page

- [repo]()
  - with your partner:
  - [ ] README
  - on your own:
  - [ ] License
  - [ ] Contributor Guidelines
  - [ ] Code of Conduct
  - [ ] [project board]()
- [live demo](https://username.github.io)
- /planning
  - with your project partner:
  - [ ] interview (your completed interview template)
  - [ ] backlog (developed with your partner based on the interview)
  - [ ] wireframe (design your site's outline together)
  - [ ] retrospective
  - on your own:
  - [ ] schedule (like communication plan, but for yourself)
  - [ ] constraints
  - [ ] development strategy
  - [ ] Figma file (in week 2)
- Technical Requirements. do your best to include each of these in your site:
  - [ ] CSS Selectors
  - [ ] CSS Flexbox
  - [ ] CSS Grid
  - [ ] CSS Animation
  - [ ] CSS Media Queries
  - [ ] HTML Semantic elements
  - [ ] ARIA labels

## My Contributions

- Home Pages:
  - [ ] [classmate's name](link_to_your_contribution)
  - [ ] [classmate's name](link_to_your_contribution)
  - [ ] [classmate's name](link_to_your_contribution)
  - ... why stop at 3?

TOP

Week 2

Learn to use Figma for planning your websites.

expand/collapse

Before Class

During Class

After Class

individual, figma practice

Home Page Figma: Using your wireframe from last week as a starting point, create a design document for your home page using Figma. This can be done with your partner from last week if you like, but can also be individual.

No new issues for this assignment, you can link to it from your week 1 project issue and from your home page repository.


TOP

Class Recordings

  • Students: Here you can find recordings of this module from past classes. Enjoy!

  • Coaches: When sending your PR's with links please ...

    • Indicate which class you were teaching
    • Which week it was (if the module is more than 1 week)
    • Give your name
    • and a helpful description

Class 11 & 12

by Nadia Ferreira & Marie Devos

Class 13 & 14

  1. Week 1: User Empathy & Design Thinking
  2. Week 2: User Interface Design & Figma

Class 15

  1. Week 1 - Part 1: User Empathy & Design Thinking Week 1 - Part 2: User Empathy & Design Thinking

  2. Week 2: User Interface Design & Figma

TOP