Creative / Development Inspiration 64

Screenshot of CodePen rotating SVG example

Tips on rotating SVGs, automatic deployment of WordPress using Trellis, and blog design on a budget. This weeks design development inspiration has a right mix of examples.

Enjoy!

 

Website Inspiration

Concrete

Toronto based creative agency. Big images, quick loading site. Simple. No messy animations. Just gets the point across.

Looks like it needs to sort its accessibility rating, but its performance is bang on. Great work here.

https://www.concrete.ca/

 

Designer Resources, Examples and Inspiration

Blog Design on a Budget

A study found that peoples opinion’s on the sites trustworthiness had little to do with the content, it had to do with the site’s design. A design can leave a lasting impression, and readers will leave if the design doesn’t come off as trustworthy or professional. So, what does a good design design really need to keep people around?

https://www.sparringmind.com/blog-design/

 

Development Snippets, Samples, and Articles

Rotating SVGs within SVGS?

Add transform-box: fill box to get a controlled animation. This example by Cassie Evans shows the potential.

https://codepen.io/cassie-codes/pen/RvXZEd?editors=0100

 

Automatic WordPress Deployment Sucks Less with Trellis

Set up a local WordPress development environment in minutes using Trellis, then deploy it to production fast with free SSL and two-way database syncing. I talk about how to set up local development with Trellis and Bedrock here.

https://code.lengstorf.com/learn-trellis-wordpress-roots/

 

Blobs!

That new shape based fad on the interwebs. Blobs are everywhere at the moment, and CSS Tricks walks us through how to do it. Them. This.

https://css-tricks.com/blobs/

 

Playful Masonry Image Gallery

A responsive example of masonry image gallery using Masonry JavaScript grid layout library, GSAP’s TweenMax and ScrollMagic.

https://coidea.website/categories/challenges/playful-masonry-image-gallery

 

How Whimsical is Built

I use a great tool called Whimsical to manage my user flows, wire-frames, sitemaps. All the good stuff. I was always intrigued how it was built – well here it the explanation.

https://whimsical.co/tech/how-we-built-whimsical/

 

A bit of everything

Why Parallax Scrolling Needs to Die

It’s an outdated attention-goosing technique that most designers will probably be embarrassed to look back on. Remember “banner blindness”? here is the next stage.

https://www.fastcompany.com/90309395/why-parallax-scrolling-needs-to-die

 

Visualise a Page of Website

Need some super quick key stats? Think word count, internal or outbound links? This site has your back!

https://www.statsify.us