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

Purple is 2018 colour

Creative and Development Inspiration 9

Because next week is Christmas (and I won’t be creating a list, family and all that) I have pulled together a longer selection than usual. This week there have been some really great pieces of code coming to the surface, as well as some great graphic design inspiration.

 

DesignClever

I’ll kick off with DesignClever. This is a brilliant design inspiration website that collates beautiful design from all all corners. It was created to showcase work from designers all over the world. Definitely one to keep an eye on!

http://www.designclever.co.uk/

 

Pantone Picks 2018 Colour

The blue-based purple has been selected for its “provocative” and “thoughtful” shade, which nods to current trends in areas like spirituality and space exploration. This article explains their reasoning.

https://www.designweek.co.uk/issues/4-10-december-2017/pantone-announces-ultra-violet-purple-colour-year-2018/

 

How Efficiency Makes you a Better Designer

This is something a bang on about all the time, so it’s nice when someone else writes an article about it and breaks it down. Being efficient can not only make a job more profitable, it makes the process seem easier. This issue is working out where to start, and what the right areas are.

https://speckyboy.com/efficiency-better-designer/

 

Tracy – From Paper to Vector

This little tool could be a life changer. Rather than scanning in your drawing, and running the JPG through Illustrator (if you have it), the image can be passed to this website and it spits out an SVG. Give it a whirl.

http://www.usetracy.com/

 

Popmotion

Described as a functional JavaScript motion libary, Popmotion is a 11.5kb tool for animators and interaction developers. The animations are smooth, and the code required to use it is simple and understandable. It is also modular, allowing you to pick and choose certain parts, depending on what you require.

Take a look at the examples.

https://popmotion.io/

 

On-Change

This is a small library that gives you the ability to watch variables and objects to check for any changes. It works recursively, so will detect changes even if you modify a deep property. A neat piece of code!

https://github.com/sindresorhus/on-change

 

Specificity Visualiser

This tool gives you a quick overview of selectors and their specificities across a CSS file in bird’s-eye view. It’s a visual way to identify potentially problematic patterns and especially useful for analysing very big and complex style sheets.

https://isellsoap.github.io/specificity-visualizer/

 

30 Seconds of Code

This has appeared on a fair few blogs over the last couple of days. Understandably so. It is a list of code snippets that take less than 30 seconds to understand, and will probably save you a lot more than 30 seconds of your life. Some brilliant problem solvers here!

Definitely worth a bookmark.

https://github.com/Chalarangelo/30-seconds-of-code

 

That’s all for this week. Have a great Christmas/break and leave any comments below.

Heydays new website

Creative and Development Inspiration 7

This week I have brought together 6 links that cover design, code and process. Some great pieces of inspiration as well as some hopefully useful snippets to enhance your work.

 

Website Design Example

A brief look at the new website for Heydays from Oslo. Its nice. Its simple. I like it. Also, its pretty on mobile (because responsive). I like posts like this, great for inspiration.

https://formfiftyfive.com/showcase/heydays-new-website-2

 

Minify PNGs with UPNG

According to this site, they are significatly better than TinyPNG. I bring you UPNG. Either way, here are links for two brilliant sites to minify your images.

http://upng.photopea.com/

 

Animate Plus

This JavaScript animation libary is centered around performance and flexibility. Built to work with mobile, and only 2KB when minified and gzipped. From the examples it seems like a winner!
https://github.com/bendc/animateplus

 

Designers should move slowly

A great article on why design should be thoughtly thought-out, and focused on user-first. It links through to some other very interesting articles as well!

https://www.fastcodesign.com/90152218/designers-its-time-to-move-slowly-and-fix-things

 

One for the Photoshoppers

This new Photoshop CC tool lets users detect objects with one click. No more lasso tool! (Although I’m dubious it will work every time)

http://www.creativebloq.com/news/smart-new-photoshop-cc-tool-detects-objects-with-one-click

 

Design Better: The Design System Handbook

A comprehensive design system template to reduce design debt and accelerate the design process. It walks through each stage of the system and provides some brilliant resources. A great finisher for this weeks roundup!

https://www.designbetter.co/design-systems-handbook

 

If you have an examples of great work, resources or snippets let me know in the comments so I can add them to next weeks Inspiration.