Menu Search
Jump to the content X X
Smashing Conf New York

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

Quick Tips Better Interface Design: Logins, Menus, Toggles And Other Fancy Modules

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

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.

Flappy Dialog8
Flappy Dialog96’ coded by Alex Wright. Concept: Peter Main10.

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.

Modal window breaking into parts as soon as a user closed the window.12
Modal Window Destroy Concept1311’ by LegoMushroom.

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.

Responsive Modal Design15
Material Design Modal1614’ by Ettrics.

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.

Interactive Sign-Up Form18
Interactive Sign Up Form19’ by Riccardo Pasianotto. Concept: Denis Abdullin20.

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.

Interactive Form22
Interactive Form23’ by Emmanuel Pilande.

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.

Material Signup Interaction26
Material Design Signup Interaction27’ coded by Kyle Lavery. Concept: Srikant Shetty28. (Via MaterialUp29)

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.

Compact Login33
Compact Login. Concept: Boris Borisov34. (Via MaterialUp35)

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.

Material Design Input Text37
Material Design Input Text38’ by Ben Mildren.

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.

Filter Menu40
Filter Menu41’ coded by Arjun Amgain. Concept: Anton Aheichanka42. (Via MaterialUp43)

Pure CSS Drop Down Menu Link

Jamie Coulter’s Swanky Pure CSS Drop Down Menu4644 is a nice addition to any non-JavaScript interface. It uses the menu labels to toggle an animation that reveals the sub-menu. Made with pure CSS.

Pure CSS Dropdown Menu45
Swanky Pure CSS Drop Down Menu4644’ by Jamie Coulter.

CSS Gooey Menu Link

The CSS Gooey Menu5047 by Lucas Bebber uses CSS and SVG filters48 to achieve its effect, no JavaScript. The menu is hidden behind a circle with a hamburger icon. Once you click it, the circle spits out a blob that dissolves and forms four round menu icons, neatly arranged next to each other. The hamburger icon itself becomes a “close” icon. A playful effect.

CSS Gooey Menu49
CSS Gooey Menu5047’ by Lucas Bebber.

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.

CSS Inbox User Field52
CSS Inbox User Interface5351’ by Jamie Coulter.

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.

Responsive Menu App55
Responsive Menu App5654’ coded by Woodrow Barlow. Concept: Gal Shir57.

Sliders & Toggles Link

Budget Slider Link

The jQuery Budget Slider58 is a welcome alternative to the flat design trend. As you drag the slider, a three-dimensional bar fills up with color.

Budget slider59
budgetSlider60’ coded by Hornebom. Concept: Erik Deiner61.

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 Flat Sliders64
Pure CSS Flat Sliders65’ by Ana Tudor.

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.

Pure CSS Toggles67
Pure CSS Toggles6866’ by Rafael González.

Fluid Switch Link

Leonardo Zakour’s concept of the Fluid Switch69 uses a droplet animation to slide from one toggle state to the other. Codearmada brought it to life with their Material Radio Button7270 demo.

Fluid Switch71
Material Radio Button7270’ coded by Codearmada. Concept: Leonardo Zakour73. (Via MaterialUp74)

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.

Pure CSS Day And Night Toggle76
Pure CSS Day And Night Toggle77’ coded by Benjamin Réthoré. Concept: Rappora78.

