Skip to main content
Google Music Lab

Creative and Development Inspiration 21

Dot Colors

A beautifully simple website built for web designers and developers to check their colour codes. Just drop in an array of HEX colours and away you go.

https://dotcolors.co/

 

Notifications – A breakdown

A great article on web notifications from Inclusive Components. In the format of a style guide, it covers how notifications can used correctly, and what aspects of web may need a notification. It has a nice checklist at the end, if you don’t want to read the whole thing…

https://inclusive-components.design/notifications/

 

Googles Music Lab

Google is back with some more fun. The Creative Lab team has built an in browser song maker, just click the grid to add notes when share it with a link. You can also use a MIDI keyboard or sing into it if you so wish. Google have been bringing out some great bits of inspiration and helpers for developers, as shown with Flutter in Creative and Development Inspiration 18.
Share your masterpieces in the comments!

https://musiclab.chromeexperiments.com/Song-Maker/

 

Navigating the complexity of change aversion

Change aversion is a concept well known to website designers and developers. It’s the negative reaction users have to changes in your product, whether that’s functional changes such as updates to product features, or interface changes such as visual redesigns. This article explains how this can be navigated.

https://blog.intercom.com/navigating-the-complexity-of-change-aversion/

 

Google Web Designer

Google Web Designer is a free, professional-grade HTML5 authoring tool. It can be used to build interactive, animated HTML5 canvas, no coding necessary (although you can use code if so inclind). It is more aimed at creating professional looking adverts that can run anywhere on the web. Still in beta but definitely worth keeping an eye on.

https://www.google.com/webdesigner

 

Ethical Design: The Practical Getting-Started Guide

Web designers and developers have an obligation to build experiences that are ethical, and better than using features that expliot human behaviour. This article explains how unethical design happens, and how to do ethical design through a set of best practices. A great read.

https://www.smashingmagazine.com/2018/03/ethical-design-practical-getting-started-guide/

 

Scrollbooster

A drag to scroll JS libary. Works in IE11 Edge, and most modern browsers. It is a great package that allows content to be easily scrolled by touch, and mouse, and is tiny in size. I am planning to use it in a current project to test it out. My only concern is being able to alter options when the device size change, i.e. scrolling vertical, to horizontal.

https://ilyashubin.github.io/scrollbooster/

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.

https://codepen.io/ge1doot/pen/LkdOwj

 

StencilJs

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.

https://stenciljs.com/demos

 

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.

http://esri.github.io/wind-js/

 

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.

https://www.smashingmagazine.com/2018/03/future-mobile-web-design-video-game-design-storytelling/

 

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.

https://speckyboy.com/drag-and-drop-ui/

 

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.

https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/

 

Milligram

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.

https://milligram.io/

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!

https://speckyboy.com/landscape-scenes-css-svg/

 

Epic Spinners

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

http://epic-spinners.epicmax.co

 

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!

https://speckyboy.com/css-content-cards/

 

Unused CSS

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

https://www.jitbit.com/unusedcss/

 

Gulp!

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.
https://scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js

 

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?

https://techcrunch.com/2018/02/13/the-sudden-death-of-the-website

 

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?

https://www.creativebloq.com/features/are-microframes-the-future-of-wireframing

 

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!

https://medium.com/@EliFitch/just-leave-no-job-is-worth-burning-out-for-33b5644942d7

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.

 

basicScroll

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.

https://basicscroll.electerious.com/

 

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!

http://www.thismanslife.co.uk/projects/lab/imac3d/

 

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.

https://github.com/sweetalert2/sweetalert2

 

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.

https://medium.com/walkme/5-ux-design-principles-that-never-go-out-of-style-672cc6ba9047

 

Stimulus

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.

https://stimulusjs.org/

 

Gangbase

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.

https://gangbase.design

 

GradPad

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

http://ourownthing.co.uk/gradpad.html

 

Kutt.it

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

https://kutt.it/

 

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?

https://www.michaelbromley.co.uk/experiments/css-space-shooter/

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”.

https://medium.com/techtrument/bye-bye-material-design-acaebcc7c6b4

 

Micron.js

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

https://webkul.github.io/micron/

 

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.

https://betterwebtype.com/web-typography-quiz

 

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.

https://tympanus.net/Development/GradientTopographyAnimation

 

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!

https://codemyui.com/button-email-optin-dropdown

 

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!)

https://minergate.com/a/2b33a24f39993dc303296b47

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.

https://speckyboy.com/eight-microinteractions-better-user-experience/

 

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.

https://thenextweb.com/dd/2018/01/15/hawaiis-missile-alert-fiasco-highlights-the-importance-of-good-interface-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.

https://lawsofux.com

 

Smooth Gooey Radio Slider Button

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

https://codemyui.com/smooth-gooey-radio-slider-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.

https://blog.prototypr.io/introducing-sketch-icons-2074d9dc9ed2

 

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.

https://tympanus.net/Development/DecorativeLetterAnimations/

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.

https://speckyboy.com/custom-file-upload-fields/

 

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?

https://onextrapixel.com/people-hate-papyrus-comic-sans/

 

Instagram CSS

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

https://picturepan2.github.io/instagram.css/

 

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.

https://medium.com/shanghaiist/chinese-shoe-company-tricks-people-into-swiping-instagram-ad-with-fake-strand-of-hair-54d8a2d8ec1d

 

Spotify for Developers

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

https://beta.developer.spotify.com

 

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.

https://www.designspiration.net

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!

https://appleple.github.io/pretty-scroll/

 

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.

https://blog.sourcerer.io/a-study-of-homepages-over-time-62947486008c

 

Prometheus Free Icon Set

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

https://dribbble.com/shots/4045963-Prometheus-Free-Icon-Set

 

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!

https://tympanus.net/codrops/2017/12/21/css-glitch-effect/

 

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.

https://codepen.io/davidkpiano/full/xLKBpM/

 

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.

https://designshack.net/articles/inspiration/best-instagram-templates-banners/

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.

https://1stwebdesigner.com/top-10-web-design-trends-2017/

 

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

https://www.froala.com/design-blocks

 

Reframe.js

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

https://dollarshaveclub.github.io/reframe.js/

 

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.

https://www.webdesignerdepot.com/2017/12/8-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.

https://designrevision.com/demo/shards/

 

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.

https://blog.figma.com/18-designers-predict-ui-ux-trends-for-2018-2d04d41361c6

 

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.