Creative / Development Inspiration 33

Arara Bike

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.

https://arara.bike

 

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.

https://bulma.io/

 

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.

https://jmperezperez.com/fostering-web-performance-culture