‘Bottom music player dashboard’ — Concept by Leo Leung

Can You Code This UI Concept?

Five (awesome) UI concepts and their CodePen implementation.

UI concepts, gotta love them! They make us think outside the box, give us inspiration on the most uninspiring of days and, let’s be honest, they’re totally eye candy 🍭

Now the coolest part of having a community of both designers and developers at MaterialUp, is that when developers love a concept as much as we do … they code it! And we just love seeing concepts come to life and being able to play with them. The process really helps connect design and development, breaking down the idea of concepts being just “impossible”.

So we selected our 5 favorite Concepts-2-CodePen (just made that up but you get the gist now), and a little extra 😉 We hope you enjoy them!

** Important note: All of these concepts were implemented on CodePen, the (best) playground for the front end side of the web. A few years ago this probably wouldn’t have happened and we’re so glad CodePen simply exists! Kudos to their team!

1. Music Player

‘Bottom music player dashboard’ — Concept by Leo Leung

‘Material music player’ — Pen by Dirk-Jan Wassink

2. Personal Social Card

‘Personal Social Card’ — Concept by Christophe Kerebel

‘Material VCard’ — Pen by Rian Ariona

3. Compact Login

‘Compact Login’ — Concept by Boris Borisov

‘Material Compact Login’ — Pen by Yusuf Bakır

4. Replace

‘Replace’ — Concept by Zee Young

‘Pull Down to Refresh’ — Pen by Nikolay Talanov

5. Filter Menu

‘Filter Menu’ — Concept by Anton Aheichanka

‘Filter Menu’ — Pen by Arjun Amgain

Bonus: our very own MaterialUp Upvote Button!

‘Materialup Upvote Animation’ — Concept by Jan Kuijken

‘Vote up animation’ — Pen by Pixelass

MaterialUp

Discover quality Material Design concepts, pens & more on MaterialUp.com

This is Vol 1 of a UI exploration series — from design to code.

> > Vol 2 > >