User Interface Design Basics

User Interface (UI) Design focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions. UI brings together concepts from interaction design, visual design, and information architecture. Choosing Interface Elements Users have become familiar with interface elements acting in a certain way, so…

Impressive animated particle backgrounds

A lightweight, dependency-free and responsive javascript plugin for particle backgrounds. Particles.js is an impressive animated particle background. It’s written in plain vanilla Java­Script. Fullscreen background In a fixed width and height container Multiple colors Use breakpoints Browser support particles.js supports all major browsers including IE9+.   Options Option Type Default Description selector string – Required: CSS…

Cool Backgrounds

Explore a beautifully curated selection of cool backgrounds that you can add to blogs, websites, or as desktop and phone wallpapers. Cool Backgrounds is a collection of tools to create compelling, colorful images for blogs, social media, and websites. Beyond backgrounds, the images generated can be used as 🖥 desktop wallpapers or cropped for 📱…

2019 UI and UX Design Trends

It feels like we’re getting somewhere with all the tools, advancements in technology, and growth of our understanding of how user-facing products really have to work. Sooner than later, we’ll develop the mindset for universal design that encompasses everything we produce, and not just sell. The way we do things for ourselves needs better design choices….

The React Handbook

An introduction to the React view library What is React? React is a JavaScript library that aims to simplify the development of visual interfaces. Developed at Facebook and released to the world in 2013, it drives some of the most widely used apps, powering Facebook and Instagram among countless other applications. Its primary goal is to make…

13 Noteworthy Points from Google’s JavaScript Style Guide

For anyone who isn’t already familiar with it, Google puts out a style guide for writing JavaScript that lays out (what Google believes to be) the best stylistic practices for writing clean, understandable code. These are not hard and fast rules for writing valid JavaScript, only proscriptions for maintaining consistent and appealing style choices throughout…

Brilliant User Interface Animations

Animated interface elements reveal the process and functionality of a UI much better than static text. They enhance user experience and help guide user flow. Like any other element of good design, UI animations should have a purpose. They should be functional without being overly flashy.  Note  If you’re on a slow connection, give a…

REM Calculator!

/*global jQuery */ (function( $ ) { var result = $(‘#result’); var base = $(‘#base’); var list = $(‘#list’); $(‘#calc’).click(function() { var baseVal = base.val(); var px = list.val().split(‘,’); var html = []; $.each(px, function(i, v) { var px = parseInt(v); var rem = parseFloat((px / parseInt(baseVal, 10)).toPrecision(4)); var isBase = (rem === 1) ?…

What’s the difference between UX and UI design?

Let’s start! First off, let’s answer the question: What exactly are UI design and UX design, and what is the difference between the two? Simply put, UI is how things look, UX is how things work. UX is a process, while UI is a deliverable. Let’s elaborate further… User Interface Design UI is a combination…

Good to great UI animation tips

Let’s see some examples of UI animations going from good to great. With a little bit of tweaking here and there, you can elevate your UI patterns with animation. The interactions listed show continuity between states, denote a relationship between shared elements, and call the user’s attention to something they should notice and act upon….