SlideShare a Scribd company logo
1 of 15
Download to read offline
Web Campaign Session - 3
Intro to Design on Figma
Nikhil Agarwal - IMT201
Murali Jayam - IMT2020
What is Design?
Design is a process of creating a plan or solution for a product or system
to meet certain requirements or to achieve specific objectives
It involves conceptualising,planning,and producing a visual
representation or a working prototype of a product, system, or structure,
taking into consideration its form, function, and user experience.
Design can be applied to various fields such as architecture,graphic
design,industrial design,interior design,web design, and many more.
Good Design Bad Design
What is UI and UX ?
UI design refers to the visual and interactive elements of a product. The
focus of UI design is to make the product aesthetically pleasing and easy
to use.


UX design, on the other hand, refers to the overall experience. UX design
encompasses various aspects of a product, such as its functionality,
accessibility,usability,and emotion, and aims to create a seamless and
satisfying experience for the user.
Design Process
5 steps of UX design process
Empathise, Define and Ideat
Build Wireframes and Low-Fi Prototype
Conduct UX research and test early concept
Create Hi-Fi design and Prototyp
Implementatio
Evaluation
DesignSystem
Material Design
Build beautiful, usable products faster.
Material Design is an adaptable syste...
m3.material.io
https://atlassian.design/
DesignSystem
Typography
There are five basic classifications of typefaces:
Display
Serif Sans Serif Script
Monospaced Display
Colors
Hex value
RGB
How to get Hex values using colour
picker too
Adobe tool to check contrast and
visibility
https:​
​
/​
/color​
.adobe​
.com​
/create​
/color​
-contrast​
-
analyzer
Wireframes
what are wireframe
Example
Figma
Oven Kraft Pizza
View
Prototyping
what is prototypin
Example
Time for some Figma
Example Hi-Fi Designs
Figma
Workezz. (Copy)
View
Figma
Swasthya
View

More Related Content

Similar to DesignSessionGDSC.pdf

User Experience Design - MIT ID Innovation
User Experience Design - MIT ID InnovationUser Experience Design - MIT ID Innovation
User Experience Design - MIT ID InnovationPankaj Deshpande
 
UX Design Process - MIT ID Innovation
UX Design Process - MIT ID InnovationUX Design Process - MIT ID Innovation
UX Design Process - MIT ID InnovationPankaj Deshpande
 
What are the Key Features of UI UX Technology? - Croma Campus
What are the Key Features of UI UX Technology? - Croma CampusWhat are the Key Features of UI UX Technology? - Croma Campus
What are the Key Features of UI UX Technology? - Croma CampusAshu Pal
 
Mobile App UIUX Services in India - Pixxelu Digital Technology.pptx
Mobile App UIUX Services in India - Pixxelu Digital Technology.pptxMobile App UIUX Services in India - Pixxelu Digital Technology.pptx
Mobile App UIUX Services in India - Pixxelu Digital Technology.pptxPixxelu Digital Technology
 
User-Interface-and-User-E.9279038.powerpoint.pptx
User-Interface-and-User-E.9279038.powerpoint.pptxUser-Interface-and-User-E.9279038.powerpoint.pptx
User-Interface-and-User-E.9279038.powerpoint.pptxSHYAMSUNDAR334390
 
UI and UX design
UI and UX design UI and UX design
UI and UX design sketchart2
 
UX UI Design_final - Copy - Copy.pptx
UX UI Design_final - Copy - Copy.pptxUX UI Design_final - Copy - Copy.pptx
UX UI Design_final - Copy - Copy.pptxQasimButt35
 
Custom UI/UX Design Services
Custom UI/UX Design ServicesCustom UI/UX Design Services
Custom UI/UX Design ServicesChetu
 
What Is Anchor Text Everything You Need to Know.pptx
What Is Anchor Text Everything You Need to Know.pptxWhat Is Anchor Text Everything You Need to Know.pptx
What Is Anchor Text Everything You Need to Know.pptxTurboAnchor
 
