Skip to main content
Froala Design Blocks

Creative and Development Inspiration 10

Starting this year as I plan to go on, with a good old list. This time I have brought together 6 articles that look across the year to help you develop your skill set, as well as a glance back at the past year.


2017 Web Design Trends

The list would’nt be complete without a look back at 2017 and it’s trends. 1st Web Designer do a great job at highlighting the best examples.


Froala Design Blocks

This is a brilliant open-sourced respository on Github. It is a collection of 170+ responsive design blocks that can be used to build a website. A great way of rolling out a site in minimul time! Based on Bootstrap 4 and entirely customizable



Reframe.js is a javascript plugin that makes unresponsive elements responsive! This could be a lifesaver.


Tips for Designing Awe-Inspiring Conversational Interfaces

As online chat becomes an industry in itself, with virtual assistants and help desks it becomes essential that the interface is as user friendly as possible. Those of you who are just getting started in this direction will benefit from these eight tips for designing awe-Inspiring conversational interfaces.


Shards – Modern UI Toolkit

Shards is a modern design system based on Bootstrap 4. Unbelievably clean, and packed with 10 custom components. Only 12kb minified and gzipped.


18 Designers Predict UI/UX Trends for 2018

There is no other way to end this list. With a look across 2018, and a few thoughts on which direction ui/ux trends will go. Whether you approve of it or not, I think #8 is very likely.


I would love to hear your thoughts on trends for 2018, both design and development. The both industries are moving at such a rate, with great new technologies emerging. It’s going to be an interesting year.

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 SVG Strokes

Creative and Development Inspiration 8

This week I have pulled together 6 pieces from across the design interwebs to showcase some of the best articles, code snippets and a little bit of inspiration to get you started.


User Experience Matters to Marketing

User Experience (UX) can effect your marketing, if users view it positively. This post looks at the various elements that great UX includes and how UX impacts your marketing goals and strategies.

It even uses big pictures, for those of you who hate reading.


Web Design Trends for 2018

Every year these articles come out by storm. Now I am not agreeing with every point on the list, but it is a good idea to keep on top of what seems to be big currently. At least someone else did the work to put them into a list for us 😉


Speckyboys 50 Top CSS Libaries, Frameworks and Tools from 2017

I am a big fan of Speckyboy, and this is one of the reasons why. They have brought together their top CSS pieces from 2017 into one place. Some brilliant ones on here. Great for speeding up dev, or just for being plain old helpful.



A brand new, fast growing market place for code snippets, great if you want to sell, or buy. They launch a weekly flash sale where selected items are 50% off, a nice concept.


How to set up Webpack for any Project.

I am yet to start using Webpack, I am a Gulp man personally. I am putting this on the list so I can come back to it. Webpack is great for JaveScript projects, and configuration based which makes the whole process extremely simple.


Animated SVG Strokes

This one is for those of you who love a good animation. Code Drops looks after us once again with a beautiful SVG bike animation. Really clever, really sleak.


If you have any great articles, code snippets or just interesting links stick them in the comments below!

Creative and Development Inspiration 7

This week I have brought together 6 links that cover design, code and process. Some great pieces of inspiration as well as some hopefully useful snippets to enhance your work.


Website Design Example

A brief look at the new website for Heydays from Oslo. Its nice. Its simple. I like it. Also, its pretty on mobile (because responsive). I like posts like this, great for inspiration.


Minify PNGs with UPNG

According to this site, they are significatly better than TinyPNG. I bring you UPNG. Either way, here are links for two brilliant sites to minify your images.


Animate Plus

This JavaScript animation libary is centered around performance and flexibility. Built to work with mobile, and only 2KB when minified and gzipped. From the examples it seems like a winner!


Designers should move slowly

A great article on why design should be thoughtly thought-out, and focused on user-first. It links through to some other very interesting articles as well!


One for the Photoshoppers

This new Photoshop CC tool lets users detect objects with one click. No more lasso tool! (Although I’m dubious it will work every time)


Design Better: The Design System Handbook

A comprehensive design system template to reduce design debt and accelerate the design process. It walks through each stage of the system and provides some brilliant resources. A great finisher for this weeks roundup!


If you have an examples of great work, resources or snippets let me know in the comments so I can add them to next weeks Inspiration.

An example of yellow websites

Creative and Development Inspiration 6

This weeks list is more design focused, with a story telling script thrown in for good measure. As most design/dev sites are shouting about Cyber Monday deals, I wanted to keep this on the same track as we started. I hope you enjoy.



Needing to flex your design muscles? A little down time in the studio? Designercize has you covered. It randomly generates a concept that needs a design for. Brilliant for wireframing / whiteboard design practice.



Its been a while since I have come across a script that really gets me thinking about its potential. Scrollama is a lightweight JS libary that helps with storytelling.




Need a 3D mobile phone mockup? Just upload your design and you are set. Completely free and no need to download software.


Obstructed Text

Some websites look great, even if they defy conventional wisdom or tenets of design theory. A new design trend is showcasing that very idea with elements that cover or obstruct some of the text in the design.


Design needs Three Levels of Type Heirarchy

Another one from Design Shack, they really impressed me last week. This article discusses how design needs three levels of typography. It seems very common-sensual, but its interesting to see it written in such a concise way.



