Skip to content

UI/UX - Notes

Table of Contents

Introduction

What's UI/UX?

UI stands for User Interface, which is the graphical part of a digital product that users interact with. UX stands for User Experience, which is the overall interaction and feeling that users have with a product.

Applications

UI/UX design is essential for creating products that are functional, accessible, and enjoyable to use. UI/UX design can be applied to websites, mobile apps, software, games, and other digital products.

Fundamentals

How UI/UX works?

UI/UX design follows a process that involves several steps, such as: - User research: understanding the goals, needs, behaviors, and pain points of the target users - User personas: creating fictional profiles of the typical users based on user research - User journey maps: visualizing the steps and scenarios that users go through when using a product - Wireframes: creating low-fidelity sketches of the layout and structure of the product - Prototypes: creating high-fidelity mockups of the product that simulate the look and feel of the final product - User testing: evaluating the usability and desirability of the product with real users and collecting feedback - Iteration: refining and improving the product based on user testing and feedback

UI/UX Design Process

UI/UX Design Process

Tools & Frameworks

There are many tools and frameworks that UI/UX designers can use to create and test their products. Some of the most popular ones are: - Figma: a cloud-based design tool that allows UI/UX designers to create wireframes, prototypes, and collaborate with others in real-time - Adobe XD: a vector-based design tool that enables UI/UX designers to create wireframes, prototypes, animations, and interactive elements - Sketch: a vector-based design tool that specializes in UI/UX design and offers a variety of plugins and integrations - InVision: a platform that allows UI/UX designers to create interactive prototypes, collect feedback, and manage projects - Balsamiq: a tool that helps UI/UX designers create wireframes and mockups quickly and easily

Hello World!

Here is a code snippet that shows how to create a simple UI/UX design using HTML and CSS:

<html>
<head>
  <style>
    /* Define the style for the UI elements */
    h1 {
      color: blue;
      text-align: center;
    }
    p {
      font-size: 18px;
      margin: 20px;
    }
    button {
      background-color: green;
      color: white;
      padding: 10px;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- Define the UI elements -->
  <h1>Hello World!</h1>
  <p>This is a simple UI/UX design example.</p>
  <button>Click Me</button>
</body>
</html>

Lab: Zero to Hero Projects

To practice and improve your UI/UX design skills, you can try some of these projects: - Design a landing page for a product or service of your choice - Design a mobile app for a social media platform or a game - Design a dashboard for a data visualization or analytics tool - Design a website for a portfolio or a blog - Design a UI/UX design portfolio that showcases your work and skills

References

Online courses & lectures