You’ve stumbled across an inspiring, innovative or delightful UI demo lately? Let us know in the comments below!

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2017/03/beauty-imperfection-interface-design/
  2. 2 https://www.smashingmagazine.com/2009/01/12-useful-techniques-for-good-user-interface-design-in-web-applications/
  3. 3 https://www.smashingmagazine.com/2017/02/improving-ui-design-skills-copywork/
  4. 4 https://www.smashingmagazine.com/2015/07/material-design-icons-templates-tools/
  5. 5 https://www.smashingmagazine.com/2016/10/designing-card-based-user-interfaces/
  6. 6 http://codepen.io/akwright/pen/XJqLNv/
  7. 7 https://dribbble.com/shots/1946448-Flappy-Dialog
  8. 8 http://codepen.io/akwright/pen/XJqLNv/
  9. 9 http://codepen.io/akwright/pen/XJqLNv/
  10. 10 https://dribbble.com/shots/1946448-Flappy-Dialog
  11. 11 http://codepen.io/sol0mka/full/XJjLxe/
  12. 12 http://codepen.io/sol0mka/full/XJjLxe/
  13. 13 http://codepen.io/sol0mka/full/XJjLxe/
  14. 14 http://codepen.io/ettrics/pen/Jdjdzp
  15. 15 http://codepen.io/ettrics/pen/Jdjdzp
  16. 16 http://codepen.io/ettrics/pen/Jdjdzp
  17. 17 http://codepen.io/rkpasia/pen/LNEQod
  18. 18 http://codepen.io/rkpasia/pen/LNEQod
  19. 19 http://codepen.io/rkpasia/pen/LNEQod
  20. 20 https://dribbble.com/shots/2372516--5-Subscribe-Form
  21. 21 http://codepen.io/epilande/pen/eZJGpP
  22. 22 http://codepen.io/epilande/pen/eZJGpP
  23. 23 http://codepen.io/epilande/pen/eZJGpP
  24. 24 https://dribbble.com/shots/2379703-Material-Signup-Interaction
  25. 25 http://codepen.io/koenigsegg1/pen/WrrXzz
  26. 26 http://codepen.io/koenigsegg1/pen/WrrXzz
  27. 27 http://codepen.io/koenigsegg1/pen/WrrXzz
  28. 28 https://dribbble.com/shots/2379703-Material-Signup-Interaction
  29. 29 http://www.materialup.com/posts/material-signup-interaction
  30. 30 https://dribbble.com/shots/2145451--01-Compact-Login?list=users&offset=0
  31. 31 http://codepen.io/andytran/pen/RPBdgM
  32. 32 http://codepen.io/yusufbkr/pen/RPBQqg
  33. 33 https://dribbble.com/shots/2145451--01-Compact-Login?list=users&offset=0
  34. 34 https://dribbble.com/shots/2145451--01-Compact-Login?list=users&offset=0
  35. 35 http://www.materialup.com/posts/compact-login
  36. 36 http://codepen.io/mildrenben/pen/gbddEj
  37. 37 http://codepen.io/mildrenben/pen/gbddEj
  38. 38 http://codepen.io/mildrenben/pen/gbddEj
  39. 39 http://codepen.io/arjunamgain/pen/qdpWLL
  40. 40 http://codepen.io/arjunamgain/pen/qdpWLL
  41. 41 http://codepen.io/arjunamgain/pen/qdpWLL
  42. 42 https://dribbble.com/shots/1956586-Filter-Menu?list=searches&tag=material&offset=8
  43. 43 http://www.materialup.com/posts/filter-menu
  44. 44 http://codepen.io/jcoulterdesign/pen/qdWxEm
  45. 45 http://codepen.io/jcoulterdesign/pen/qdWxEm
  46. 46 http://codepen.io/jcoulterdesign/pen/qdWxEm
  47. 47 http://codepen.io/lbebber/pen/pvwZJp
  48. 48 https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/
  49. 49 http://codepen.io/lbebber/pen/pvwZJp
  50. 50 http://codepen.io/lbebber/pen/pvwZJp
  51. 51 http://codepen.io/jcoulterdesign/pen/GgGrQO
  52. 52 http://codepen.io/jcoulterdesign/pen/GgGrQO
  53. 53 http://codepen.io/jcoulterdesign/pen/GgGrQO
  54. 54 http://codepen.io/wbarlow/pen/NqLWXJ
  55. 55 http://codepen.io/wbarlow/pen/NqLWXJ
  56. 56 http://codepen.io/wbarlow/pen/NqLWXJ
  57. 57 https://dribbble.com/galshir
  58. 58 http://codepen.io/Hornebom/pen/ranmi
  59. 59 http://codepen.io/Hornebom/pen/ranmi
  60. 60 http://codepen.io/Hornebom/pen/ranmi
  61. 61 https://dribbble.com/shots/435827-Concept-for-budget-price-slider
  62. 62 http://codepen.io/thebabydino/pen/RNEEZP/
  63. 63 http://codepen.io/simeydotme/pen/mJLPPq
  64. 64 http://codepen.io/thebabydino/pen/RNEEZP/
  65. 65 http://codepen.io/thebabydino/pen/RNEEZP/
  66. 66 http://codepen.io/rgg/pen/waEYye
  67. 67 http://codepen.io/rgg/pen/waEYye
  68. 68 http://codepen.io/rgg/pen/waEYye
  69. 69 https://dribbble.com/shots/2440217-Fluid-Switch
  70. 70 http://codepen.io/montechristos/pen/EPvOwJ
  71. 71 http://codepen.io/montechristos/pen/EPvOwJ
  72. 72 http://codepen.io/montechristos/pen/EPvOwJ
  73. 73 https://dribbble.com/shots/2440217-Fluid-Switch
  74. 74 http://www.materialup.com/posts/fluid-switch
  75. 75 http://codepen.io/bnthor/pen/WQBNxO
  76. 76 http://codepen.io/bnthor/pen/WQBNxO
  77. 77 http://codepen.io/bnthor/pen/WQBNxO
  78. 78 https://dribbble.com/shots/2360260-AM-PM-Toggle

↑ Back to top Tweet itShare on Facebook

