Tags: user interface

TabTab.js [↗]

A simple, Accessible, 60+fps, easy-to-use animated tabs plugin for jQuery.

I don’t use tabs all that often, but I like the look of this, the animations are clean and well executed. Note, powered by Velocity.js.

Choices.js [↗]

Choices.js is a lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.

Some nice lookin’ text inputs!

A Simplified WordPress TinyMCE Editor

Sometimes, you might want to remove a few buttons from the WordPress TinyMCE editor. There could be a whole bunch of reasons for wanting to do this, but I’m not going to get into that just now. Anyhow, it’s good to know that you can make a simplified TinyMCE user interface, if you want/need to.

The following function and call to add_filter() will do just that.

You could use the above in your theme’s functions.php file, or wherever you deem fit, and it should result in an editor that looks similar to the image below (note the number of buttons).

A Simplified WordPress TinyMCE Editor

A simplified WordPress editor.

More information about removing buttons from the WordPress TinyMCE editor can be found here.

Hamburger menu alternatives for mobile navigation [↗]

If you’re working on digital products, you have already read dozens of articles describing how and why the hamburger navigation on mobile (and desktop!) hurts UX metrics due of its low discoverability and efficiency. (You can read some of best articles on the topic here, here, here, and here.)

Luckily, more and more sites and apps are experimenting with alternative, more efficient solutions for this very problem.

Personally, I quite like hamburger menus, but if you’re looking for alternatives, this might be worth a look.

datedropper [↗]

datedropper is an alternative to jQuery UI datepicker. Manage date input fields in a standard form. Focus on the input to open an small interactive calendar.

I was initially put off by the garish design, but after playing with this date picker, I realised that I actually quite like it.  Also, see timedropper.

Packery [↗]

Packery is a JavaScript library and jQuery plugin that makes gapless and draggable layouts. It uses a bin-packing algorithm to fill in empty gaps. Packery layouts can be intelligently ordered or organically wild. Elements can be stamped in place, fit in a specific spot, or dragged around. It’s perfect for draggable dashboard and seamless Masonry image galleries.

The draggable masonry layout reminds me of Google Keep’s UI, of which I’m rather fond.

Is this my interface or yours? [↗]

I wrote this story because I’ve seen this question come up time and time again from designers, developers, and writers. Why do we use “my” here? Why do we use “your” there? And yet, I’ve seen very little of this documented externally in style guides.

Some good tips on when to use “my” and “your” in my/your user interfaces. Personally, I’ve always tended to go with my gut and use what feels right, without giving it too much thought. I guess I should have known that there’d be more to it than that.

Frend – A collection of accessible, modern front-end components [↗]

Frend components are modest and dependency-free. They are built with web standards as a priority and aim to avoid assumptions about tooling or environment. Care has been taken to make sure each component is compliant, keyboard navigable and properly interpreted by assistive technologies.

Nice.

Code My UI [↗]

Handpicked code snippets you can use in your web projects. Find website design inspiration with code samples.

A nice collection of user interface designs here.