Skip to main content
Visual Creative Studio Illustration

Creative / Development Inspiration 37

Brilliant website inspiration, as well great articles on disrupting the normal design process. Plus web design style guides, and stupid design mistakes. Some great CSS techniques if you are a front end developer, as well as an exciting new virtual whiteboard.

It was great getting the articles together for this week. Some top writers, thoughts and concepts, as well as inspiration. Enjoy this website design and development inspiration rundown!

 

Website Inspiration

The past few weeks I have featured several agency websites to show how good design and layout can be simple and elegant. These two sites build on top of this even more!

 

April Zero

April Zero is a demo site for showing the information Gyroscope collects on you. The way it displays data, and quite honestly how pretty it is really appealed to me!

http://aprilzero.com/

 

Vizue

A creative studio based in Slovakia. This is one of the most creative sites I have seen in a while. Great use of animated SVGs to tie each section together. A great piece of work.

http://vizua.sk/en

 

 

Designer Resources, Examples and Inspiration

 

Priority Guides: A Content-First Alternative to Wireframes

Finding a better process for designing websites is a big priority for me. A lot of “Digital Agencies” throw a design together, then add the content into pre-existing boxes. Quite frankly that makes no sense. Why add content that isn’t required? The internet already has enough meaningless drivel. Every message should be considered and have a point.

A List Apart takes us back to designing wireframes, and discusses how there may be a better alternative.

https://alistapart.com/article/priority-guides-a-content-first-alternative-to-wireframes

 

How To Create a Web Design Style Guide

If you are designed a site for a client that is likely to be around for a while, or you are redesigning your own site a style guide is a must. Not only does it allow you to go back to a central place to remind yourself, it stops you redesigning an element that already exists! It also allows third parties and future development teams follow brands guidelines.

https://designmodo.com/create-style-guides

 

10 Small Design Mistakes We Still Make

We will always want the principle “dont make me think” to apply to everything. The goal to each page should be self-evident. The average user should know exactly what is going on.

This article covers 10 mistakes that regularly occur, that stop the user from progressing easily.

https://uxplanet.org/10-small-design-mistakes-we-still-make-1cd5f60bc708

 

Development Snippets, Samples, and Articles

 

Text editing techniques every Front-End developer should know

This almost didn’t make it onto the list, until I realised it was one of the most helpful articles I have read in a while regarding writing code.

Any Front-end developer is going to spend a lot of time typing and manipulating code. It pays to know how to ‘drive’ your editor to get the best performance. This comes just in time after my post on my new editor setup.

https://benfrain.com/text-editing-techniques-every-front-end-developer-should-know

 

Combining the Powers of SEM and BIO for Improving CSS

SASS and LESS can take your loverly code, and turn it into a mess once complied. It can also make file sizes larger than needed.

SEM and BIO are coding techniques that allow your code to be scale-able, maintainable, and with a simple structure. A great read, and something to really consider.

https://css-tricks.com/combining-the-powers-of-sem-and-bio-for-improving-css

 

 

A bit of everything

RyeBoard

Still in development. But god damn this is going to be useful! Think Trello, now think whiteboard. But on the cloud!  Currently only on desktop, but so so interesting!

http://www.ryeboard.com

 

700 Screenshots of Developers’ Websites

Something nice and simple. 700 screenshots of developers websites. Maybe you can get some inspiration? Maybe you are just intrigued?

https://alexbezhan.github.io/devwebsites/

 

 

 

 

Grain and Mortar Banner

Creative / Development Inspiration 36

Website design and development inspiration can be tricky to find. This week we have the good stuff. 2 design agency websites for inspiration, several design articles on design mindset as well as bad UX/UI patterns. On top of that there are 2 new JS libraries, a CSS framework, and a great new React JS test website.

 

Website Inspiration

Grain and Mortar

A brand strategy and design agency website, Grain and Mortar have created something that is fast loading, slick, and gets the information across well.

https://grainandmortar.com/

 

45royale

This is another agency site. 45royale are a web design / development studio and their site shows it. Everything is laid out simply and easily digestible. My only issue with it, is after running Google Lighthouse, it falls down hard on Accessibility. If you are designing for the web, make it accessible…

https://45royale.com/

 

Designer Resources, Examples and Inspiration

You Can’t Design Without a Growth Mindset

Since failure is such an inevitable and essential part of design, it’s important to be surrounded by people who can not only accept, but embrace failure. One way to do this is to cultivate a growth mindset, both among team members as well as the organisation as a whole.

