18 Free PSD Skeuomorphic Buttons for Mobile and Web

Free buttons to download for mobile and web

 

Skeuomorphic design plays a great role in deign of mobile and web, especially in button design.
“In a skeuomorph what you see is a design that is based on a familiar physical object, and often on a defunct one.”  Source

Skeuomorphing is very popular and has been used widely in mobile and web recently. Specially in mobile devices where we use finger and gesture often. This try to create a connection to the real version of the designed button.

Below I want to review 18 skeuomorphed buttons and the emotional role they play in user’s decision.

PSD files are also provided to download.

When it comes to design buttons for mobile devices we need to pay attention to:

  • The touchable size should not be smaller than 40 pixels. So big is good.
  •  Not all skeuomorphed designs are strong. We need to make sure about the connection they make to the real object and our goal.

Use of Light in Skeuomoric Buttons:

In the following samples we see how using light in a button reminds us of the neon signs in real life .  It grabs our attention very quickly. Well usage of this effect makes the action clear and simple for users.

Free buttons for mobile and web

Download PSD files 

Push and light:

This digital copy of the real Off /On button and green light is so clear that if uses in correct situation no one will miss the action.

Free PSD buttons for mobile and web

 

Download PSD

 

The use of light around the below button reminds us again of the neon light in the real stores and advertising.

Free buttons for mobile and web

Download PSD

Another creative design for a button using light:

free buttons for mobile and web

Download PSD

In the below example the light effect is used more as an indicator of scales than as an attention grabber:

Free buttons for mobile and web

Download PSD

Below button is an excellent use of gradient and ligt effect together with the real representation of the button. Well use of skeuomorphic design that is very effective:

Free buttons for mobile and web

Download PSD

Switch, Push and Slide Buttons:

In mobile devices we use finger and gesture and that is why skeuomorphic design is more useful here than web, where we use mouse instead .

The ON / OFF button as switch, slide or push button, encourages and reminds users the same action they take in real life.  They can easily respond to it.

However, you need to be aware that OFF / ON or YES/ NO should have correct correlation to the subject and result you have in mind and make sure it matches with this action. If you are not sure about using switch or slide key,  it is better to use normal push buttons.

The pastel color of the above buttons acts very close to the lighting effect even if it is not lighting effect.

 

Free buttons for mobile and web

 

Download PSD

The slider you see below uses light and 100% copy of the real object:

 

Free button  psd for mobile and web

Download PSD

 

Free PSD buttons for mobile and web

Download PSD 

 

The standard search button, radio button, check marks and drop downs here can be useful in web and mobile devices both:

Free buttons for mobile and web

 

 Download PSD

 

Push Buttons and Different Skeuomorphic Effects:

Please note how changing the perspective and texture of this button makes it very unique.  The emotional effect on user is so powerful. It is very tempting to push it and see what happens next.

Free pas buttons for mobile and web

Download PSD

The push effect in this design results in opening a small door. Very creative design.

Free buttons for mobile and web

 

Download PSD

When a visual design reminds us of an act or gesture that we are used to it in real life, it facilitates the action and also save explanation for the act.

The emotional result and temptation of tearing off this ticket is much more effective than using simple “BUY NOW’ button.

Free psd buttons for mobile and web

Download PSD

Another great example of emotional skeuomorphic design. I am sure you feel the elasticity of these buttons. Designer uses our touch and feel of texture memory very effectively and encourage users to push.

Free psd buttons to download for mobile

 Download PSD

Big and Large

These two buttons design are good examples for placing large and big buttons either for mobile or web.  A simple gradient and shadow design is not a new design but still effective.

Free psd buttons for mobile and web

 

Download PSD

Floating on a blurry background pushes the buttons to the foreground and the first visual level.

Free psd buttons for mobile and web

 

Download PSD

Big and simple design with the white background and nice shadow can be used in any clean design:

Free psd buttons to download

Download PSD

Large simple “Add to Cart” buttons for mobile and web :

Free buttons for web and mobile

 

Download PSD

Conclusion:

If designers use skeuomorphic design correctly, it can be very helpful for engaging engaging emotional and habitual memories in users interaction with the site.

It is obvious this is not the only way for a successful button deign, there are other abstract and non-skeuomorphic approaches that are being used with impressive result.

We will talk about these designs in future posts.

 

 

 

 

 

About the author:

Saya is a web and graphic designer, fine artist and a bit more. Follow her on Twitter / Facebook.

2 comments on “18 Free PSD Skeuomorphic Buttons for Mobile and Web

Leave a Reply

Your email address will not be published. Required fields are marked *

*

nine − = 7

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>