Skip to main content
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/

 

Create a Blog with React

A tutorial series on creating a full blogging app with React. Very comprehensive.

https://code.tutsplus.com/series/creating-a-blogging-app-using-react–cms-1171

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

 

Google Material Design

Creative / Development Inspiration 29

I had a lot of fun collating this weeks creative and development inspiration run down. There have been so many great projects released recently. Take a look and let me know which one was your favourite.

 

Material.io

Google keep pushing and pushing – as shown in Creative and Development Inspiration 21. Now they have redesigned their “Material Design” style rule book. God damn its pretty. Open sourced, and designed specifically to help teams build digital experiences. Have a click about the site, so much to see.

https://material.io/

 

7 Rules for Creating Gorgeous UI (Part 2)

This guide for “visual aesthetics” covers some very interesting points. The section on laying text over an image is very prominent to me, seemingly an issue that crops up time and time again. Nicely broken down with examples and explanations. Worth a flick through.

https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96

 

Screely

Screely instantly turns your screenshot or design into a beautiful image you can share anywhere. No Photoshop or Sketch templates necessary! This is brilliant for quickly sending screenshots to clients, but making sure they look that little bit better.

https://www.screely.com/

 

More Than Pixels: Selling Design Discovery

I am constantly pushing to make the web development process more efficient and more informed. When juggling projects, and dealing with many stakeholders (most of whom aren’t interested in dev…understandably…) it is easy to push past the toughest bit. Research and analysis of a project is not something at the forefront of our minds, and it should be. Smashing magazine shows us how this can be covered, and profitably.

https://www.smashingmagazine.com/2018/05/more-than-pixels-selling-design-discovery/

 

Heavenly Hues

Design Seeds have been on my radar for a whilst now, but I have never written about them. Daily colour palettes from photos, this particular palette vibed with me on this sunny day. I would recommend looking through some of there other posts. Some great colours.

https://www.design-seeds.com/in-nature/heavens/heavenly-hues-34/

 

Homey landing – Website Landing Page Design

Scrolling through Dribble, I stumbled across this great landing page design by Mehedi Hasan. Really nice light style, with lots of spacing, and a really draw on your eye.

https://dribbble.com/shots/4608766-Homey-landing

Colour Wheel

Creative / Development Inspiration 28

Tabler

Tablet is a premium and Open Source dashboard template with responsive and high quality UI. It has so many modules and components that it could be used immediately off the bat with no customisation required. Built with Bootstrap and icons integrated into thew build, its definitely bookmark-able.

https://tabler.github.io/

 

Nimiq Miner WP

I have mentioned Crypto Currency before in this blog, and am a strong advocate of the idea. I have recently been following a project called Nimiq, which labels itself as “the blockchain designed for simplicity”. I agree with this, the wallet is easy to set up, transfers are so fast! and mining is so easy! Because of my belief in the project I have started work on a WordPress plugin for mining Nimiq. It is at early stages with lots of features in the pipeline. Take a look!

https://github.com/justlikethisdesign/NimiqMinerWP

 

Three Essential Design Trends, May 2018

Web Designer Depot have written this great summary of what they thing the top 3 trends are of May. They have included some great examples of actual websites to go alongside their trends. Perfect website design inspiration.

https://www.webdesignerdepot.com/2018/05/3-essential-design-trends-may-2018/

 

Why You Should Never Centre or Right Align Your Logo

Many designers assume that centre or right aligning their website logo will make their brand more memorable. Research has shown this assumption is not true at all. In fact, straying from a left aligned logo can make your brand less memorable and even your site harder to navigate.

http://uxmovement.com/navigation/why-you-should-never-center-or-right-align-your-logo

 

Colour Theory

As a designer in the digital era, you certainly don’t have to stick to the colours available from paints, inks, or other pigments, though there’s a lot we can learn from fine art’s approach to colour. In fact, the human eye can see millions of different hues — but sometimes, choosing even just two or three to use from those millions can seem like a daunting task.

 

Canvas covers Colour Theory is a way that makes it so easy to understand. Definitely on the bookmark list for me.

https://www.canva.com/learn/color-theory

 

Priority Guides: A Content-First Alternative to Wireframes

A List Apart have put together this expansive article covering how Content-First allows you to better understand what is required on your website. They break down each stage to show how much simpler the concept is.

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


How paper wireframing will make you a better designer

This one goes against the above article. However, in a sense they also go hand in hand. The idea of moving away from from a computer and getting hands on allows a greater freedom of expression. You are not limited by the software and its toolbar. Worth the read.

https://blog.prototypr.io/how-paper-wireframing-will-make-you-a-better-designer-5a57db8dca13

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