CodePen has become the playground for developers. The sandbox where you can build whatever your imagination fancies. Practical things, experimental concepts — it’s a treasure chest, bound to fuel your ideas. We’ve done some digging around and found some interesting UI demos and concepts for you to indulge in and build upon: dialog and modal windows, signup and login screens, navigation and menus, sliders and toggles. Small bits of delight that make the user’s interaction with a website or app more pleasant. Enjoy!
Further Reading on SmashingMag: Link
- The Beauty Of Imperfection In Interface Design1
- User Interface Design – 12 Useful Techniques2
- Copy If You Can: Improving Your UI Design Skills With Copywork3
- Material Design Icons, Goodies And Starter Kits4
- Designing Card-Based User Interfaces5
Dialog & Modal Windows Link
Flappy Dialog Link
Alex Wright’s Flappy Dialog96 is based on a Dribbble concept by Peter Main7. The dialog window features two flaps. Once a user hovers over one of them, it starts moving, and as soon as he has clicked, the entire window flips to the front and disappears. An interesting and fun way to make a window and its content more prominent, especially for routine interactions like “Yes” and “No” which users usually don’t pay a lot of attention to.
Modal Window Destroy Concept Link
The question whether this is something you might want to use in an actual project or not could give room to a lot of discussions, but the idea is simply impressive: LegoMushroom’s Modal Window Destroy Concept1311. Once a user closes the modal window, it bursts into pieces. A surprising effect.
Material Design Modal Link
The key part of Ettrics’ Material Design Modal1614 is the animation that happens when you click the button that makes the modal expand. It seems the button itself is expanding, but it’s actually a dynamically added
<div> that gets appended to the button and expands to the size of the modal. As soon as the modal becomes visible, the
<div> is hidden. Clever.
Signup & Login Link
Interactive Signup Form Link
Riccardo Pasianotto’s take on the signup form17 is innovative and anything but boring or tedious for the user. He doesn’t confront them with the complete form from the very beginning but asks for the necessary information in small, digestible chunks. The form essentially consists of three cards which are stacked on top of another. As soon as you start typing, the small icon next to the form field becomes a button with an upwards pointing arrow. Once clicked, the form field flips and presents the next field. A beautiful and exciting interaction.
CSS-Only Interactive Form Link
Emmanuel Pilande’s interactive form demo21 is very sleek, not only visually but also in regards to the code — it was built entirely with CSS. Each form field is presented individually, as one long, red line accompanied by a field label and placeholder text. Pressing the Tab key leads to the next field. Elegant.
Material Signup Interaction Link
Srikant Shetty’s material signup interaction24 consists of three states — all of them designed around the “Sign Up” button — that blend into each other harmoniously. The signup button on the signup screen expands to the signup form; once the form is filled in and the “Done” button is clicked, the button transforms into a circle and floats to the bottom right corner of the profile screen where it is assigned a new role. A seamless interaction, coded to life by Kyle Lavery25.
Compact Login Link
The Compact Login30 by Boris Borisov unites login and register. A red “+” circle on the login screen hides the register form which, when clicked, expands to cover the login screen. Another nice effect: The look of the “Go” button changes from a very subtle light gray text on white background to bold red depending on the progress the user has made filling out the form. Andy Tran31 and Yusuf Bakir32 coded variations of the concept.
Material Design Text Input Link
A very lightweight text input36 demo comes from Ben Mildren. The placeholder tags in his form fields move up and change color on
input:focus. As soon as a user starts typing, they disappear completely. Clean and simple.
Navigation & Menu Link
Filter Menu Link
The Filter Menu39 hides its filter options behind the menu button, but not as you would expect it. Once clicked, the menu button transforms into a close button, that expands from the circle’s center to create an outer circle in which the filter options are arranged. Sleek and beautiful.
Pure CSS Drop Down Menu Link
CSS Gooey Menu Link
CSS Inbox User Interface Link
Another example of pure CSS goodness is Jamie Coulter’s CSS Inbox User Interface5351. Once a user clicks on a message, it slides open to the right to display the entire email; the preview in the original screen is replaced by a “Now Reading” note. A nice effect that could be adapted to other navigation purposes, a full-width navigation, for example.
Responsive Menu App Link
The Responsive Menu App5654 was designed as an actual menu to order drinks at a bar, but it also provides some interesting ideas that could be transfered to an app menu or to e-commerce. In its default state, all menu options occupy the same space. When hovering over one item, the item expands, revealing more information about it. As soon as it gets clicked, it expands further to fill the entire screen, then a footer slides into view from the bottom with the option to purchase the product.
Sliders & Toggles Link
Budget Slider Link
Pure CSS Flat Sliders Link
Ana Tudor’s flat sliders62 are made entirely of CSS and remind a bit of an analog thermometer. Simple yet stylish. Inspired by her demo are also Simon Goellner’s responsive sliders63. They come with a subtle growth effect on the active tick and display the number value on the needle.
Pure CSS Toggles Link
Rafael González’s Pure CSS Toggles6866 are different from the ones we are used to. His toggles consist of two squares, and instead of the known “switch” animation that slides from one side to another, his toggles change state by flipping like a book page, making 180-degree turns, or sliding from one side to the other like a caterpillar. Also notable is how Rafael used color to support the animations: One setting is blue, the other red, and when you switch from one to the other, the color gradually transitions from blue to red and red to blue respectively.
Fluid Switch Link
Pure CSS Day And Night Toggle Link
The CSS Day And Night Toggle75 is a cheerful take on visualizing AM and PM time. When set to AM, the toggle switch and its background show a sun with a blue sky, when switching to PM it transforms to a moon with a starry sky.
You’ve stumbled across an inspiring, innovative or delightful UI demo lately? Let us know in the comments below!
- 1 https://www.smashingmagazine.com/2017/03/beauty-imperfection-interface-design/
- 2 https://www.smashingmagazine.com/2009/01/12-useful-techniques-for-good-user-interface-design-in-web-applications/
- 3 https://www.smashingmagazine.com/2017/02/improving-ui-design-skills-copywork/
- 4 https://www.smashingmagazine.com/2015/07/material-design-icons-templates-tools/
- 5 https://www.smashingmagazine.com/2016/10/designing-card-based-user-interfaces/
- 6 http://codepen.io/akwright/pen/XJqLNv/
- 7 https://dribbble.com/shots/1946448-Flappy-Dialog
- 8 http://codepen.io/akwright/pen/XJqLNv/
- 9 http://codepen.io/akwright/pen/XJqLNv/
- 10 https://dribbble.com/shots/1946448-Flappy-Dialog
- 11 http://codepen.io/sol0mka/full/XJjLxe/
- 12 http://codepen.io/sol0mka/full/XJjLxe/
- 13 http://codepen.io/sol0mka/full/XJjLxe/
- 14 http://codepen.io/ettrics/pen/Jdjdzp
- 15 http://codepen.io/ettrics/pen/Jdjdzp
- 16 http://codepen.io/ettrics/pen/Jdjdzp
- 17 http://codepen.io/rkpasia/pen/LNEQod
- 18 http://codepen.io/rkpasia/pen/LNEQod
- 19 http://codepen.io/rkpasia/pen/LNEQod
- 20 https://dribbble.com/shots/2372516--5-Subscribe-Form
- 21 http://codepen.io/epilande/pen/eZJGpP
- 22 http://codepen.io/epilande/pen/eZJGpP
- 23 http://codepen.io/epilande/pen/eZJGpP
- 24 https://dribbble.com/shots/2379703-Material-Signup-Interaction
- 25 http://codepen.io/koenigsegg1/pen/WrrXzz
- 26 http://codepen.io/koenigsegg1/pen/WrrXzz
- 27 http://codepen.io/koenigsegg1/pen/WrrXzz
- 28 https://dribbble.com/shots/2379703-Material-Signup-Interaction
- 29 http://www.materialup.com/posts/material-signup-interaction
- 30 https://dribbble.com/shots/2145451--01-Compact-Login?list=users&offset=0
- 31 http://codepen.io/andytran/pen/RPBdgM
- 32 http://codepen.io/yusufbkr/pen/RPBQqg
- 33 https://dribbble.com/shots/2145451--01-Compact-Login?list=users&offset=0
- 34 https://dribbble.com/shots/2145451--01-Compact-Login?list=users&offset=0
- 35 http://www.materialup.com/posts/compact-login
- 36 http://codepen.io/mildrenben/pen/gbddEj
- 37 http://codepen.io/mildrenben/pen/gbddEj
- 38 http://codepen.io/mildrenben/pen/gbddEj
- 39 http://codepen.io/arjunamgain/pen/qdpWLL
- 40 http://codepen.io/arjunamgain/pen/qdpWLL
- 41 http://codepen.io/arjunamgain/pen/qdpWLL
- 42 https://dribbble.com/shots/1956586-Filter-Menu?list=searches&tag=material&offset=8
- 43 http://www.materialup.com/posts/filter-menu
- 44 http://codepen.io/jcoulterdesign/pen/qdWxEm
- 45 http://codepen.io/jcoulterdesign/pen/qdWxEm
- 46 http://codepen.io/jcoulterdesign/pen/qdWxEm
- 47 http://codepen.io/lbebber/pen/pvwZJp
- 48 https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/
- 49 http://codepen.io/lbebber/pen/pvwZJp
- 50 http://codepen.io/lbebber/pen/pvwZJp
- 51 http://codepen.io/jcoulterdesign/pen/GgGrQO
- 52 http://codepen.io/jcoulterdesign/pen/GgGrQO
- 53 http://codepen.io/jcoulterdesign/pen/GgGrQO
- 54 http://codepen.io/wbarlow/pen/NqLWXJ
- 55 http://codepen.io/wbarlow/pen/NqLWXJ
- 56 http://codepen.io/wbarlow/pen/NqLWXJ
- 57 https://dribbble.com/galshir
- 58 http://codepen.io/Hornebom/pen/ranmi
- 59 http://codepen.io/Hornebom/pen/ranmi
- 60 http://codepen.io/Hornebom/pen/ranmi
- 61 https://dribbble.com/shots/435827-Concept-for-budget-price-slider
- 62 http://codepen.io/thebabydino/pen/RNEEZP/
- 63 http://codepen.io/simeydotme/pen/mJLPPq
- 64 http://codepen.io/thebabydino/pen/RNEEZP/
- 65 http://codepen.io/thebabydino/pen/RNEEZP/
- 66 http://codepen.io/rgg/pen/waEYye
- 67 http://codepen.io/rgg/pen/waEYye
- 68 http://codepen.io/rgg/pen/waEYye
- 69 https://dribbble.com/shots/2440217-Fluid-Switch
- 70 http://codepen.io/montechristos/pen/EPvOwJ
- 71 http://codepen.io/montechristos/pen/EPvOwJ
- 72 http://codepen.io/montechristos/pen/EPvOwJ
- 73 https://dribbble.com/shots/2440217-Fluid-Switch
- 74 http://www.materialup.com/posts/fluid-switch
- 75 http://codepen.io/bnthor/pen/WQBNxO
- 76 http://codepen.io/bnthor/pen/WQBNxO
- 77 http://codepen.io/bnthor/pen/WQBNxO
- 78 https://dribbble.com/shots/2360260-AM-PM-Toggle