Skip to main content
Vector Art

Creative / Development Inspiration 27

Because we had a bank holiday (and I was BBQing and generally being sociable) I wasn’t able to get this weeks rundown out when I had hoped. However, you probably wouldn’t have read it anyway! I had a massive list of bookmarked articles and examples for this week, and have managed to get it down to 7 (all about quality over quantity here!). This weeks creative design and development inspiration covers a wide range of topics, from a incredibly small facial recognition library, how Photoshop shouldn’t be the final decision, and some pretty vector designs.

 

pico.js: a face-detection library in 200 lines of JavaScript

This library has so many potentials. A face detector in only 2kb of code. Take a look at the demo!

https://github.com/tehnokv/picojs

 

Scrolling interactions and techniques

Some greats do’s and don’ts of scrolling interactions in design. The article breaks down different beliefs about scrolling interaction and decides if they are correct. Some great examples including Nikes app and the Medium UI. This comes just weeks after I spoke about Scrollbooster on week 21, a great scrolling library – definitely worth a look if you haven’t already!

https://uxdesign.cc/scrolling-interactions-techniques-d6dafbfa4716

 

Optical Adjustment

So many of us rely on Photoshop and the concept of “Pixel Perfect” development. Luke Jones discusses how this isn’t always thew best way. The irrational mind of a human needs to decide whether something looks optically correct or not, because we can see and understand a context when a computer can’t.

https://medium.com/@lukejones/optical-adjustment-b55492a1165c

 

UN POSTER AL DÍA

Some great vector illustrations to give your brain something a bit different!

https://www.behance.net/gallery/64617617/Un-poster-al-dia

 

The Ultimate Guide to Font Sizes in UI Design

This is very text heavy, but well worth a bookmark. Erik puts 4000 words on the internet to help UI designers with the correct font sizes for different devices. No fear, it has a Table of Content to navigate!

https://learnui.design/blog/ultimate-guide-font-sizes-ui-design.html

 

Particle Effects for Buttons

I personally wouldn’t use this effect on any projects, but it is a nice effect and example of what can be achieved.

https://tympanus.net/codrops/2018/04/25/particle-effects-for-buttons/

 

Responsive Type – Sass template

As Kyle states: “The last time you will ever have to worry about responsive type, seriously! Configure all type settings in one file using sass variables.” I haven’t used this yet, but I am definitely going to!

https://github.com/kyle-villeneuve/responsive_type

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/