Creative / Development Inspiration 33
A great collection of new inspirational website examples, snippets for the web developers, and a break down of design strategies. Also look into how to foster a performance based culture, as well as some brilliant animated logos using CSS and JS. This weeks Creative and Development Inspiration hopefully helps you broaden your understanding of web design, and create a better web experience for your users.
Website Inspiration
I have been scouring the web for examples of websites to help get your brain moving in the right direction. This week I have a great animated story, as well as some nice, clean sales sites.
Oat the Goat
A really well created interactive story about a Goats adventures. Created by Bullying Free NZ to teach children about bullying.
http://oatthegoat.co.nz/intl.html
Arara
A sales site for battery free bike lights. Simple, but effective. Great use of screen sections to show off the product, and well broken down.
Spectacles
A clever use of video and images to break up content sections. Each section themed for a particular message, and a great use of tech to increase site speed.
https://www.spectacles.com/uk/
Designer Resources, Examples and Inspiration
The Problem with Patterns
It is easy to fall into the trap of always using pre-determined design patterns. User needs a form? ok, we already have a standard style. Unfortunately this takes away from the users need, and stops us from thinking about the design. Sometimes maybe we should stop and consider what we need the pattern for…
http://alistapart.com/article/problem-with-patterns
10 Amazing Examples of Animated Logos
How about using animated SVGs, and a combination of CSS and Javascript to enhance your brand? 1stwebdesigner has collated a selection of animated logos to give you some inspiration.
https://1stwebdesigner.com/css-javascript-animated-logos/
Development Snippets, Samples, and Articles
Webpack Critters Plugin
Critters is a Webpack plugin that inlines your app’s critical CSS and lazy-loads the rest. It’s makes it a good fit when inlining critical CSS for prerendered/SSR’d Single Page Applications. It was developed to be an excellent compliment to prerender-loader, combining to dramatically improve first paint time for most Single Page Applications.
https://github.com/GoogleChromeLabs/critters
Animista
A great CSS animation builder. So many pre-built options that you can build upon, or start from scratch. Great for those tricky styles.
http://animista.net/play/attention/pulsate/pulsate-bck
Bulma
Bulma is an open source CSS framework based on Flexbox and used by more than 100,000 developers. Very easy to customise, allowing a quick to launch product. A framework that is at the top of my list to use on my next project.
Three Dots
Something I never tend to think about until the end of the project… the loading animation! This site has a collection of three dot loading animations with code snippets.
https://nzbin.github.io/three-dots/
A bit of everything
Fostering a Web Performance Culture
Web Performance is not only about understanding what makes a site fast. It’s about creating awareness amongst both developers and non-developers. Performance is a feature and needs to be prioritised as such. There tends to be a lot of money riding on it.
