Skip to main content
Rough.js graphic creator

Creative and Development Inspiration 20

This week creative and development rundown is more development orientated. I have found some great packages to help enhance the user experience, as well as some alternatives to already well used solutions. Although a shorter list than usual, these items are far more usable, both in terms of using within a project and for learning more!



Driver is a powerful yet light-weight, vanilla JavaScript engine to drive the user’s focus across the page. This would be great for when a user signs up to a new website, or service., as well as providing interactive overlays. It is easy to implement and has great documentation.


React Tutorial: A Comprehensive Guide to learning React.js in 2018

As the title says, this tutorial is a ground up guide to learning ReactJS. It is well broken down, and incredibly easy to understand. ReactJs is definitely a must for most front end developers. The majority of tech companies use it as a quick route to sale.


Toast UI Chart

No one like having to make code work on legacy browsers. But sometimes it matters.  The developers of Toast US couldn’t find a project which supported legacy browsers, maintained reliably, and was free for commercial use, so they decided to make one. It is well documented, and quite pretty! I will most probably be giving this a trial run on the next web development project that requires charts!


Animating Elements Along SVG Paths: Introducing PathSlider

This tutorial by Scotch is a really simple to follow SVG path animation guide. It used the PathFinder plugin, and anime.js, both very user friendly packages. Although not a groundbreaking example, it is a great gateway drug into SVG animations.



Rough.js allows you to create roughly drawn graphics within the browser. It is a light weight (~8k), Canvas based library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths.


Creating User-friendly forms

Forms are of pivotal importance to individuals & businesses alike. When it comes to collecting data, forms most often than not is the direction we all take (perhaps due to it’s long-time presence around us offline before the internet boom). Therefore, creating user-friendly forms is a major key to increasing the completion rate of your forms.

Esri Wind Animation

Creative and Development Inspiration 19

This weeks design and development inspiration has a couple of great Codepen projects, showing off HTML5, Canvas and JS. On top of that I have found articles and design from across the web to get you into the mood.


The Last Experience

I’ll start you off with something great, and strange. The Last Experience is a collection of robots designed to dance in sync. That is, until you get involved.



Self-named as the “Magical reusable web component compiler” Stencil is a compiler that generates Web Components (more specifically, Custom Elements). It combines the best concepts of the most popular frameworks into a simple build-time tool to make development faster. Since Stencil generates standards-compliant web components, they can work with many popular frameworks right out of the box, and can be used without a framework because they are just web components.


Wind Animation

Take a map, take a wind chart, animate. That is exactly what Esri have done. The code for this project uses nothing but an HTML5 Canvas element and pure Javascript. The data come from the Global Forecast System which produces a large variety of datasets as continuous global gridded datasets (more info below). Great inspiration, beautifully designed.


The Future Of Mobile Web Design: Video Game Design And Storytelling

As technologies change and design techniques evolve, it’s inevitable that we’d experience massive growth in terms of design quality. There are similar parallels we can see within video game design as well. This article helps look at website design in another angle.


10 Examples of Drag and Drop UI

Drag-and-drop has been with us for decades. It helps us to get things done on both our desktop, mobile apps and operating systems. There’s both a simplicity and intuitiveness that has led to it become one of the most universal UI features. Speckyboy has pulled together 10 examples to show this web functionality off.


Responsive Components

Media queries are great, but it can be such a nuisance when limited by needing to alter the whole page. As opposed to altering each section depending on is own size. This approach would allow fully modular design, with elements being able to be added without as much thought to device size. I honestly thing this development approach is a step in the right direction.



A minimalist CSS framework. Milligram provides a minimal setup of styles for a fast and clean starting point. Only 2kb gzipped! It’s not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code.

SVG Landscape Animation

Creative and Development Inspiration 17

SVG Landscapes

SVG animations are really starting to come into their own. Speckyboy has pulled together a great selection of SVG landscapes with animations to show off the potential. Some brilliant styling!


Epic Spinners

A collection of CSS only spinners. Perfect for loading animations within an app or website. Great selection all in one place.


CSS Content Cards

I have written a post about content cards before now.  But they are so great I thought I should include this link as well. Contains card examples, as well as the code!


Unused CSS

This web tool scans your site, and finds any unused CSS selectors. Great for keeping the code size down!



I am a massive advocate of automating your workflow. I know I am harking back a bit here, but for those of you who don’t have the robots doing half your job, you should. This article breaks down this JS automation tool.