Cosima has been an editor at SmashingMag since 2013. Whenever she's not writing articles for the bi-weekly Smashing Newsletter or the Quick Tips series, she’s probably working on a new Smashing eBook.

  1. 1

    Matt Roberts

    April 12, 2016 3:31 pm

    Sorry, but a bunch of these are perfect examples of flashy design over proper UX. Don’t get me wrong – I’m a firm advocate of effective design and animation enhancing UX – when they’re used in the right way.

    Having forms that display one field at a time with no way to go back and correct a previous field, nor providing a summary of the entire form before submitting, nor providing any kind of error feedback are pretty unlikely to be a good UX.

    And using Google’s Material ‘Plus’ to change a form from login to registration isn’t exactly demonstrating affordance.

    I can’t help but feel we’re straying back to the days when people used Flash to create horrible website intros and animated text, just because they could…

    78
    • 2

      James Robson

      April 12, 2016 3:54 pm

      I like them. These are idea showcases, rather than fully-fleshed out UI systems. I would hope that developers wouldn’t add these modules to their apps straight out of the box.

      10
      • 3

        Dorothy Nelson

        April 12, 2016 4:27 pm

        These are “cool” as explorations, I grant you. You say that you’d hope developers wouldn’t use these without considering the UI system that uses them, but let’s be honest — they (and designers) do exactly that all the time.

        Matt is absolutely right that many of these are interactions and animations created without a thought to how it reinforces or enhances the task at hand, and he’s absolutely right about the 1 card per field input form (which would have me flinging my phone across the room in frustration). One of the things I love about Material Design animation principles is that form really does follow function; the animations and interactions serve the use case and feed into the mental model of the user as well as being delightful. The article’s demo descriptions — “exciting”, “playful” – mostly don’t even nod to their usability or non-usability.

        Showcases and experimentation like this are great — but each should come with a warning label that begs people who might use them to please, PLEASE consider use cases, the user and the tasks they have to do before baking them in.

        9
    • 4

      Holy cow, that’s a lot of people I really don’t ever want to see build a website/-app in the comments.

      Don’t frickin value “creativity” when the UX is totally b0rken. You might encourage those authors to do more bullshit demos, because “they are all about creativity, not about UX and why would anyone ever copy code with bad UX!!1!”

      If it’s bad UX, it’s bad design. Creativity with bad design might be nice if your an abstract artist. It’s not when your building apps for people.

      Seriously.

      Don’t. Encourage. Bad. Design.

      1
      • 5

        There is always a use case for (almost) every design, including the bad ones. If a design you feel is bad because it doesn’t follow the usual UX rules for usual use case, that doesn’t mean there’s absolutely no use case that can perfectly use that ‘bad’ design. And what about the rule to “break the rules if you know what you’re doing”? Keep your mind open. You’ll never know when you’ll need the things you despise so much.

        4
  2. 6

    I don’t know if all these demos are an improvement, but they are inspiring indeed! Thanks!

    5
  3. 7

    Jabran Rafique

    April 12, 2016 9:59 pm

    Some of those are really clever approaches. They can be modified a bit perhaps to accommodate better UX and accessibility. Thank you for sharing.

    7
  4. 8

    I think it’s great that people are working on new and exciting ways to handle boring forms. Yes a lot of the micro interactions are lost in this “showcase” and yes I hope people bake these ideas before implementing them, but hey they are cool! I like new ideas and new ideas are what makes UX better, just because it’s not baked doesn’t mean it isn’t a good idea. I like that designers are thinking out of the box. It’s this kind of thinking that makes our user interfaces more engaging and less boring.

    7
  5. 9

    Avneesh Raizada

    April 13, 2016 8:29 am

    I agree with the comments above, I find the creative aspect of these demos absolutely awesome. Some are definitely not always user-friendly such as the overlapping forms or the futuristic form where you use tab to move forward, both cases not showing a way not to return to the previous screen. Then again, the goal wasn’t to portray fullY fledged websites and apps, but more inspirational ideas to influence responsive, desktop and moble UI’s.

    I have my big favourites with the splash animation from the “x” button over to the burger nav, to the tabbed futuristic one to the exploding box (that was brilliant). Cool inspirational ideas as always o/ Smashing Mag

    3
  6. 10

    Thanks for collecting these.

    0
  7. 11

    Jason Arnold

    April 14, 2016 7:35 am

    I agree with most of the comments here to a point, but the intro already sets expectations pretty well by describing everything as “UI demos and concepts for you to indulge in and build upon”. The key here is “build upon” – they’re not finished!

    1
  8. 12

    Great Work!!!

    0
  9. 13

    Shashank Sahay

    April 20, 2016 7:49 pm

    Instead of whining about the UX like several other before me, I respect and appreciate everyone who took out the time to make these demos.
    To all the creators, just ignore these so called “experts”, you are doing a great job. Let the haters whine.

    -1
  10. 14

    What a wonderful article!
    Thanks a lot!

    0
  11. 15

    Muhammed A K

    May 5, 2016 12:41 pm

    Awesome collection <3

    0

↑ Back to top