Scribd
Upload
402 views

Webinar UX UI Design Wireframes and Prototypes

The webinar provided an overview of UX/UI design, including wireframes, prototypes, design trends, and hands-on practice with Figma. Attendees learned about user research, wireframing techniques, prototyping tools, and common design trends. They then worked on a challenge to design login and home screens for desktop using the mobile screens created during the session.

Uploaded by

Rohite Sofyan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
402 views

Webinar UX UI Design Wireframes and Prototypes

The webinar provided an overview of UX/UI design, including wireframes, prototypes, design trends, and hands-on practice with Figma. Attendees learned about user research, wireframing techniques, prototyping tools, and common design trends. They then worked on a challenge to design login and home screens for desktop using the mobile screens created during the session.

Uploaded by

Rohite Sofyan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 34

UX/UI Design:

Wireframes and
Prototypes
Webinar Instructor:
Jonathan Haines

Jon teaches UX/UI Design webinars with


Thinkful. He is a graduate of Thinkful’s
Web Development course and uses his skills
to empower others to get involved in the
tech community.

Let’s get started.


2020

UX/UI Design:
Wireframes and
Prototypes
Information and practical exercises to add to your current
toolkit or take the first step in launching a new career.
Industry Overview Applied Examples FAQ’s Take Action!

Welcome to Thinkful!
We teach tech skills that lead to fulfilling, high-paying careers.

Our students learn in-demand industry


tools through 100% online programs as
they work toward a job-ready portfolio
with the help of an expert mentor.

Let’s get started.


Industry Overview Applied Examples FAQ’s Take Action!

❏ What is UX/UI Design?

Workshop ❏ Prototypes and Wireframes

❏ Established Design Trends

Rundown ❏ Interactive Figma Workshop

❏ FAQs and Next Steps


Industry Overview Applied Examples FAQ’s Take Action!

What is UX/UI Design?

“UX is the totality of end-users’ perceptions as they


interact with a product or service.
These perceptions include effectiveness, efficiency,
emotional satisfaction, and the quality of the
relationship with the entity that created the product or
service.”

> Mike Kuniavsky (big time design guy)


Industry Overview Applied Examples FAQ’s Take Action!

UX/UI Design

UX/UI is appealing to a user’s


psychological wants to give
them a better experience for a
product or application.

UX ⇔ How Things Work


UI ⇔ How Things Look
Industry Overview Applied Examples FAQ’s Take Action!

Trust the Process


UXD is the process of researching users to understand them
better to enhance their satisfaction of a product/experience.
Industry Overview Applied Examples FAQ’s Take Action!

Task Breakdown

UX UI
User Research Visual Design
Usability Tests Wireframing Interface Design
Personas Prototyping Colors
Info Architecture Layout
Usability
Interaction Design Branding
Workflows Accessibility Typography
Copywriting Graphics
Low-fidelity High-fidelity
Industry Overview Applied Examples FAQ’s Take Action!

What’s a Wireframe?

A wireframe is a visual guide that


represents the skeletal framework of
a website or application. Wireframes
are created for the purpose of
arranging elements to best
accomplish a particular purpose.
Industry Overview Applied Examples FAQ’s Take Action!

Imagine Building a House

Even the best builders need a plan.

❏ Developers are the builders.


❏ Designers are the architects.
❏ Wireframes are the blueprints.
Industry Overview Applied Examples FAQ’s Take Action!

Types of Wireframes

Low Fidelity High Fidelity


Industry Overview Applied Examples FAQ’s Take Action!

Wireframe.cc for Wireframing

Great site for quickly


creating low fidelity
wireframes.
Industry Overview Applied Examples FAQ’s Take Action!

Low Fidelity Wireframing

Creating quick examples to


convey a specific idea.
A designer’s job is to make
sure everyone is solving the
same problem (think about the
house blueprint example).
Industry Overview Applied Examples FAQ’s Take Action!

Examples of Prototyping Tools


(for more high fidelity work)
Industry Overview Applied Examples FAQ’s Take Action!

Figma, a Prototyping Tool

The term wireframing is more of an


umbrella term that is used
interchangeably with prototyping.

We will be using Figma later on


tonight.
Industry Overview Applied Examples FAQ’s Take Action!

Modern UX/UI Design


Established Trends
Industry Overview Applied Examples FAQ’s Take Action!

Trends Prevent Bad Design


Industry Overview Applied Examples FAQ’s Take Action!

Jakob’s Law

Users spend most of their time on other sites.

This means that users prefer your site to work the


same way as all the other sites they already know.

Read additional details about Jakob’s Law here.


Industry Overview Applied Examples FAQ’s Take Action!

The Laws of UX
Continued

For more about aesthetics and


how user psychology can play
a role in design, check out
Laws of UX.
Industry Overview Applied Examples FAQ’s Take Action!

Common Trends for Web Design ‣ lapa.ninja


Industry Overview Applied Examples FAQ’s Take Action!

Common Trends for Mobile Design ‣ mobbin.design


Industry Overview Applied Examples FAQ’s Take Action!

Hands-On
With Figma
Industry Overview Applied Examples FAQ’s Take Action!

Prototyping in Action

We need a project
to work on…
Let’s make a login
screen together!
Industry Overview Applied Examples FAQ’s Take Action!

Figma

There are lots of


great tools for
prototyping
Our online
collaborative
prototyping tool for
today is Figma.
Industry Overview Applied Examples FAQ’s Take Action!

Frames (Artboards)

A frame is a parent
object.
This means that it can
control or influence
any child objects you
place within it.
Industry Overview Applied Examples FAQ’s Take Action!

Grids

Frames can be
measured by grids.

Grids can remove the


guesswork from many
aspects of your process.
Industry Overview Applied Examples FAQ’s Take Action!

Layers and Components

Frames are made up of layers.

Master layers can become components: elements


you can reuse across your designs.
Industry Overview Applied Examples FAQ’s Take Action!

Prototype Transitions

What will this look like?


Figma, like other
Prototyping tools, have the
ability to animate frames
to emulate how an actual
application would work.
Industry Overview Applied Examples FAQ’s Take Action!

Design Challenge!
Industry Overview Applied Examples FAQ’s Take Action!

UX/UI Design Challenge

❏ We spent our session discussing how to create a mobile login screen


and transition it into a home screen.
❏ With our knowledge of layers, components, and artboards, how
would we go about designing similar screens for desktop?
❏ Your task: Use the mobile screens we created to create a similar
design concept for a desktop screen.
Industry Overview Applied Examples FAQ’s Take Action!

FAQs and Wrap-Up


Industry Overview Applied Examples FAQ’s Take Action!

?
Common Questions

You might also be wondering


❏ What are the outcomes of your students
for this field?
❏ How do I show my work to a potential
employer?
❏ Is this course entirely online?
❏ What should I do from here?
Industry Overview Applied Examples FAQ’s Take Action!

Take the First Step


to A New Career
Anyone who’s driven to change their future and achieve a
high-earning career is able to enter the world’s next
workforce. We’ll be by your side as you build the skills
you need, with personal mentorship and an active, online
community of students and educators.

Expand your career opportunities by breaking into tech.


Chat with an admissions rep and we’ll help you find the
perfect fit.

Start Free Access

You might also like