Learn
Learn Links and Buttons
Skeuomorphism and Flat Design

Buttons are another fundamental element of user interaction and navigation. They are called ‘buttons’ because they are often modeled on the appearance and behavior of real-life buttons. The concept of UI elements that replicate or imitate real-life counterparts is known as skeuomorphism.

In design, skeuomorphism is helpful for lowering the learning curve for users. If users can draw a metaphor between a familiar real-life object and an interface element, they are more likely to know how to use it without training. In the example of the button, if a web button appears similar to a real-life button on a physical interface, users can reliably figure out that the way to interact with the button is to press it.

Flat design is an alternative approach to skeuomorphism which embraces the fact that computer interfaces do not necessarily need to model real-life interfaces. As users grow more familiar with digital displays and interfaces, designers have felt less need to model physical interactions and instead rely on other signifiers to indicate interactive elements. To generalize, flat design uses simplicity and lack of clutter for its UI elements.

Instructions

1.

There are two contrasting buttons in the workspace. Interact with them to see how their styling changes (they won’t actually execute any actions, just change appearance). You can examine their styles in style.css if you are interested. Move on to the next exercise to implement some of these styles yourself.

Folder Icon

Sign up to start coding

Already have an account?