https://zurb.com/blog/you-can-t-design-without-a-growth-mindset

 

The Most Hated UI & UX Pattern of 2018

This article takes a deep look into some of the worst UI/US patterns about, asks why, and breaks them down. For example, why did infinite scroll fail Etsy? (as well as many other sites). How preloaders are just a smokescreen for poor performance. A very interesting read.

https://icons8.com/articles/most-hated-ui-ux-design-pattern

 

Development Snippets, Samples, and Articles

Shepard

Guide your users through your website with this JavaScript libary.

https://shipshapecode.github.io/shepherd/docs/welcome/

 

Snack.Expo

This site was such a great find! Run React JS code right in the browser, include third party scripts, and push tests to your mobile. A brilliant tool, and free!

https://snack.expo.io/

 

Vivify

Another animation library, that you can just plug in. Its new, and its free!

http://vivify.mkcreative.cz/

 

Stream – Ui Kit

Stream UI Kit is beautiful Open Source Bootstrap 4 UI Kit. It has 5 complete pages and includes over 20 reusable and customizable UI Blocks. It’s lightweight and only ~17kb when minified.

https://htmlstream.com/templates/stream-ui-kit

 

A bit of everything

Better Research, Better Design, Better Results

When content isn’t considered until the end, or previous data hasn’t been looked at to make solid design decisions problems occur. When the client is not forewarned about content strategy (because there isn’t one) or the site is not built with SEO in mind, problems occur. Smashing Magazine looks at how and why this must be re-considered.

https://www.smashingmagazine.com/2018/07/better-research-design-results/

Overflow - Userflow

Creative / Development Inspiration 35

Why you need to care about UX design, some brilliant tips on improving mobile interaction and how to create single element patterns. This weeks creative website design and development inspiration also looks at how to create HTML5 sprites and a beginners guide to A/B testing.

As well as going over keeping up with what is new on “that there interwebs” I also use this blog for a place to keep all the best bits that I want to remember.

Its easier to find here!

 

Website Inspiration

Overflow

“User flows done right” is this sites tagline. No wonder the site is perfectly designed. Perfect landing page with large header, and understandable call to action (I think I might use them).

https://overflow.io/

 

Designer Resources, Examples and Inspiration

Why you need to care about UX design

Understand what your customers want, keep your customers attention, and give them a well written story. Why brands really cannot afford to ignore UI or UX.

https://www.retailtechnews.com/2018/06/26/why-you-need-to-care-about-ux-design/

 

7 Effective Tips to Improve Mobile Interactions

The quality of mobile design can be measured simply. When the process of usage is so smooth and effortless that people don’t even think about it, it is the sign of the professional design work. On the other hand, if there are some problems in the interaction system, users will definitely notice them and won’t be pleased about it. This article breaks down 7 places that could be improved.

https://design4users.com/2018/06/22/7-effective-tips-to-improve-mobile-interactions

 

Development Snippets, Samples, and Articles

Introducing the Single Element Patterns

This is something I have been pushing for, and manoeuvring my workflow to get to this point. A project based on lots of small elements that can be reused over and over again. This article breaks down a few essential rules you should follow to make sure you can work faster.

https://medium.freecodecamp.org/introducing-the-single-element-pattern-dfbd2c295c5d

 

Animating Sprite Sheets With JavaScript

Martin Himmel walks you through how to animate a sprite in HTML5 Canvas. Easy to follow, and a hell of a lot of uses!

https://dev.to/martyhimmel/animating-sprite-sheets-with-javascript-ag3

 

Building a chat app with React.js and Chatkit

I had never heard of Scrimba before finding this tutorial, but I’m so glad I have. This tutorial walks you through building a chat app with React.js and Chatkit. Each step has a video, and you can take your own pace.

https://scrimba.com/g/greactchatkit

 

Glide JS

A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more. Looks like something I will definitely be using moving forwards!

https://glidejs.com/

 

A bit of everything

A Beginners Guide to to A/B and Multivariate Testing

If you want to improve site conversion, A/B and Multivariate Testing are invaluable tools. This article run through the different services available, and how to get moving in the right direction.

https://boagworld.com/design/split-testing

 

User Journey: Design Flows Instead of Screens

Most designers are obsessed with screens. They have features and screens piled up, but rarely see their apps with their users’ eyes. Familiar? Well, it’s time to start thinking in flows instead of screens. A user journey shows how your people reach their goals in your app. This article introduces the basics of creating a user journey with some tips and specific examples.

