Hello!

Design is important
The bigger picture..
DICT VC 2 Free Webinar • June 17, 2020 • 2:00PM

Design an App or Website

Using Figma for UI/UX
Dudui Arcallana @duduimendoza
IT Instructor • Web, Design & ICT Team @ Samar State University
Freelance Web & Graphic Designer
DICT DigitalJobsPH Catbalogan City 2018 Medalist
DICT DigitalJobsPH Catbalogan City 2019 Resource Person
What you'll learn
This webinar will focus on a short introduction to User Experience
(UX) and its importance to Designing App or Web using Figma.

- Importance of User Experience (UX)

- Figma Walk-through
- Designing and Prototyping an App or Website using Figma
Prerequisites
- Laptop (high-end is not required)
- Internet Connection (Because Figma is Cloud Based)
- Basic knowledge in graphic design. (not required)
3 Things:

UX
Design Thinking
Design Sprint
User Experience (UX) Design?
User experience (UX) design is the process design teams use to
create products that provide meaningful and relevant experiences to
users. This involves the design of the entire process of acquiring
and integrating the product, including aspects of branding, design,
usability and function.
https://www.interaction-design.org/literature/topics/ux-design
Design Thinking
“Design thinking is a human-centered approach to innovation that
draws from the designer’s toolkit to integrate the needs of people,
the possibilities of technology, and the requirements for business
success.”

— Tim Brown, President and CEO, IDEO

Design Thinking
Design Sprint
“The sprint is a five-day process for answering critical business
questions through design, prototyping, and testing ideas with
customers.”

-Jake Knapp, Author of SPRINT and one of the inventors of the

Design Sprint
Successful Products
Design Sprint is Invented by Google
UX?
Design Thinking?
Design Sprint?
UX -> Design Thinking -> Design Sprint
Design thinking is a framework, a methodology of creating the best
possible user experience. In that sense UX design is a building
process when the design thinking is a hammer which comes with the
handbook (design sprint) how to use it efficiently.
User Interface (UI) Design
User Interface (UI) design is the process of making interfaces in
software or computerized devices with a focus on looks or style.
Designers aim to create designs users will find easy to use and
pleasurable. UI design typically refers to graphical user interfaces but
also includes others, such as voice-controlled ones.
https://www.interaction-design.org/literature/topics/ui-design
This is the reason why User Experience
(UX) Design and Prototyping is very
important skill to designers and even to
developers/engineers.
The designer-developer handoff of the
project will be smooth if everything is
designed/prototyped first and tested by
actual users.
You should not start the UI if..
1. You did not conduct a User Experience (UX) Research.
2. Don’t know the problem you are about to solve.
3. Don’t know the target users.
4. Don’t have Brand Guidelines / Strategy & UI Style Guide
5. Wireframe
What is Figma?
Figma is a cloud-based design and prototyping tool for digital
projects. It’s made so that users can collaborate on projects and
work pretty much anywhere.
https://designshack.net/articles/software/what-is-figma-intro/
Figma Pricing
Companies that use Figma
Jobs using Figma
- Web Designer - Graphic Designer
- Product Designer - Information Architech
- Identity Designer / Branding - Usability Analyst
Professionals - UX Researcher
- UX Designer
- UI Designer
- Visual Designer
- Illustrator
- Interaction Designer
Use Cases
- UI Design - Design Systems
- UX Design - Brand Guidelines
- Prototyping - Product Design
- Wire-framing - Illustration
- Web Design - Landing Page Design
- Brainstorming - Graphic Design
- Templates - Remote Design
- Brand Guidelines
 https://www.creative-tim.com/blog/web-design/adobe-xd-vs-sketch-figma-invision/

https://www.creative-tim.com/blog/web-design/adobe-xd-vs-sketch-figma-invision/
Demo Time!
Resources
- https://www.figma.com/templates/
- https://www.figma.com/education/
- Figma YouTube Channel: Click here.
Resources
Resources
Resources
Resources
Resources
Resources
A tool is just as tool.
What's more important is it gets the problem solved.
"Design is intelligence made visible."
- Alina Wheeler, Author
DICT VC 2 Free Webinar • June 17, 2020 • 2:00PM

Thank you!

Dudui Arcallana @duduimendoza

IT Instructor • Web, Design & ICT Team @ Samar State University
Freelance Web & Graphic Designer
DICT DigitalJobsPH Catbalogan City 2018 Medalist
DICT DigitalJobsPH Catbalogan City 2019 Resource Person