Intro to UI/UX

1️⃣ UI vs UX

What is UI?

UI stands for User Interface.

It's all about the look and feel of a product.

Think of it as the visual elements you interact with: buttons, icons, colors, fonts, etc.

Example: Your phone's home screen with its apps, clock, and battery icon.

What is UX?

UX stands for User Experience.

It's about how a user feels when using a product.

It's about making things easy and enjoyable.

Example: How easy is it to find the battery percentage on your phone?

💡

UI and UX are inseparable. Think of them as the look and feel (UI) versus the overall experience (UX) of a product. Both are essential for creating user-friendly designs.

The Design Process

❶ Wireframing

Planning the layout and structure of a product.

❷ UI Design

Adding visuals, colors, and style.

❸ Testing

Making sure the product works well and is user-friendly.

Remember: The goal is to create products that are both beautiful and easy to use.

2️⃣ UI/UX Careers

Anyone can learn UI/UX design! No matter your background, you can dive into this exciting field.

Start Your UI/UX Journey

While there's no specific UI/UX major in Indonesia yet, many fields can prepare you. Visual communication, product design, psychology, and even information systems can give you a solid foundation. Don't worry if you can't enroll in a related course; online learning is a great option!

Explore Different UI/UX Roles

The UI/UX world is full of opportunities! From crafting seamless user experiences (UX Designer) to conducting in-depth research (UX Researcher), there's a role for everyone. If you love drawing, consider UI Design or UX Illustration. Strong writing skills? You might enjoy UX Writing. And if you're tech-savvy, UI/UX Engineering could be your path.

Essential Skills for Success

Beyond technical skills, four soft skills are crucial:

Empathy: Understand your users' needs and feelings.

Collaboration: Work effectively with a team to create amazing products.

Critical Thinking: Question everything and find innovative solutions.

Communication: Clearly share your ideas and present your work confidently.

Remember: The UI/UX world is constantly evolving. Stay curious, keep learning, and most importantly, have fun!

3️⃣ Human-Centered Design

Human-centered design is all about creating things with people in mind. We put ourselves in our users' shoes to understand their problems and find solutions that truly help them.

Imagine a door. A simple thing, right? But even doors can be confusing! That's where the Norman door comes in. It's a concept that highlights how design choices can either make things super easy or super frustrating.

A door with a clear push or pull sign is a perfect example of good design. It tells you exactly what to do. But a door without any clues? That's a problem.

The key to great design is to avoid confusion.

We want to make things so simple that anyone can use them without thinking twice. By understanding the challenges people face, we can create solutions that are both useful and enjoyable.

4️⃣ Design Thinking

Design thinking is a human-centered approach to problem-solving that focuses on creating innovative solutions. It's a process that helps us understand user needs, develop creative ideas, and build products or services that people love.

Key Components of Design Thinking

Empathy: Understanding users' needs and perspectives.

Defining the Problem: Clearly articulating the challenge to be solved.

Ideation: Generating creative solutions.

Prototyping: Building a tangible representation of the idea.

Testing: Gathering feedback on the prototype.

Balancing Different Perspectives

Design thinking isn't just about users. It also considers:

Technology: Ensuring solutions are feasible with current technology.

Business: Making sure the product or service is profitable.

Human Values: Creating solutions that align with people's beliefs and needs.

The Goal: A Great User Experience

Ultimately, design thinking aims to create products that are:

Useful and usable: Easy to use and fulfill a need.

Desired: Something people actually want.

Credible: Trustworthy and reliable.

Accessible: Available to everyone.

5️⃣ Intro to Figma

Figma is a versatile design tool primarily used for creating user interfaces (UI) and user experiences (UX). However, its capabilities extend to graphic design, presentations, and vector illustrations. It's cloud-based, allowing for real-time collaboration and accessibility from any device.

Basic Figma Workflow

Create a New File: Start by creating a new design file.

Understand the Interface: Familiarize yourself with the tools, layers, pages, and collaboration features.

Create Frames: Use frames as your design canvas.

Utilize Tools: Employ tools like shapes, text, and pen to build your design.

Organize Layers: Keep your design structured by naming and grouping layers.

Create Components: Reuse design elements efficiently with components.

Apply Masking: Create custom shapes for images using masking.

Prototype: Bring your design to life by creating interactive prototypes.

Key Figma Features

Collaboration: Work seamlessly with your team.

Versatility: Create various design types.

Components: Efficiently reuse design elements.

Prototyping: Test your designs before development.

🧠 Quiz

👉 Got the material? Let's solidify your knowledge with this quick quiz!

💡 Exercise

Time to Dive into Your Workbook! ✨

Now that you’ve completed this module, it’s time to put what you’ve learned into practice. Head over to your workbook and turn to Page 5 & 6. There, you’ll find activities designed to help you deepen your understanding of what you’ve just watched/read.

Why This Matters

These exercises are crafted to reinforce the key concepts and ensure that you’re ready to apply them during our class discussions. Don’t skip this step—it’s your chance to solidify your learning and gain confidence!