https://uxstudioteam.com/ux-blog/user-journey-design-flows/

bitmoji api output

Creative / Development Inspiration 34

Website inspiration in the form of a Tech Venture, sexy background animations, use the Bitmoji API, and why you should go and get that money! This weeks Creative and Development Inspiration is slightly shorter than usual. Mainly because of my crippling 2 day hangover. However, I believe that the articles and links I have pulled together this week are still that top quality information 😉

 

Website Inspiration

Rocka

This tech venture builder has put together a really interesting website, using parallax in a really enjoyable way. The use of vibrant colours and subtle animations add to the effect.

https://rocka.co/

 

Designer Resources, Examples and Inspiration

Cool Backgrounds

From the creator of https://cssgradient.io/, Cool Backgrounds is their answer to customised background images. Whether you need something for a social media background image, or hero image on a website, you might find something that works for you.

https://coolbackgrounds.io/

 

Interface Exploration: Depth and Color

An experiment in using depth and Colour to create a new UI style. An interesting article, worth a read.

https://blog.marvelapp.com/interface-exploration-depth-color/

 

Development Snippets, Samples, and Articles

Bokeh Effect

A great background animation. The Bokeh Effect is the aesthetic quality of the blur produced in the out-of-focus parts of an image produced by a lens. Bokeh has been defined as “the way the lens renders out-of-focus points of light”. This codepen takes that style, and makes it live.

https://codepen.io/Mamboleoo/full/BxMQYQ/

 

Optic

AI Pair programming that automates those tasks you don’t want to do. Saves you time and helps with your workflow. From what I can see it is only build for JavaScript, but this isn’t a massive issue. ReactJS is getting so large this tool is a definite help.

https://useoptic.com/

 

Libmojo

Use the Bitmoji API with this tiny library to add customised Bitmoji avatars to your newest web project. Libmoji makes it easy for you to integrate Bitmoji avatars into your project without the need for having a Bitmoji or Snapchat account

https://github.com/matthewnau/libmoji

 

Don’t Use The Placeholder Attribute

The placeholder attribute contains a surprising amount of issues that prevent it from delivering on what it promises. This has been my believe for a while now, but here is someone smarter than me putting it into words.

https://www.smashingmagazine.com/2018/06/placeholder-attribute/

 

A bit of everything

Fathom

Web analytics, that is simple, trustworthy and open source. With the introduction of GDPR it is a perfect, non-bloated way to track your website usage.

https://usefathom.com/

 

Take that money

This isn’t my normal post, but it sits well within the design/dev world. It is something that really confuses me. How so many people don’t understand it all comes down to money ( “but Rob, I do it for love”. That’s brilliant, but love doesn’t put a roof over your head, not if you don’t live with your parents ).

http://www.erickarjaluoto.com/blog/take-the-money/

SVGator

Creative / Development Inspiration 32

This week has a very diverse range of links and articles. Some brilliant websites for inspiration, ranging from clean portfolios to more modern app landing pages. Some tit-bits to tickle the taste buds of web designs, and finishing it off with some development snippets. I hope you find something new in this weeks Creative and Development Inspiration.

 

Website Inspiration

I have been scouring the web for examples of websites to help get your brain moving in the right direction. This week I have found several great portfolio sites, as well as some nice, clean sales sites.

 

Dejan Markovic

Simple, clean website. But for some reason really stood out to me.

http://dejan.works/

 

Matt Farley

Simple and clean once again, but with a nice flow to it.

http://mattfarley.ca/

 

Cronhub

Cronhub is a CRON monitoring service. The website is clean, well broken down, and easy to find information. This can be very difficult to achieve.

https://cronhub.io/

 

Monetha

A deal maker based on Block chain. Monetha’s website is modern, and a great landing page for the app.

https://www.monetha.io/

 

Designer Resources, Examples and Inspiration

 

7 Web Design Trends for 2018 – Don’t Fall Behind

Orana Creative have pulled together a must read guide for web design trends in 2018.  I wouldn’t say I fully agree, but they highlight some good points and it is always interesting to see what other people are pushing.

https://www.oranacreative.com/dont-fall-behind-follow-2018-trends-web-design

 

SVGator

Animate SVG easily. As simple as import, animate, export. There is no coding required. A very simple Adobe like interface for animating your SVGs.

https://www.svgator.com/

 

Payment Checkout Flow Animation

