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

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

Animated button tooltips

Creative and Development Inspiration 5: Feature Highlights

Finding ways to display hidden information for users can be tough. The number of times brochure websites have required some level of user engagement and I have had to scour the web for examples such as these. I thought I should share.

 

Project Feature Highlights

By adding tooltips into div elements they can be positioned anywhere on a page. I imagine this could get a big fiddly for a responsive page, but nothing a few calculations can’t fix!

https://codepen.io/ianfarb/pen/qkpJH

 

Intro JS

A step-by-step guide and feature introduction script. It has no dependencies and is pretty small! Very easy to integrate.

https://introjs.com/

 

Animated Tooltips

Simple, effective use of tooltips. There are three styles. Fading, expanding and swing. By using the HTML5 data-title attribute they minimize the amount of extra HTML required.

https://codepen.io/neogomo/pen/BjqJzr

 

Automated Tooltips

Attractive, small tooltips that effectively display extra information for the user.

https://codepen.io/adwin/pen/vGqzLq

 

Animated button with Tooltip

I have included this, not so much for the button, but how the tooltip looks. If this was applied to a product image to show extra information, it would work brilliantly.

https://codepen.io/takeradi/pen/oxbGpb

Google Material Mobile Menus

Creative and Development Inspiration 4: Hidden Menus

Today’s post is focusing on code snippets for hidden menus. These could be used on both mobile and large devices. Although they are not particularly attractive menus, I am focusing more on the usability and style. The purpose is to help inspire.

 

Simple multilevel menu

This menu is a code snippet from Cody House. It gives two examples, one plain CSS, the other with JQuery animations. Simple, but user friendly.

https://codyhouse.co/demo/multi-level-accordion-menu/index.html

 

Pure CSS Accordion with Simple Microinteractions

This mobile accordion menu moves icons down as the user selects a different section. The animated micro interactions make the whole experience feel more crafted.

https://codepen.io/jcoulterdesign/pen/OMmZPd

 

Breadcrumb Navigation

This subtle menu gives the user more information when they hover. The effect works really well, however I am dubious about how it would work with touch devices. The menu would have to be touch to show, which adds a touch point. Still a nice effect though.

https://codepen.io/andreasstorm/pen/prWEvj

 

Circular Material Design Menu

I personally don’t like how this menu looks. However, the concept is really slick. This style could be altered to look a bit nicer and really work. I am a fan of the animation though!

https://www.bypeople.com/colorful-material-css-circular-menu/

 

Google Material Inspired Circle

Staying on the Google Material style, here is another simple menu that could be great if styled slightly differently.

https://www.bypeople.com/google-inspired-css-floating-action-button/

 

Menu Overlay Focus Change

This is completely different to menus I am used to seeing. Although it needs some tweaking to work on smaller devices, the effect it great. By moving the cameras focus when the menu is open adds a whole new layer to the site.

https://codepen.io/carasin/pen/aBEZEd

 

CSS & JS Toggle Menu

A bit of an experiment with SVG icons what chage colour when selected. It uses a subtle material transition to make it look dynamic. Really nice for use with a more modern B2C site.

https://codepen.io/chrisgannon/pen/EyaPZZ

Tympanus Image Hover Effects

Creative and Development Inspiration 3: Hover Effects

Today’s list is a selection of mouse over / hover effects. These animations and transitions can make a massive difference between just another website, and a sleek user friendly interface that readers want to keep coming back to.

 

Tympanus Hover Effects

The first two links are from Tympanus. A brilliant site with hundreds of code snippets. I really recommend keeping an eye on this website, both as a developer, and a designer.

Each link has multiple examples within, and showcases different ways of animating the same element.

https://tympanus.net/Tutorials/CaptionHoverEffects/

https://tympanus.net/Development/HoverEffectIdeas/

 

UX Design Agency Info Panels

UX Design Agency have used hover effects brilliantly on the home page panels. A gentle zoom and reveal of essential information is really engaging.

https://ux-design.agency/

 

Product Card

This product card is very minimal, and shows the user exactly want they need to see. My only concern it is very JavaScript heavy, but I’m sure this could be rewritten to use plain CSS3.

https://codepen.io/virgilpana/pen/RNYQwB/

 

Direction Aware Hover

This piece of code is a bit old, going back to 2013, but is still relevant. As the user hovers over each panel, it moves across from the one before.

https://codepen.io/noeldelgado/details/pGwFx

 

Panel Hover Effect

This e-commerce panel shows the user a product shot, and basic information, and then provides a purchase CTA on hover.

http://cssdeck.com/labs/l6pzd5vm

 

True Paradise on Earth

An example of a blog panel. Simple, elegant. Paradise.

http://www.louistiti.fr/demo/Concept-Design/Carte-Article-UI/

 

One thought it that designers and developers need to remember not all devices have hover, specially as large screen touch devices are getting more traction in the consumer market. Any information that is shown on hover, needs to be accessible for these other users as well.