UI/UX Workshop: Part 1
Welcome! We’re so glad you could join us and learn about how to think like a UI/UX designer, all while also trying to put that learning to practice. Before we get started, this guide serves as an outlink haven for all the references and materials to be talked about in the workshop. It is also a one-stop summary shop so that anyone who wasn’t able to attend could also get a glimpse of what we covered :)
Without further ado…
All in all, the workshop consists of 5 stages:
- Introduction — what is UI/UX
- Defining use cases
- Defining product features
- Wireframe and Sketch
- Create a hi-fi prototype
Introduction — what is UI/UX?
User Interface (UI): describes, simply, how things look. It relates to font choices, graphics and color scheme to ultimately define the product’s brand and language. It concerns what most people think about when we say “design”: aesthetics.
User Experience (UX): describes how things work. UX is all about designing with the end user in mind. Typical questions that run in a UX designer’s mind are: Will the user understand how to use this? Will it be convenient for the user? What can I do to make their experience better? Thus, UX designers utilize layout, flow, organization of content and language as tools to affect the interactions, functions and accessibility of the product.
References:
Reason8 — another version of the voice transcriber
A more in-depth breakdown of UI/UX
Defining use cases
To begin any product design venture, it is important to know WHO we’re designing this for and WHEN/HOW they will use this product. We can design a really sleek, high sound quality pair of headphones but if our customers are children, then they’re probably going to go for the dinosaur shaped one, even if its quality isn’t as good. Knowing our users and when/how they will use the product will help us prioritize and focus on features and designs that create the most impact.
References:
For those who need the rules on how to define good use cases
Defining product features
Given the use cases we defined, what features can our product have to support it? A great way to gauge the relative impact of a feature is to think of the effect that taking that feature out will have. Will our product still be valuable without it? For example, login is important for security but it is not a core, crucial part of a product.
Wireframe and Sketch
Wireframing show the components of each screen and the flow between screens. Start by designing the primary features of your product before goin to other parts. The biggest reason why people wireframe before they move onto a higher fidelity prototype is to reduce the amount of time used to modify and perfect their designs. It’s also a great way to focus on just the UX of the product.
References:
dribbble — more UI/UX design inspiration
Create a hi-fi prototype
We will be focusing on creating a hi-fi prototype in the next workshop on the 14th of March because it requires us to go deeper into the technicalities of using the online design tool Figma. Remember to create an account on Figma before the next workshop!
References:
Summary
I want more!
You can follow us here on Medium for more summaries and pieces related to designing great products or on Facebook for updates on events and workshops coming your way.
Cheers!
