神刀安全网

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

Advertisement

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!

Dialog & Modal Windows

Alex Wright’s Flappy Dialog is based on a Dribbble concept by Peter Main . 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.

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

Modal Window Destroy Concept

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 Concept . Once a user closes the modal window, it bursts into pieces. A surprising effect.

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

Material Design Modal

The key part of Ettrics’ Material Design Modal 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.

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

Interactive Signup Form

Riccardo Pasianotto’s take on the signup form 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.

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

Interactive Sign Up Form ’ by Riccardo Pasianotto. Concept: Denis Abdullin .

CSS-Only Interactive Form

Emmanuel Pilande’s interactive form demo 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.

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

Interactive Form ’ by Emmanuel Pilande.

Material Signup Interaction

Srikant Shetty’s material signup interaction 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 Lavery .

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

Material Design Signup Interaction ’ coded by Kyle Lavery. Concept: Srikant Shetty . (Via MaterialUp )

The Compact Login 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 Tran and Yusuf Bakir coded variations of the concept.

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

Compact Login. Concept: Boris Borisov . (Via MaterialUp )

Material Design Text Input

A very lightweight text input 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.

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

Material Design Input Text ’ by Ben Mildren.

The Filter Menu 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.

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

Filter Menu ’ coded by Arjun Amgain. Concept: Anton Aheichanka . (Via MaterialUp )

Pure CSS Drop Down Menu

Jamie Coulter’s Swanky Pure CSS Drop Down Menu 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.

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

The CSS Gooey Menu by Lucas Bebber uses CSS and SVG filters 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.

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

Another example of pure CSS goodness is Jamie Coulter’s CSS Inbox User Interface . 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.

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

Responsive Menu App

The Responsive Menu App 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.

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

Sliders & Toggles

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

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

budgetSlider ’ coded by Hornebom. Concept: Erik Deiner .

Pure CSS Flat Sliders

Ana Tudor’s flat sliders 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 sliders . They come with a subtle growth effect on the active tick and display the number value on the needle.

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

Pure CSS Flat Sliders ’ by Ana Tudor.

Rafael González’s Pure CSS Toggles 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.

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

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

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

Material Radio Button ’ coded by Codearmada. Concept: Leonardo Zakour . (Via MaterialUp )

Pure CSS Day And Night Toggle

The CSS Day And Night Toggle 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.

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

Pure CSS Day And Night Toggle ’ coded by Benjamin Réthoré. Concept: Rappora .

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

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Better Interface Design: Logins, Menus, Toggles And Other Fancy Modules

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