November 25, 2022 in Learn
How To Create Autocomplete Dropdowns with the Datalist Element
The <datalist> element is a new addition in the HTML5 specification. The <datalist> element allows developers to create native autocomplete dropdowns for their web applications. This type of user interface component is used on form fields and search boxes as…
September 28, 2022 in Learn
Creating Custom HTML
(Photo by Kenny Louie / Flickr) An exciting feature of the HTML specification is creating custom HTML elements. These allow you to create your own HTML elements along with their own JavaScript API. This can be useful when building interfaces with reused…
September 24, 2015 in Learn
3 Steps to Better UI Wireframes
Creating sketches of a user interface, called wireframes, is often the first step in the design phase of a software or web project. Wireframing your software or website project may seem simple at first because of how easy they are…
June 3, 2015 in Learn
Gestalt Principles for Designers – Applying Visual Psychology to Modern Day Design
Jerry Cao is a UX content strategist at UXPin — the wireframing and prototyping app. To learn more about how to create visually digestible interfaces, download the free e-book Web UI Design for the Human Eye: Colors, Space, Contrast. In…
April 23, 2014 in Learn
An Introduction to Perceived Performance
(Illustration by Mat Helme, Treehouse) Perceived Performance Is a Measure of How Quick a User Thinks Your Site Is, and That’s Often More Important Than Its True Speed Performance is important. It can mean the difference between making a sale,…
February 4, 2014 in Learn
Getting Started with the Speech Synthesis API
With the introduction of products like Siri and Google Now, speech technology has really taken off in the past few years. Various organisations have been working on speech recognition and synthesis for decades, but it seems like only recently that…
September 3, 2013 in Learn
3D in the Browser: WebGL versus CSS 3D Transforms
WebGL and CSS 3D transforms are two major technologies for creating 3D in the browser, and as recently as a few years ago, they didn’t have much browser support. Much has changed in a short period of time, and if…
May 7, 2013 in Learn
5 Reasons Sketching Wireframes in Groups is So Important
When we take that first step in building a new web app we quickly forget about the simple things. We get so immersed in the features and functionality of the application, when we should be focusing on the layout and…
March 26, 2013 in Learn
Dynamic jQuery Image Avatar Cropping Effect
I can still remember the old digg.com user profiles with dynamic avatar cropping via JavaScript. Their user interface was clean, easy to use, displayed a sample before you cropped, and would auto-update as you changed the selection box. I have…
February 14, 2013 in Learn
Building Custom Controls for HTML5 Videos
One of my favorite things about HTML5 video is how easy it is to create your own custom controls. This not only allows you to style the controls however you would like but also allows you to add new controls…
December 24, 2012 in Learn
Using HTML5 Input Types to Enhance The Mobile Browsing Experience
Browsing the web on mobile devices has become incredbily popular over the past few years. However the browsing experience on these devices can sometimes leave a lot to be desired. This is especially true when it comes to filling in forms. Luckily…
December 19, 2012 in Learn
Adding Desktop Notifications to Your Web Applications
The new Notifications API gives you the ability to launch desktop notifications directly from your web applications. This can be very useful for updating user’s with key information, particularly in AJAX applications where you may have HTTP requests taking place…