SlideShare a Scribd company logo
Play
If you are a well experience designer then you probably have
heard about the popular SKEUOMOPHISM trend back in early
days, well they are back now with “NEUMOPHISM” (New +
Skeuomophism).
Neumorphism or Soft UI will going to be the biggest user
interface trend in year 2020. Here you will learn how to design
it in 3 simple steps using any software Figma, Illustrator, Pho-
toshop, Adobe XD, or Sketch .
01/05
#FFFFFF #E0E5EC #A3B1C6
02/05
Dimension:
Width: 270px | Height: 160px
Corner radius: 30
Background color
#FFFFFF #E0E5EC #A3B1C6
03/05
White rectangle: 10 | Opacity: 100%
Grey rectangle: 10 | Opacity: 100%
04/05
Place all rectangles accordingly:
Top: Background color rectangle
Middle: White rectangle
Last: Grey rectangle
Aligns all rectangles vertically & horizontally centered.
Move grey rectangle
x: 6, y:6
Move white rectangle
x: -6, y: -6
Follow to learn more about UI and UX design.
share it
comment
below
Let me know your thoughts and what you would like to
learn next?
05/05

More Related Content

Similar to How to design Neumorphism UI?

Visual design
Visual designVisual design
Visual design
Vera Kovaleva
 
Logo Guidelines KKCedevita_6
Logo Guidelines KKCedevita_6Logo Guidelines KKCedevita_6
Logo Guidelines KKCedevita_6Arsen Solic
 
Causeway coast & Glens Heritage Trust
Causeway coast & Glens Heritage TrustCauseway coast & Glens Heritage Trust
Causeway coast & Glens Heritage Trust
charmaine22
 
Effective use of power point as a presentation tool
Effective use of power point as a presentation toolEffective use of power point as a presentation tool
Effective use of power point as a presentation toolKathlene Miel Casanova
 
Visual Design for Web Sites and Web Applications
Visual Design for Web Sites and Web ApplicationsVisual Design for Web Sites and Web Applications
Visual Design for Web Sites and Web Applications
Jonathan Follett
 
Developing Windows 8 or how to redesign a religion
Developing Windows 8 or how to redesign a religionDeveloping Windows 8 or how to redesign a religion
Developing Windows 8 or how to redesign a religion
Alius Petraška
 
AIESEC digital guidelines
AIESEC digital guidelinesAIESEC digital guidelines
AIESEC digital guidelines
Jason Bholanauth
 
AIESEC digital guidelines [ AIESEC in Spain ]
AIESEC digital guidelines [ AIESEC in Spain ]AIESEC digital guidelines [ AIESEC in Spain ]
AIESEC digital guidelines [ AIESEC in Spain ]
Mohmmed El Sonbaty
 
Pixel Perfect Precision (how to do your design clean and neat)
Pixel Perfect Precision (how to do your design clean and neat)Pixel Perfect Precision (how to do your design clean and neat)
Pixel Perfect Precision (how to do your design clean and neat)Mitya Voskresensky
 
How to be Pixel Perfect (Replaces Making Accessibility Accessible) - Matt Gy...
How to be Pixel Perfect  (Replaces Making Accessibility Accessible) - Matt Gy...How to be Pixel Perfect  (Replaces Making Accessibility Accessible) - Matt Gy...
How to be Pixel Perfect (Replaces Making Accessibility Accessible) - Matt Gy...City University London
 
Fontech Brand Guidelines
Fontech Brand GuidelinesFontech Brand Guidelines
Fontech Brand Guidelines
María Rodríguez Juez
 
TC systems Branding guidelines
TC systems Branding guidelines TC systems Branding guidelines
TC systems Branding guidelines
Joe Nguyen
 
Effective use Of Powerpoint
Effective use Of PowerpointEffective use Of Powerpoint
Effective use Of Powerpoint
Merries Mapindan
 
Effective use Of Powerpoint
Effective use Of PowerpointEffective use Of Powerpoint
Effective use Of PowerpointMerries Mapindan
 
Designing an effective presentation
Designing an effective presentationDesigning an effective presentation
Designing an effective presentation
Kapil Sinha
 
AIESEC Digital Guidelines.pdf
AIESEC Digital Guidelines.pdfAIESEC Digital Guidelines.pdf
AIESEC Digital Guidelines.pdfMarcin Porycki
 
Aiesec digital guidelines
Aiesec digital guidelinesAiesec digital guidelines
Aiesec digital guidelines
Marcin Porycki
 
AIESEC Digital Guidelines.pdf
AIESEC Digital Guidelines.pdfAIESEC Digital Guidelines.pdf
AIESEC Digital Guidelines.pdfMarcin Porycki
 

Similar to How to design Neumorphism UI? (20)

Visual design
Visual designVisual design
Visual design
 
Logo Guidelines KKCedevita_6
Logo Guidelines KKCedevita_6Logo Guidelines KKCedevita_6
Logo Guidelines KKCedevita_6
 
Causeway coast & Glens Heritage Trust
Causeway coast & Glens Heritage TrustCauseway coast & Glens Heritage Trust
Causeway coast & Glens Heritage Trust
 
Effective use of power point as a presentation tool
Effective use of power point as a presentation toolEffective use of power point as a presentation tool
Effective use of power point as a presentation tool
 
