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/

SVG Landscape Polygon Background

Creative and Development Inspiration 15

After a weeks break (Girlfriends birthday) I am back with another web dev/design rundown. There are some great UX/UI articles, as well as some darn pretty pictures.

 

People Don’t Scroll ( and Other Page Length Myths )

A few page length myths debunked. A few of those “beliefs” that are thrown around and checked against studies to see what really is correct! Do people understand scroll? How long should a page be?

https://uxplanet.org/people-dont-scroll-and-other-page-length-myths-c7ca720a0595

 

UI Design Inspiration #3

A series of UI Design Inspiration from FreeUi.Design. Some beautiful examples of icons, applications and website. Definately worth a look.

https://freeui.design/ui-design-inspiration-3/

 

Daily Life Interactions To Learn UX From

If we look into our everyday life, it consists of continuous series of microinteractions that often go unseen, almost at a sensory level. The thing is, they feel natural but they are 100% artificial, which means someone designed them and as UX researchers, we might want to learn from it.

https://uxplanet.org/daily-life-interactions-to-learn-ux-from-2888e1ca9d80

 

SVG Backgrounds

Customizable SVG patterns and background designs for websites and blogs. Great for adding some colour, but keeping the page load time down!

https://www.svgbackgrounds.com/

 

The 12 Do’s and Don’ts of Web Design

If you design websites, you know that making your designs useful and enjoyable is your top priority. It can be an overwhelming task for anyone who just recently started creating websites, so to simplify it, Adobe has created a simple list of do’s and don’ts to keep in mind when designing your next web design project.

https://theblog.adobe.com/12-dos-donts-web-design-2

 

Build a Download Button Full of Micro Interactions

On the same vain as most of the other articles, UX! Learn how to build a button that is full of useful micro interactions. Some coding goodness to end the list.

https://scotch.io/tutorials/build-a-download-button-full-of-micro-interactions

Material Design Example

Creative and Development Inspiration 14

This week I have found some great links for UX snippets and examples, some CSS/JS magic, and a little titbit for you cryptocurrency geeks. All in a days work.

 

Bye bye Material Design

Considering Material Design for your next project? Emin Durak thinks otherwise. He belives that it is, I quote, “premature, shallow and arguably incorrect approach”.

https://medium.com/techtrument/bye-bye-material-design-acaebcc7c6b4

 

Micron.js

A Microinteraction Libary Built with CSS Animations and JS. A great plug and play libary for a quick MVP.

https://webkul.github.io/micron/

 

How Much Do You Know About Web Typography

Web typography is a bit tricky. So many quirks and snippets of information you need to know. Take this web typography quiz and test your typography knowledge.

https://betterwebtype.com/web-typography-quiz

 

Gradient Topography Animation

Codrops is back with a great new code snippet. An incredibly sleek organic SVG shape layer animation based on Diana Hlevnjak’s work “Gradient Topography”. Powered by anime.js.

https://tympanus.net/Development/GradientTopographyAnimation

 

Button with Email Dropdown

Code My UI has brought us a nice little snippet to create a drop down input field from a button. Keep everything tucked anyand tidy!

https://codemyui.com/button-email-optin-dropdown

 

Jump on the Cryptocurrency Bandwagon

Minergate is a piece of software that mines a varity of cryptocurrency coins in the background whilst you work. You can set the level depending on how much you need to use your CPU/GPU. Keep the referral link, and I get a small percentage of the fee (nothing is taken from you!)

https://minergate.com/a/2b33a24f39993dc303296b47

Poor UI Missile Threat

Creative and Development Inspiration 13

2018 so far seems to be the year that UX/UI is at the forefront of every-bodies mind. Maybe that’s just me though? Well with that thought, here are a few links to tickle your Monday brain. Some are educational some are just pretty.

 

Microinteractions to Help Improve UX

As your users spend time on your website, they are constantly interacting with its features – and some of those small interactions matter more than you might think.

Each small movement has an impact on their overall experience. Use these small moments to improve your user experience, and ensure users follow through on further interaction as they begin navigating your website.

Speckyboy covers some examples of Micro interactions, and goes into a little detail.

https://speckyboy.com/eight-microinteractions-better-user-experience/

 

Hawaii’s missile alert fiasco highlights the importance of good interface design

We all read the news. The panic that struck residents and tourists in Hawaii on Saturday morning over the past weekend – owing to a public emergency alert about an incoming ballistic missile that was mistakenly transmitted – could have been easily avoided with the help of good design.

https://thenextweb.com/dd/2018/01/15/hawaiis-missile-alert-fiasco-highlights-the-importance-of-good-interface-design

 

Laws of UX

This site highlights a collection of key maxims that designers should consider when building user interfaces. A really clean site with some great insight.

https://lawsofux.com

 

Smooth Gooey Radio Slider Button

This is just something a bit different. A Codepen of a nice micro interaction for a radio button.

https://codemyui.com/smooth-gooey-radio-slider-button/

 

Sketch Icons – Generate a Dynamic Icons Libary

This one is for the designers. Creating a dynamic icon library is time consuming. Here is an article outlining how to do it manually, and then a link to a great plugin to streamline your workflow.

https://blog.prototypr.io/introducing-sketch-icons-2074d9dc9ed2

 

Decorative Letter Animations

Something pretty to finish off. Tympanus has done it again with some great text animations. Each example has a Github link to see the code snippet.

https://tympanus.net/Development/DecorativeLetterAnimations/

Spotify releases development API

Creative and Development Inspiration 12

A mixed bag this week. Some great new additions to the code snippets bookmark list, as well a new design inspiration website. Also, Spotify likes developers!

 

9 Custom Open Source File Upload Field Snippets

Upload fields are one of the toughest inputs to restyle. If you’re hoping to customize your upload inputs, this gallery will help. Speckyboy has collected 9 handmade upload fields from CodePen that prove you can restyle the field to look however you want.

https://speckyboy.com/custom-file-upload-fields/

 

Why do People Hate Papyrus and Comic Sans?

The world we live in is a mix of opinions and it’s hard to definitively agree on anything. But one thing’s for sure—Comic Sans and Papyrus are the worst. Why do we feel this is the case?

https://onextrapixel.com/people-hate-papyrus-comic-sans/

 

Instagram CSS

Want to bring Instagram filters to your site? Wait no more, this Github resposity has your back.

https://picturepan2.github.io/instagram.css/

 

Company Tricks People into Swiping Instagram Ad with Fake Strand of Hair

A cunning Chinese company has received both props and scoffs for a devious Instagram Stories advertisement featuring a fake strand of hair over some heavily discounted sneakers. Not such a development article, but a comment on advertising design.

https://medium.com/shanghaiist/chinese-shoe-company-tricks-people-into-swiping-instagram-ad-with-fake-strand-of-hair-54d8a2d8ec1d

 

Spotify for Developers

Spotify have opened up an API for us developers. So. Many. Ideas.

https://beta.developer.spotify.com

 

A New Inspiration Feed – Designspiration

A selection, concoction, amaligmation of great, interesting and creative designs. All those descriptive words show how I feel about this site. It’s good.

https://www.designspiration.net

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.