Product Design Lessons
Creative Direction | Lesson #4
How to Apply Skeuminimalism
Learn how to use skeumorphism to emphasize parts of a page that matter most.
1. Remove every image from the site.
RemoveRemove images after you back up your website’s files and database. (Safety first, you know.) Take out the photos, icons, textures, background images, etc. No JPGs, no PNGs, SVGs, videos. If it uses <img> or { background }, either replace them with an appropriate flat color or remove them altogether.
It’s OK to let bits of text — like “get involved, get moving” — overlap areas of color. At this point we want usable, not beautiful.
Changing images to flat colors shows how essential the art was. And that’s a key point: We appreciate what images contribute when they’re gone. We’ve lost grit. We’ve lost motion. It’s the motion that matters — we want people to sign up and race. Keep that in mind …
2. Bring back images that matter.
So the page looks weird. That’s OK. Here’s the key — bring back one image at a time until users can navigate the site and make sense of its content.
Replace the main art. Hold it — that sense of motion returns after only one image. The rest of the page is static, but let’s resist adding more.
We could argue the "road grit" theme is important, but motion trumps that. The site’s about getting people to sign up and run. The minimum example also bumps up the contrast with a pure white background.
3. Base your decisions on context.
Once you’ve reached a level of “good enough,” re-introduce visuals that return the site’s character.
- Start with flat colors. If that works, move on.
- If not, try a monochromatic image. If that works, move on.
- Use colorful images only when you want to highlight key points on each page.
Finally, we experiment with the “flat” design.
Version 1 goes even simpler, organizing three sections with background color. The calls to action are practically their own page. Can’t miss ’em now.
Version 2’s bold, white “5k run” really pops, giving users a place to start. It helps that the photo’s red tones blend into the background. Low contrast is not necessarily low saturation.
Version 3 might a little too far. The extra photos give visual interest but don’t tell users anything new. We saw people running at the top. OK. Got it. If you add photos or textures, make sure each one contributes something new.
Version 3 also lets the hero image step out of its red box. The result: Better integration all around. Sudden background changes create boundaries. That’s great for organizing, but remember we want things to flow.
One more thing. After simplifying the calls to action, we noticed they were out of order. Oops. Version 3 puts calls in the same order people should act — and uses the original teasers’ “motion” graphics to emphasize moving from one step to the next.
And that’s the heart of skeuminimalism. It’s not flat for flat’s sake. It’s using imagery to your advantage.
Next Steps
Read more about the idea behind skeuminimalism.
About the instructor
Ben Gremillion is a Design Writer at ZURB. He started his career in newspaper and magazine design, saw a digital future, and learned HTML in short order. He facilitates the ZURB training courses.
Product Design Lessons, Direct to Your Inbox
We're just getting started, so sign up and we'll keep you in the know with our product design lessons. No spam here.