Visual Design for Web Sites and Web Applications
Visual Design for Web Sites and Web ApplicationsVisual Design for Web Sites and Web Applications
Visual Design for Web Sites and Web Applications
 
Visual Design
Visual DesignVisual Design
Visual Design
 
Developing Windows 8 or how to redesign a religion
Developing Windows 8 or how to redesign a religionDeveloping Windows 8 or how to redesign a religion
Developing Windows 8 or how to redesign a religion
 
AIESEC digital guidelines
AIESEC digital guidelinesAIESEC digital guidelines
AIESEC digital guidelines
 
AIESEC digital guidelines [ AIESEC in Spain ]
AIESEC digital guidelines [ AIESEC in Spain ]AIESEC digital guidelines [ AIESEC in Spain ]
AIESEC digital guidelines [ AIESEC in Spain ]
 
Pixel Perfect Precision (how to do your design clean and neat)
Pixel Perfect Precision (how to do your design clean and neat)Pixel Perfect Precision (how to do your design clean and neat)
Pixel Perfect Precision (how to do your design clean and neat)
 
How to be Pixel Perfect (Replaces Making Accessibility Accessible) - Matt Gy...
How to be Pixel Perfect  (Replaces Making Accessibility Accessible) - Matt Gy...How to be Pixel Perfect  (Replaces Making Accessibility Accessible) - Matt Gy...
How to be Pixel Perfect (Replaces Making Accessibility Accessible) - Matt Gy...
 
Ppp™
Ppp™Ppp™
Ppp™
 
Fontech Brand Guidelines
Fontech Brand GuidelinesFontech Brand Guidelines
Fontech Brand Guidelines
 
TC systems Branding guidelines
TC systems Branding guidelines TC systems Branding guidelines
TC systems Branding guidelines
 
Effective use Of Powerpoint
Effective use Of PowerpointEffective use Of Powerpoint
Effective use Of Powerpoint
 
Effective use Of Powerpoint
Effective use Of PowerpointEffective use Of Powerpoint
Effective use Of Powerpoint
 
Designing an effective presentation
Designing an effective presentationDesigning an effective presentation
Designing an effective presentation
 
AIESEC Digital Guidelines.pdf
AIESEC Digital Guidelines.pdfAIESEC Digital Guidelines.pdf
AIESEC Digital Guidelines.pdf
 
Aiesec digital guidelines
Aiesec digital guidelinesAiesec digital guidelines
Aiesec digital guidelines
 
AIESEC Digital Guidelines.pdf
AIESEC Digital Guidelines.pdfAIESEC Digital Guidelines.pdf
AIESEC Digital Guidelines.pdf
 

Recently uploaded

7 Alternatives to Bullet Points in PowerPoint
7 Alternatives to Bullet Points in PowerPoint7 Alternatives to Bullet Points in PowerPoint
7 Alternatives to Bullet Points in PowerPoint
Alvis Oh
 
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdfPORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
fabianavillanib
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
7sd8fier
 
Exploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdfExploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdf
fastfixgaragedoor
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
garcese
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
ameli25062005
 
White wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva TschoppWhite wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva Tschopp
Mansi Shah
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
h7j5io0
 
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
h7j5io0
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
ameli25062005
 
Common Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid themCommon Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid them
madhavlakhanpal29
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Mansi Shah
 
Transforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting ProfitabilityTransforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting Profitability
aaryangarg12
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
cy0krjxt
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
projectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdfprojectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdf
farazahmadas6
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
taqyed
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
9a93xvy
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
9a93xvy
 

Recently uploaded (20)

7 Alternatives to Bullet Points in PowerPoint
7 Alternatives to Bullet Points in PowerPoint7 Alternatives to Bullet Points in PowerPoint
7 Alternatives to Bullet Points in PowerPoint
 
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdfPORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
 
Exploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdfExploring the Future of Smart Garages.pdf
Exploring the Future of Smart Garages.pdf
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
 
White wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva TschoppWhite wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva Tschopp
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
 
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
 
Common Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid themCommon Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid them
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
 
Transforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting ProfitabilityTransforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting Profitability
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
projectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdfprojectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdf
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
 

How to design Neumorphism UI?

  • 2. If you are a well experience designer then you probably have heard about the popular SKEUOMOPHISM trend back in early days, well they are back now with “NEUMOPHISM” (New + Skeuomophism). Neumorphism or Soft UI will going to be the biggest user interface trend in year 2020. Here you will learn how to design it in 3 simple steps using any software Figma, Illustrator, Pho- toshop, Adobe XD, or Sketch . 01/05
  • 3. #FFFFFF #E0E5EC #A3B1C6 02/05 Dimension: Width: 270px | Height: 160px Corner radius: 30 Background color
  • 4. #FFFFFF #E0E5EC #A3B1C6 03/05 White rectangle: 10 | Opacity: 100% Grey rectangle: 10 | Opacity: 100%
  • 5. 04/05 Place all rectangles accordingly: Top: Background color rectangle Middle: White rectangle Last: Grey rectangle Aligns all rectangles vertically & horizontally centered. Move grey rectangle x: 6, y:6 Move white rectangle x: -6, y: -6
  • 6. Follow to learn more about UI and UX design. share it comment below Let me know your thoughts and what you would like to learn next? 05/05