The Sudden Death of the Website

This article covers a range of factors that point towards large brands doing away with their website. How bothered should we be as designs/developers?


Microframes, the Future of Wireframing?

Microframes, or micro-wireframes, are miniaturised versions of wireframes. Microframes amplify the benefits of wireframing and eliminate most of the shortcomings. Their benefits include speed, clarity of communication and lack of confusion. Are they the future?


Just Leave!

Our industry has a tendency to eat people up, squeeze them for their creative juices, and spit them out burnt up. It’s just not worth it!

CSS Animation Shooter Game

Creative and Development Inspiration 16

This post has been a long time coming, what with crippling man flu (sympathy vote alert) and work deadlines I haven’t been able to put anything together. I have however had a lot of time to stare at my phone and look at pretty pictures. That means that this list is especially special, and has some pretty interesting links for you to peruse.



Inspired by skrollr, this scrolling library allows you to change CSS variables depending on the scroll position. Use the variables directly in your CSS to animate whatever you want. I am a massive fan of this, and can’t wait to roll it out on some of my projects.


3D Parallax Example

Thismanslife built this example of 3D parralax on IMacs only using CSS.  Definitely need to take a look at that source code!


Sweet Alert 2

Need to remind a user to save their work before they leave the page? This alert library is a perfect addition to any web project using alerts. Easy to integrate, and an improvement on the standard browser alert.


5 UX Design Principles That Never Go Out of Style

The best designers understand that there must be a balance between standardization and innovation. Keeping that in mind, here is how to design a product with GREAT UX.



Because why wouldn’t we need another JavaScript library?! Personally I doubt I will ever use this, but you may. Easy to install using NPM, Yarn ect and allows you to enhance your already existing HTML.



One for the designers. Gangbase was created to collect all studios, designers, tools and awesome websites in one big base, where it’s easy to find whatever you need.



A beautifully designed website, with only one purpose. To create perfect CSS colour gradients within your browser. Perfect for web designs / developers.

Like Bitly, but yours. Free and open source, allows you to host your own server, and manage all of your links & data yourself. A great interface, and documented API.


CSS Space Shooter

I haven’t had one of these in a very long time. An old-school arcade-style 3D shoot-em-up rendered entirely with CSS 3D transforms. A great break from work, as well as a perfect example of CSS transforms. How far can you get?

SVG Landscape Polygon Background

Creative and Development Inspiration 15

After a weeks break (Girlfriends birthday) I am back with another web dev/design rundown. There are some great UX/UI articles, as well as some darn pretty pictures.


People Don’t Scroll ( and Other Page Length Myths )

A few page length myths debunked. A few of those “beliefs” that are thrown around and checked against studies to see what really is correct! Do people understand scroll? How long should a page be?


UI Design Inspiration #3

A series of UI Design Inspiration from FreeUi.Design. Some beautiful examples of icons, applications and website. Definately worth a look.


Daily Life Interactions To Learn UX From

If we look into our everyday life, it consists of continuous series of microinteractions that often go unseen, almost at a sensory level. The thing is, they feel natural but they are 100% artificial, which means someone designed them and as UX researchers, we might want to learn from it.


SVG Backgrounds

Customizable SVG patterns and background designs for websites and blogs. Great for adding some colour, but keeping the page load time down!


The 12 Do’s and Don’ts of Web Design

If you design websites, you know that making your designs useful and enjoyable is your top priority. It can be an overwhelming task for anyone who just recently started creating websites, so to simplify it, Adobe has created a simple list of do’s and don’ts to keep in mind when designing your next web design project.


Build a Download Button Full of Micro Interactions

On the same vain as most of the other articles, UX! Learn how to build a button that is full of useful micro interactions. Some coding goodness to end the list.

Material Design Example

Creative and Development Inspiration 14

This week I have found some great links for UX snippets and examples, some CSS/JS magic, and a little titbit for you cryptocurrency geeks. All in a days work.


Bye bye Material Design

Considering Material Design for your next project? Emin Durak thinks otherwise. He belives that it is, I quote, “premature, shallow and arguably incorrect approach”.



A Microinteraction Libary Built with CSS Animations and JS. A great plug and play libary for a quick MVP.


How Much Do You Know About Web Typography

Web typography is a bit tricky. So many quirks and snippets of information you need to know. Take this web typography quiz and test your typography knowledge.


Gradient Topography Animation

