Skip to main content
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/

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.

https://www.webpagefx.com/blog/marketing/user-experience-matters-marketing/

 

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 😉

http://www.creativebloq.com/features/the-5-biggest-web-design-trends-of-2017-so-far

 

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.

https://speckyboy.com/top-50-css-2018/

 

Codester

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.

https://www.codester.com?ref=Robert27

 

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.

https://scotch.io/tutorials/setting-up-webpack-for-any-project

 

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.

https://tympanus.net/Development/AnimatedStrokes/

 

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

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.

 

Designercize

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.

https://designercize.com/

 

Scrollama

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.

Example: https://pudding.cool/2017/04/beer/

https://github.com/russellgoldenberg/scrollama

 

Threed

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

http://threed.io/

 

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.

https://designshack.net/articles/graphics/design-trend-obstructed-text/

 

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.

https://designshack.net/articles/typography/every-design-needs-three-levels-of-typographic-hierarchy/

 

YELLOW!

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.

http://www.webdesigndev.com/vibrant-yellow-website-designs/