A beautifully designed checkout flow concept. The journey the user takes from selecting the item, to finally paying for it. An interesting use of micro-interactions and transitions between pages.

https://dribbble.com/shots/4689263-Payment-Checkout-Flow-Animation

 

Development Snippets, Samples, and Articles

 

Guzzle

I am probably a bit behind the times here, but I thought Id share as I have only just found it. A PHP HTTP client and framework for building RESTful web services. Now I know that more and more people are moving towards Node.js for this sort of thing, but I have a soft spot for PHP.

http://guzzle3.readthedocs.io/

 

Atomic CSS

Atomizer is a tool for creating Atomic CSS. Generate an Atomic stylesheet dynamically from the Atomic classes you’re actually using in your project (no unused styles!), or predeclare styles in configuration – it’s up to you. Atomizer is not opinionated, brings no CSS of its own, and integrates nicely with your favorite task runner.

https://acss.io/

 

tingle.js

aA minimalist and easy-to-use modal plugin written in pure JavaScript (We like modals here, also features RModal in Creative and Development Inspiration 30).

https://robinparisi.github.io/tingle/

 

The State of Changing Gradients with CSS Transitions and Animations

A well written article by CSS Tricks about CSS transitions and animations. The pitfalls and issues for working with these properties across many browsers (cough, IE, cough). Well worth the read.

https://css-tricks.com/the-state-of-changing-gradients-with-css-transitions-and-animations/

 

A bit of everything

How to Plan Website Design

Web design can generally be seen as what engages the users eye. What is pretty enough to keep them there. This is not true. What you really want to do, is engage the user and then convert them.

https://anartfulscience.com/How-To-Plan-Website-Design.php

 

Atom IDE Logo

My Atom Package and Theme setup

I have recently moved over to Atom from Brackets. I didn’t want to change IDEs but Brackets doesn’t play well with ReactJS (I talk about that a little more in my Beginners Guide to React).

 

When I was using Brackets I had it set up the way I thought was perfect. A number of plugins to allow me to add a section of HTML with the press of a key, or auto-correct on a function when I typed in incorrectly in my sleepy stupor. Upon finding myself in a new program, I wanted to replicate that set up. Turns out that was possible!

 

Here is my current (and probably about to grow) setup in Atom.

 

Theme:

Base16 Torromow Dark

Although this is installed as standard with Atom, god I love it. Slightly darker than the theme I was using with Brackets, and a lot nicer on the eyes.

https://github.com/atom/base16-tomorrow-dark-theme

 

 

Packages

Emmet

This goes without saying. It allows dynamic snippets, speedy coding and is customizable.

https://atom.io/packages/emmet

 

File Icons

Rather than having boring grey default icons, this packaged added a bit of colour, and made it easy to see what I was working on. A worthy addition.

https://atom.io/packages/file-icons

 

WordPress AutoComplete

Autocomplete support for WordPress actions and filters in the Atom editor. A massive help when in the zone.

https://atom.io/packages/wordpress-autocomplete

 

Docblockr Package

Designed to make writing documentation faster and easier. Use standard documentation formatting, this just helps you along.

https://atom.io/packages/docblockr

 

Autocomplete+ Paths Suggestions

Adds path autocompletion to autocomplete+ depending on scope and prefix. Supports custom scopes defined by the user.

https://atom.io/packages/autocomplete-paths

 

I am always looking to make my workflow faster, and easier so if you can suggest any other great Atom packages, stick it in the comments!

CSS Watch Animation

Creative / Development Inspiration 31

Website Inspiration, pure CSS animations, know your ARIA, and the time for container queries. This weeks Creative and Website Development Inspiration covers some incredible example of the direction web is going. We also touch on some brilliant ReactJS packages, as well as show what exactly is needed in a web style guide.

 

Website Inspiration

Five by Five

A startup consultant agency that have gone the whole way with their website. Built on WordPress, it loads quickly, and is very very well designed.

http://www.fivebyfive.io/

 

The Shift

Although not as fast to load, this website can maybe be let off. It is not a sales site, but more of a creative/art piece. The way the user can control the perceptive is very clever and navigating around the site is quite unique.

https://kentatoshikura.com/

 

Designer Resources, Examples and Inspiration

How To Create a Web Design Style Guide

Creating websites is getting more and more complex and is usually not a one person job. It is important to ensure that design is consistent and optimised to meet business objectives and create enjoyable experiences for users.

One of the ways to ensure that team is on the same page when designing separate parts of the website or saving designs from developers is to create design documentation or a web design style guide.