Codrops is back with a great new code snippet. An incredibly sleek organic SVG shape layer animation based on Diana Hlevnjak’s work “Gradient Topography”. Powered by anime.js.


Button with Email Dropdown

Code My UI has brought us a nice little snippet to create a drop down input field from a button. Keep everything tucked anyand tidy!


Jump on the Cryptocurrency Bandwagon

Minergate is a piece of software that mines a varity of cryptocurrency coins in the background whilst you work. You can set the level depending on how much you need to use your CPU/GPU. Keep the referral link, and I get a small percentage of the fee (nothing is taken from you!)

Poor UI Missile Threat

Creative and Development Inspiration 13

2018 so far seems to be the year that UX/UI is at the forefront of every-bodies mind. Maybe that’s just me though? Well with that thought, here are a few links to tickle your Monday brain. Some are educational some are just pretty.


Microinteractions to Help Improve UX

As your users spend time on your website, they are constantly interacting with its features – and some of those small interactions matter more than you might think.

Each small movement has an impact on their overall experience. Use these small moments to improve your user experience, and ensure users follow through on further interaction as they begin navigating your website.

Speckyboy covers some examples of Micro interactions, and goes into a little detail.


Hawaii’s missile alert fiasco highlights the importance of good interface design

We all read the news. The panic that struck residents and tourists in Hawaii on Saturday morning over the past weekend – owing to a public emergency alert about an incoming ballistic missile that was mistakenly transmitted – could have been easily avoided with the help of good design.


Laws of UX

This site highlights a collection of key maxims that designers should consider when building user interfaces. A really clean site with some great insight.


Smooth Gooey Radio Slider Button

This is just something a bit different. A Codepen of a nice micro interaction for a radio button.


Sketch Icons – Generate a Dynamic Icons Libary

This one is for the designers. Creating a dynamic icon library is time consuming. Here is an article outlining how to do it manually, and then a link to a great plugin to streamline your workflow.


Decorative Letter Animations

Something pretty to finish off. Tympanus has done it again with some great text animations. Each example has a Github link to see the code snippet.

Spotify releases development API

Creative and Development Inspiration 12

A mixed bag this week. Some great new additions to the code snippets bookmark list, as well a new design inspiration website. Also, Spotify likes developers!


9 Custom Open Source File Upload Field Snippets

Upload fields are one of the toughest inputs to restyle. If you’re hoping to customize your upload inputs, this gallery will help. Speckyboy has collected 9 handmade upload fields from CodePen that prove you can restyle the field to look however you want.


Why do People Hate Papyrus and Comic Sans?

The world we live in is a mix of opinions and it’s hard to definitively agree on anything. But one thing’s for sure—Comic Sans and Papyrus are the worst. Why do we feel this is the case?


Instagram CSS

Want to bring Instagram filters to your site? Wait no more, this Github resposity has your back.


Company Tricks People into Swiping Instagram Ad with Fake Strand of Hair

A cunning Chinese company has received both props and scoffs for a devious Instagram Stories advertisement featuring a fake strand of hair over some heavily discounted sneakers. Not such a development article, but a comment on advertising design.


Spotify for Developers

Spotify have opened up an API for us developers. So. Many. Ideas.


A New Inspiration Feed – Designspiration

A selection, concoction, amaligmation of great, interesting and creative designs. All those descriptive words show how I feel about this site. It’s good.

CSS Animation Room Selection

Creative and Development Inspiration 11

I have pulled together 6 links that span creative, web development, and just plain old interesting. There are a couple of freebies to keep you interested as well 😉


Pretty Scroll

A library to make an element follow you as you scroll. This could be used for so many things, from keeping images alongside a section of text, to triggering animations at a certain point. Bookmark this!


Homepages Over Time

This article covers some of the bigger web brands, and shows how their homepages have changed over time. All of these will have used not stop A/B testing, and tracking to get to this point.


Prometheus Free Icon Set

450 free icons that work with both Adobe and Sketch apps. Always good to have an endless supply!


CSS Glitch Effect

A really really cool glitch effect using only CSS. Works for film style sites, but could also work with more industial clients as well!


Engaging Micro-animation CSS House

This responsive house by David Khourshid is a brilliant example of using micro-animations to engage the user, whilst at the same time providing value. It uses a slider to pick the type of house a user is looking for.


More Freebies! A selection of Instagram Banner Inspirations

These Instagram templates are fully customizable, and provide great inspiration for creating and building a Instagram following.