What Is User Interface Design And Role Of A Ui Designer?
What Is User Interface Design And Role Of A Ui Designer?What Is User Interface Design And Role Of A Ui Designer?
What Is User Interface Design And Role Of A Ui Designer?ElizabethDavis701253
 
ui ux design course in hyderabad........
ui ux design course in hyderabad........ui ux design course in hyderabad........
ui ux design course in hyderabad........sowmyavibhin
 
ui ux design course in hyderabad for best future
ui ux design course in hyderabad for best futureui ux design course in hyderabad for best future
ui ux design course in hyderabad for best futureaparna3zen
 
ui ux design course in hyderabad........
ui ux design course in hyderabad........ui ux design course in hyderabad........
ui ux design course in hyderabad........sowmyavibhin
 
ui ux design courses and training in hyderabad
ui ux design courses and training in hyderabadui ux design courses and training in hyderabad
ui ux design courses and training in hyderabadmadhupriya3zen
 
Uiux interact stt nf
Uiux interact   stt nfUiux interact   stt nf
Uiux interact stt nfFikiAlamsyah
 
Elements of User Experience - MIT ID Innovation
Elements of User Experience - MIT ID InnovationElements of User Experience - MIT ID Innovation
Elements of User Experience - MIT ID InnovationPankaj Deshpande
 
What is the difference between UI and UX design_.pptx
What is the difference between UI and UX design_.pptxWhat is the difference between UI and UX design_.pptx
What is the difference between UI and UX design_.pptxTandrimaTithi
 

Similar to DesignSessionGDSC.pdf (20)

User Experience Design - MIT ID Innovation
User Experience Design - MIT ID InnovationUser Experience Design - MIT ID Innovation
User Experience Design - MIT ID Innovation
 
UX Design Process - MIT ID Innovation
UX Design Process - MIT ID InnovationUX Design Process - MIT ID Innovation
UX Design Process - MIT ID Innovation
 
The Fundamentals of UI and UX Design - Cuneiform
The Fundamentals of UI and UX Design - CuneiformThe Fundamentals of UI and UX Design - Cuneiform
The Fundamentals of UI and UX Design - Cuneiform
 
What are the Key Features of UI UX Technology? - Croma Campus
What are the Key Features of UI UX Technology? - Croma CampusWhat are the Key Features of UI UX Technology? - Croma Campus
What are the Key Features of UI UX Technology? - Croma Campus
 
UI development company
UI development companyUI development company
UI development company
 
Mobile App UIUX Services in India - Pixxelu Digital Technology.pptx
Mobile App UIUX Services in India - Pixxelu Digital Technology.pptxMobile App UIUX Services in India - Pixxelu Digital Technology.pptx
Mobile App UIUX Services in India - Pixxelu Digital Technology.pptx
 
User-Interface-and-User-E.9279038.powerpoint.pptx
User-Interface-and-User-E.9279038.powerpoint.pptxUser-Interface-and-User-E.9279038.powerpoint.pptx
User-Interface-and-User-E.9279038.powerpoint.pptx
 
Desain Grafis 4 - UI/UX
Desain Grafis 4 - UI/UXDesain Grafis 4 - UI/UX
Desain Grafis 4 - UI/UX
 
UI and UX design
UI and UX design UI and UX design
UI and UX design
 
UX UI Design_final - Copy - Copy.pptx
UX UI Design_final - Copy - Copy.pptxUX UI Design_final - Copy - Copy.pptx
UX UI Design_final - Copy - Copy.pptx
 
Custom UI/UX Design Services
Custom UI/UX Design ServicesCustom UI/UX Design Services
Custom UI/UX Design Services
 
What Is Anchor Text Everything You Need to Know.pptx
What Is Anchor Text Everything You Need to Know.pptxWhat Is Anchor Text Everything You Need to Know.pptx
What Is Anchor Text Everything You Need to Know.pptx
 
