Dudui Mendoza PPT UI UX Figma [PDF]

Citation preview

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 - Product Designer - Identity Designer / Branding Professionals - UX Designer - UI Designer - Visual Designer - Illustrator - Interaction Designer



- Graphic Designer - Information Architech - Usability Analyst - UX Researcher



Use Cases - UI Design - UX Design - Prototyping - Wire-framing - Web Design - Brainstorming - Templates - Brand Guidelines



- Design Systems - Brand Guidelines - Product Design - Illustration - Landing Page Design - Graphic Design - Remote Design



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