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/

 

 

 

 

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

 

Good Designer - Bad Designer

Creative / Development Inspiration 26

Good Designer, Bad Designer

Tarus Kohli breaks down the different between good designers and bad designers with some great sketches.

https://uxplanet.org/good-designer-bad-designer-eff79d356a75

 

A Beginner’s Guide to Webpack 4 and Module Bundling

This article is aimed at those who are new to Webpack, and will cover initial setup and configuration, modules, loaders, plugins, code splitting and hot module replacement. This is something I am yet to get into, but once I have finished my current project will be jumping all over.

https://www.sitepoint.com/beginners-guide-webpack-module-bundling/

 

Gooact: React in 160 lines of JavaScript

How to build own React clone in a matter of minutes. In this tutorial you will be shown how to write a fully functional React clone, including Component API and own Virtual DOM implementation.

https://medium.com/@sweetpalma/gooact-react-in-160-lines-of-javascript-44e0742ad60f

 

Toast UI Calendar

I have mentioned a Toast library before on Thoughts and Stuff. The Toast UI Chart. This time they have created a fully customisation calendar! Experience various view types, default popups, dragging or resizing schedules and customizable theme which is easy to use.

https://github.com/nhnent/tui.calendar

 

Choosing cameras in JavaScript with the mediaDevices API

The project I am currently involved in has me looking into implementing device cameras across different browsers and devices, if the project had been built on Node I would have most certainly needed this article. Most smart phones come with a front and back camera, when you’re building a video application for mobile you may want to choose or switch between them.  This simple tutorial walks you through the steps.

https://www.twilio.com/blog/2018/04/choosing-cameras-javascript-mediadevices-api.html

 

First Look at WordPress Gutenberg

The new Gutenberg editing interface is a major change coming to WordPress 5 this year, and it will affect WordPress plugin developers, theme designers, and website creators. In this video you will be shown you how to set up Gutenberg as a plugin on your existing site and how to get started using the Gutenberg editor to create content.

https://code.tutsplus.com/tutorials/first-look-at-wordpress-gutenberg–cms-31036

 

Google Music Lab

Creative and Development Inspiration 21

Dot Colors

A beautifully simple website built for web designers and developers to check their colour codes. Just drop in an array of HEX colours and away you go.

https://dotcolors.co/

 

Notifications – A breakdown

A great article on web notifications from Inclusive Components. In the format of a style guide, it covers how notifications can used correctly, and what aspects of web may need a notification. It has a nice checklist at the end, if you don’t want to read the whole thing…

https://inclusive-components.design/notifications/

 

Googles Music Lab

Google is back with some more fun. The Creative Lab team has built an in browser song maker, just click the grid to add notes when share it with a link. You can also use a MIDI keyboard or sing into it if you so wish. Google have been bringing out some great bits of inspiration and helpers for developers, as shown with Flutter in Creative and Development Inspiration 18.
Share your masterpieces in the comments!

https://musiclab.chromeexperiments.com/Song-Maker/

 

Navigating the complexity of change aversion

Change aversion is a concept well known to website designers and developers. It’s the negative reaction users have to changes in your product, whether that’s functional changes such as updates to product features, or interface changes such as visual redesigns. This article explains how this can be navigated.

https://blog.intercom.com/navigating-the-complexity-of-change-aversion/

 

Google Web Designer

Google Web Designer is a free, professional-grade HTML5 authoring tool. It can be used to build interactive, animated HTML5 canvas, no coding necessary (although you can use code if so inclind). It is more aimed at creating professional looking adverts that can run anywhere on the web. Still in beta but definitely worth keeping an eye on.

https://www.google.com/webdesigner

 

Ethical Design: The Practical Getting-Started Guide

Web designers and developers have an obligation to build experiences that are ethical, and better than using features that expliot human behaviour. This article explains how unethical design happens, and how to do ethical design through a set of best practices. A great read.

https://www.smashingmagazine.com/2018/03/ethical-design-practical-getting-started-guide/

 

Scrollbooster

A drag to scroll JS libary. Works in IE11 Edge, and most modern browsers. It is a great package that allows content to be easily scrolled by touch, and mouse, and is tiny in size. I am planning to use it in a current project to test it out. My only concern is being able to alter options when the device size change, i.e. scrolling vertical, to horizontal.

https://ilyashubin.github.io/scrollbooster/