What Is User Interface Design And Role Of A Ui Designer?
What Is User Interface Design And Role Of A Ui Designer?What Is User Interface Design And Role Of A Ui Designer?
What Is User Interface Design And Role Of A Ui Designer?
 
ui ux design course in hyderabad........
ui ux design course in hyderabad........ui ux design course in hyderabad........
ui ux design course in hyderabad........
 
ui ux design course in hyderabad for best future
ui ux design course in hyderabad for best futureui ux design course in hyderabad for best future
ui ux design course in hyderabad for best future
 
ui ux design course in hyderabad........
ui ux design course in hyderabad........ui ux design course in hyderabad........
ui ux design course in hyderabad........
 
ui ux design courses and training in hyderabad
ui ux design courses and training in hyderabadui ux design courses and training in hyderabad
ui ux design courses and training in hyderabad
 
Uiux interact stt nf
Uiux interact   stt nfUiux interact   stt nf
Uiux interact stt nf
 
Elements of User Experience - MIT ID Innovation
Elements of User Experience - MIT ID InnovationElements of User Experience - MIT ID Innovation
Elements of User Experience - MIT ID Innovation
 
What is the difference between UI and UX design_.pptx
What is the difference between UI and UX design_.pptxWhat is the difference between UI and UX design_.pptx
What is the difference between UI and UX design_.pptx
 

Recently uploaded

Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactdawncurless
 
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...PsychoTech Services
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)eniolaolutunde
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsTechSoup
 
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...Sapna Thakur
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDThiyagu K
 
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingfourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingTeacherCyreneCayanan
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfagholdier
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeThiyagu K
 
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Disha Kariya
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
social pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajansocial pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajanpragatimahajan3
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdfSoniaTolstoy
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAssociation for Project Management
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhikauryashika82
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...christianmathematics
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13Steve Thomason
 

Recently uploaded (20)

Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
 
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingfourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writing
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..
 
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Advance Mobile Application Development class 07
Advance Mobile Application Development class 07Advance Mobile Application Development class 07
Advance Mobile Application Development class 07
 
social pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajansocial pharmacy d-pharm 1st year by Pragati K. Mahajan
social pharmacy d-pharm 1st year by Pragati K. Mahajan
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13
 

DesignSessionGDSC.pdf

  • 1. Web Campaign Session - 3 Intro to Design on Figma Nikhil Agarwal - IMT201 Murali Jayam - IMT2020
  • 2. What is Design? Design is a process of creating a plan or solution for a product or system to meet certain requirements or to achieve specific objectives It involves conceptualising,planning,and producing a visual representation or a working prototype of a product, system, or structure, taking into consideration its form, function, and user experience. Design can be applied to various fields such as architecture,graphic design,industrial design,interior design,web design, and many more.
  • 4. What is UI and UX ? UI design refers to the visual and interactive elements of a product. The focus of UI design is to make the product aesthetically pleasing and easy to use. UX design, on the other hand, refers to the overall experience. UX design encompasses various aspects of a product, such as its functionality, accessibility,usability,and emotion, and aims to create a seamless and satisfying experience for the user.
  • 5.
  • 6. Design Process 5 steps of UX design process Empathise, Define and Ideat Build Wireframes and Low-Fi Prototype Conduct UX research and test early concept Create Hi-Fi design and Prototyp Implementatio Evaluation
  • 8. Material Design Build beautiful, usable products faster. Material Design is an adaptable syste... m3.material.io https://atlassian.design/
  • 10. Typography There are five basic classifications of typefaces: Display Serif Sans Serif Script Monospaced Display
  • 11. Colors Hex value RGB How to get Hex values using colour picker too Adobe tool to check contrast and visibility https:​ ​ /​ /color​ .adobe​ .com​ /create​ /color​ -contrast​ - analyzer
  • 14. Time for some Figma
  • 15. Example Hi-Fi Designs Figma Workezz. (Copy) View Figma Swasthya View