https://designmodo.com/create-style-guides/

 

Company Landing Page

Fluid, modern landing page, where sections flow into each other. Great example of a landing page.

https://dribbble.com/shots/4661919-Company-Landing-Page

 

29 Inspiring UI and Web Design Examples

Well worth the look. inspiredesign.me add an article like this weekly. It highlights some of the best websites and designs out there.

http://inspiredesign.me/collection/n-49/

 

What to consider when choosing colours for data visualisation

Data Visualisation can be defined as representing numbers with shapes – and no matter what these shapes look like (areas, lines, dots), they need to have a color. Sometimes colors just make the shapes visible, sometimes they encode data or categories themselves

https://blog.datawrapper.de/colors/

 

Development Snippets, Samples, and Articles

I have found more articles than usual this week, and that is not meant in a negative way. There is serious potential for all of the below links, maybe they will help inspire you.

Pure CSS Watch Animation

Starting this section of with a really really nice example of what can be done with CSS.

https://codepen.io/Wujek_Greg/full/KRXYpg

 

Know your ARIA: ‘Hidden’ vs ‘None’

A primer on appropriately using aria-hidden=’true’ and role=’none/presentation’. They each do very different things to elements, but their purposes are sometimes confused by developers.

http://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html

 

Proppy

ProppyJS is a tiny 1.5kB JavaScript library for composing props (object that components receive to render themselves).

The primary purpose of this library is to lift the state one level above your UI components. So that your components are always stateless themselves, while you compose your props separately.

https://proppyjs.com/

 

eqio

Although container queries are not yet built into browsers. eqio allows you to attain the holy grail of responsive web development/design systems: components that can adapt their styling based on their width, not the browser‘s.

https://github.com/stowball/eqio

 

Grommet

I have recently started learning ReactJS. Something that I should have done a long time ago. In doing so I have come across loads of great resources (heres a list of learning resources – my Beginners Guide to ReactJS). I recently found Grommet.

A beautiful React UI component which focus on essential experience. At over 3k stars, these components take pride in their simple yet beautiful design.

http://grommet.io

 

 

A bit of everything

Building a responsive image

Nils walks you through the process of building a logo that responds to its own aspect ratio.

https://medium.com/9elements/building-a-responsive-image-e4c6229fa1f6

React JS Banner

A Beginners Guide to Learning ReactJS

Understanding props, module bundling, project structuring and more. I have started the nosedive into learning ReactJS and all of the attached bits and pieces (I used to be a Gulp man, now it looks like Webpack is the one).

 

This post is to keep all of the articles and resources I have found helpful in one place, and hopefully help others. The idea is to continually add to this as I learn. Stay Tuned!

 

Setting the Scene

What editor to use?

I have always used Brackets for my dev, but for some reason Brackets renders ReactJS incorrectly. It highlights sections that it shouldn’t, and doesn’t highlight sections it should. This meant it was time for a change. Enter Atom. Easy to add themes, plugins, and is integrated with Github. It works nicely with React, and also has a sexy little thing called Teletype.

https://atom.io/

 

Structuring projects and naming components in React

To allow a project to scale, and for other members of the team to understand what the hell you have created, the project needs to be properly structured. I wanted to make sure from the word go the projects I was creating were structured correctly, and the components named in a understandable and consistent way. This article was the perfect jump off point for me.

https://hackernoon.com/structuring-projects-and-naming-components-in-react-1261b6e18d76

 

 

Understanding Props

React JS Tutorials: Props

A consise article breaking down props in an easy to understand way. Helped me a great deal.

http://www.reactjstutorial.net/props.html

 

Google Sheets?

This isnt “database” really, but both of these links are nices example of how you can easily send simple data to Google Sheets using JS.

https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server

https://blog.416serg.me/building-an-app-using-google-sheets-api-react-d69681d22ce1

 

 

What about a database?

Intro to Firebase and React

CSS-Tricks has put together a brilliantly written guide to integrating Googles Firebase with React.

https://css-tricks.com/intro-firebase-react/

 

Module Bundling, and managing those tasks

How to use Webpack with React: an in-depth tutorial

In this tutorial you will see the basics of Webpack for React to get started, including React Router, Hot Module Replacement (HMR), Code Splitting by Route and Vendor, production configuration and more.

https://medium.freecodecamp.org/learn-webpack-for-react-a36d4cac5060

 

CSS Modules & Sass in Create React App

How to use modules and Sass side by side

