Skip to main content
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!)

Purple is 2018 colour

Creative and Development Inspiration 9

Because next week is Christmas (and I won’t be creating a list, family and all that) I have pulled together a longer selection than usual. This week there have been some really great pieces of code coming to the surface, as well as some great graphic design inspiration.



I’ll kick off with DesignClever. This is a brilliant design inspiration website that collates beautiful design from all all corners. It was created to showcase work from designers all over the world. Definitely one to keep an eye on!


Pantone Picks 2018 Colour

The blue-based purple has been selected for its “provocative” and “thoughtful” shade, which nods to current trends in areas like spirituality and space exploration. This article explains their reasoning.


How Efficiency Makes you a Better Designer

This is something a bang on about all the time, so it’s nice when someone else writes an article about it and breaks it down. Being efficient can not only make a job more profitable, it makes the process seem easier. This issue is working out where to start, and what the right areas are.


Tracy – From Paper to Vector

This little tool could be a life changer. Rather than scanning in your drawing, and running the JPG through Illustrator (if you have it), the image can be passed to this website and it spits out an SVG. Give it a whirl.



Described as a functional JavaScript motion libary, Popmotion is a 11.5kb tool for animators and interaction developers. The animations are smooth, and the code required to use it is simple and understandable. It is also modular, allowing you to pick and choose certain parts, depending on what you require.

Take a look at the examples.



This is a small library that gives you the ability to watch variables and objects to check for any changes. It works recursively, so will detect changes even if you modify a deep property. A neat piece of code!


Specificity Visualiser

This tool gives you a quick overview of selectors and their specificities across a CSS file in bird’s-eye view. It’s a visual way to identify potentially problematic patterns and especially useful for analysing very big and complex style sheets.


30 Seconds of Code

This has appeared on a fair few blogs over the last couple of days. Understandably so. It is a list of code snippets that take less than 30 seconds to understand, and will probably save you a lot more than 30 seconds of your life. Some brilliant problem solvers here!

Definitely worth a bookmark.


That’s all for this week. Have a great Christmas/break and leave any comments below.

Animated button tooltips

Creative and Development Inspiration 5: Feature Highlights

Finding ways to display hidden information for users can be tough. The number of times brochure websites have required some level of user engagement and I have had to scour the web for examples such as these. I thought I should share.


Project Feature Highlights

By adding tooltips into div elements they can be positioned anywhere on a page. I imagine this could get a big fiddly for a responsive page, but nothing a few calculations can’t fix!


Intro JS

A step-by-step guide and feature introduction script. It has no dependencies and is pretty small! Very easy to integrate.


Animated Tooltips

Simple, effective use of tooltips. There are three styles. Fading, expanding and swing. By using the HTML5 data-title attribute they minimize the amount of extra HTML required.


Automated Tooltips

Attractive, small tooltips that effectively display extra information for the user.


Animated button with Tooltip

I have included this, not so much for the button, but how the tooltip looks. If this was applied to a product image to show extra information, it would work brilliantly.