Projects People Resources Semesters Blog About
Projects
Projects
🤯

Wonders of UI & UX

Last Updated: 19 September, 2022

‣

Defining Terms

  • User Interface (UI): The part of a software application that a user sees and interacts with.
  • User Experience (UX): The desired, expected, or actual experience of a user interacting with a product, especially as it relates to the design of the product's user interface.
‣
Sketch: A basic drawing of your app design on paper
image
image
image
‣
Wireframe: A very simple representation of your app with basic shapes/layouts
image
‣
Mockup: Like a wireframe, but looks like the finished product
image
image
‣
Prototype: Like a mockup, but you can interact with it (click, scroll, etc.)
image
image
‣

Designing UX

We design UI/UX before coding to get a sense of a few things:

  • A visual representation of what an app looks like
  • A map of how the user might interact with the app given their unique prior experience
  • Communicate ideas for the design with each other so all members are on the same page and your product has a cohesive look and feel (meaning not only do things share font choice and color, but interactions are similar places across the app and visual hierarchy is maintained).
  • Typically no code involved in creation
  • Designs can range from being simple paper sketches to advanced and interactive
💜
Just like planning you interfaces and classes before programming, prototyping allows you to have a vision of what you want your final project to be.
Increase the fidelity of your design over time until you’re ready to translate it into code. When you work with a designer your job is to go from Prototype to Code based on the designs they provide you.
Increase the fidelity of your design over time until you’re ready to translate it into code. When you work with a designer your job is to go from Prototype to Code based on the designs they provide you.
‣

Types of Prototypes

Low-Fidelity: Simple sketches on what you might want your project layout to look like

Medium Fidelity: Basic designs using your already created layout showcasing what your final product might look like

High Fidelity: Mimics all interactions, design, and animations you’d want your final product to have without any functionality

‣

Tools

Designing on paper, and replacing components with Post-it overlays to represent changes to state based on user interactions is a super simple way to iterate on your UX before digitizing it.
Lucidchart lets you design super simple drawings using basic shapes and text. You pull from a library of shapes instead of having to design from scratch, so its great for rapid prototpying.
AdobeXD is a UI/UX design tool created by Adobe. It’s free and is great if you want to integrate with designs from Photoshop or Illustrator as you work.
Figma is the current industry standard design tool. It’s web-based, so it’s super approachable and collaboration forward. It’s like the world’s most powerful Google Doc whiteboard.