https://medium.com/@kswanie21/css-modules-sass-in-create-react-app-37c3152de9

 

Adding Images

This one stumped the hell out of me! Why can’t I just add an image like usual and be done with it. Well apparently that isn’t the case. React also wants to do some funny business with the image, and if it is a smaller size it loads a base64 version. All about the speed! The two links below go about the same thing in different ways. Both really helped me get my head around it!

https://blog.hellojs.org/importing-images-in-react-c76f0dfcb552

http://interglobalmedianetwork.com/post/importing-images-in-react/

 

 

Keep that app speedy

Progressive Web Apps with React.js — Page Load Performance

Mobile web speeds matter. On average, faster experiences lead to 70% longer sessions and 2 x more mobile ad revenue. Investments in web perf saw the React-based, Flipkart Lite triple time-on-site, GQ get an 80% increase in traffic, Trainline make an additional 11M in yearly revenue and Instagram increase impressions by 33%.

https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance-33b932d97cf2

 

Reduce class name size generated by CSS-Loader

CSS-Loader is a brilliant plugin that allows CSS to be used as modules. With this setting it creates randomised names for module and css function. The issue is the name tends to be quite long.

The solution is here!

https://medium.freecodecamp.org/reducing-css-bundle-size-70-by-cutting-the-class-names-and-using-scope-isolation-625440de600b

 

Examples

Create a quiz

One of my past clients had me make a quiz on WordPress. To solve the problem they had I had to write a crazy about of JS. If I had known about React I would have just done this.

http://carinyperez.com/create-quiz-react/

 

Nike React

Creative / Development Inspiration 30

This is my first version of Creative and Development Inspiration (See the first ever Creative and Development Inspiration, we have come a long way), organised in a more understandable way. Rather than the blog being thrown together with no structure like in the past, I will be breaking each section up so you can go straight to what interests you. This also helps me go back and find that interesting link I found, for when I need it some point in the near future!

 

Website Inspiration

This weeks selection of websites that inspired me. I will always try to keep them relevant to design and development, but sometimes its just a nice website!

 

Audi is beta testing a new site

This new website for Audi simply and efficiently shows the models of each car. Granted, I haven’t tested it on mobile, but it looks great on desktop!

https://beta.audi.co.uk/models.html

 

Nike React

Nikes website for their React brand. Cleverly put together, a bit of fun as you build your own show.

https://www.nike-react.com

 

 

Designer Resources, examples and inspiration

Articles on the newest design concepts, why things should be done in a certain way, or just plain old sexy images. Always related to web, always meant to inspire.

 

WTF! (Whats the Flow)

If you don’t read anything else on this weeks Creative and Development Inspiration, read this! A great article on why User Flows are so important, and how they should be laid out. Too many people don’t follow this, and it leads to problems further down the line.

https://uxdesign.cc/the-biggest-wtf-in-design-right-now-87139f367d66

 

Why You Shouldn’t Use Bright, Saturated Colours for Backgrounds

If you’re using a bright and saturated colour for your background, you’re making it hard for users to keep their eyes on your page. Bright, saturated colours attract the most user attention. Too much of it in a large area overstimulates the retinas which can strain the eyes.

http://uxmovement.com/content/why-you-shouldnt-use-bright-saturated-colors-for-backgrounds/

 

 

Development Snippets and Samples

This weeks selection of libraries, code snippets and development inspiration. I will always try to include this section, and hopefully help you grow your projects.

 

RModal JS

A 1.2kb modal dialog box with no dependencies. All browsers seem to be supported, up from IE9, and it is Bootstamp and Animate.css friendly. Worth a look.

https://rmodal.js.org/

 

Keyframe App

Keyframes gives you a visual timeline to help you create, view, and run animations without having to go back and forth between your browser and editor. And it gives you the CSS when you’re done.

https://keyframes.app/

 

Nano JS

nanoJS is around 100 lines of code (0.6 Kb compressed) JavaScript library for basic DOM manipulation. It has jQuery like syntax and supports chaining.

https://vladocar.github.io/nanoJS/

 

Hybrids

A brilliant UI library for creating Web Components with simple and functional API

https://github.com/hybridsjs/hybrids

 

 

A bit of everything

You try so hard to categorise everything, and then you find an article that doesn’t quite fit, but is worth linking!

 

How not to write an error message

Discover all the ways the internet’s most well-meaning messages can go horribly, horribly wrong.

https://webflow.com/blog/how-not-to-write-an-error-message