Web Design Dev have brought together 20 examples of yellow being used in design. A great article to click through, with no need to read anything. A nice ender to this weeks run down.

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.

Google Material Mobile Menus

Creative and Development Inspiration 4: Hidden Menus

Today’s post is focusing on code snippets for hidden menus. These could be used on both mobile and large devices. Although they are not particularly attractive menus, I am focusing more on the usability and style. The purpose is to help inspire.


Simple multilevel menu

This menu is a code snippet from Cody House. It gives two examples, one plain CSS, the other with JQuery animations. Simple, but user friendly.


Pure CSS Accordion with Simple Microinteractions

This mobile accordion menu moves icons down as the user selects a different section. The animated micro interactions make the whole experience feel more crafted.


Breadcrumb Navigation

This subtle menu gives the user more information when they hover. The effect works really well, however I am dubious about how it would work with touch devices. The menu would have to be touch to show, which adds a touch point. Still a nice effect though.


Circular Material Design Menu

I personally don’t like how this menu looks. However, the concept is really slick. This style could be altered to look a bit nicer and really work. I am a fan of the animation though!


Google Material Inspired Circle

Staying on the Google Material style, here is another simple menu that could be great if styled slightly differently.


Menu Overlay Focus Change

This is completely different to menus I am used to seeing. Although it needs some tweaking to work on smaller devices, the effect it great. By moving the cameras focus when the menu is open adds a whole new layer to the site.


CSS & JS Toggle Menu

A bit of an experiment with SVG icons what chage colour when selected. It uses a subtle material transition to make it look dynamic. Really nice for use with a more modern B2C site.

Tympanus Image Hover Effects

Creative and Development Inspiration 3: Hover Effects

Today’s list is a selection of mouse over / hover effects. These animations and transitions can make a massive difference between just another website, and a sleek user friendly interface that readers want to keep coming back to.


Tympanus Hover Effects

The first two links are from Tympanus. A brilliant site with hundreds of code snippets. I really recommend keeping an eye on this website, both as a developer, and a designer.

Each link has multiple examples within, and showcases different ways of animating the same element.


UX Design Agency Info Panels

UX Design Agency have used hover effects brilliantly on the home page panels. A gentle zoom and reveal of essential information is really engaging.


Product Card

This product card is very minimal, and shows the user exactly want they need to see. My only concern it is very JavaScript heavy, but I’m sure this could be rewritten to use plain CSS3.


Direction Aware Hover

This piece of code is a bit old, going back to 2013, but is still relevant. As the user hovers over each panel, it moves across from the one before.


Panel Hover Effect

This e-commerce panel shows the user a product shot, and basic information, and then provides a purchase CTA on hover.


True Paradise on Earth

An example of a blog panel. Simple, elegant. Paradise.


One thought it that designers and developers need to remember not all devices have hover, specially as large screen touch devices are getting more traction in the consumer market. Any information that is shown on hover, needs to be accessible for these other users as well.

Google Poly

Creative and Development Inspiration 2

Today’s links are a mix of creative and development. A little bit of inspiration, and information.


7 Steps to creating a UX Strategy

I’ll start it off with some easy reading. This article walks you through 7 vital steps to creating a solid UX strategy. I think the first point is spot on, considering how I don’t believe many people fully understand this.


Google Poly

Microsoft gave you clip art, and Google raises it with Poly.
A libary of thousands of 3D objects, created by both Google and Google users. These assets can be used to build apps, lowering the cost for developers.
Google has also confirmed that they will allow third-party apps to plug in via API. Here we come VR!


5 Intuitive Material Design Drawers Examples

A drawer is a slideable side menu within an app. These examples show how using the Material style can make drawers so much more appealing to the user.


Export SVGs from Photoshop

A great little script that can speed up the process of exporting SVGs from


Is the Static Logo dead?

If it wasn’t already hard enough to create a solid brand, now logos want to move.


9 Beautiful Beer Label Designs

A nice easy finisher. Nothing better than looking at beautifully designed beer bottles.
Well, there is. But these are all I can give you for now.

Web and Development Inspiration

Creative and Development Inspiration 1

A few things I have come across over the past few days. Written and saved here. Mainly so I can come back and find them!



Needing to create mock ups? Screenshot visuals for documentation? It tends to be a fiddly, repetitive process.

Not any more!



Need more serious looking graphs and charts on your site? This script gives you a Github like charts to show your data.



Accessibility. It can be a right nightmare to integrate, but is a must if you want to enable all users to access your site.

Enter Funkify, a plugin that lets you experience it first hand



I love this next one. Think sketched wire frame, but a framework.

This less than formal CSS framework is great, but I’m not sure when it would be used



Everyone loves a good form… Well, it might be helpful.



We are always looking for new ways to engage clients, and users. Whether that’s with a give-away, or a immersive digital campaign.

Enter Phaser, a open source HTML platform framework for games! Pretty retro.



I am not a fan of coding emails. At all. Bouncing the code backwards and forwards through Email on Acid finding IEs quirks, and Lotus Note then breaks everything.

This might be a savour. Lets see. Markup for email – make responsive emails quickly



A nice small one. Balloon.css. A simple, easy to use tooltip style.