Skip to main content
React Vis Banner

Creative / Development Inspiration 39

How Dropbox was redesigned for mobile, AirBNB has a top quality landing page, and how to hack user perceptions. This weeks design development inspiration covers this, as well as lots more. I also got a bit over excited about using WordPress with React, and making WordPress that little bit faster. Also, AirBNB changed their business strategy. Well worth the read!

 

Website Inspiration

This week I tried to focus on high quality landing pages. Not just from a design perspective, but from a “do the job” perspective as well. It turns out that “pretty” landing pages, aren’t necessarily the best…

 

WebProfits

Simple. To the point. Easy to understand. It doesn’t shout “pretty”, but it does do the thing it says it does. Gets you SEO analysis. An immediate call to action, and a visual showing an increase in users.

https://www.webprofits.com.au/lp/seo-analysis/

 

AirBNB

We all know this company. AirBNB are known for their constant data analysis, always pushing to improve user experience. The page for signing up to host your home does it well. A simple form showing how much you could make from your home. Thats why you’re there, right?

https://www.airbnb.co.uk/host/homes

 

Designer Resources, Examples and Inspiration

 

A Step by Step Guide to Designing a Pet Diet App

A well broken down approach from user data to design of making an app. It covers the lessons learnt, and how each element needs thinking about as its own thing!

https://uxdesign.cc/ui-ux-case-study-a-step-by-step-guide-to-the-process-of-designing-a-pet-diet-app-d635b911b648

 

How Dropbox was redesigned for Mobile

The designer behind the new Dropbox mobile interface breaks down how they changed the design of the app. A great insight into the business decisions and internal workings of Dropbox, and how it is a constant process.

https://medium.com/dropbox-design/fostering-focus-for-small-screens-34a9f338668c

 

Development Snippets, Samples, and Articles

 

Carl.JS

A Conditional Asset Resource Loader in about 500 bytes of JavaScript. A lazy but efficient way of managing your resources. I covered Critters on Design and Dev Inspiration 33, if you require a more built in Webpack approach.

https://github.com/Paul-Browne/carl.js

 

Hacking user perception to make your websites and apps feel faster

When planes at Houston Airport landed close to the terminal, passengers complained about baggage delays. So they moved the planes away so passengers had to walk further. No more complaints. How can this be applied to apps and websites?

https://medium.com/dev-channel/hacking-user-perception-to-make-your-websites-and-apps-feel-faster-922636b620e3

 

ReactPress – WordPress Starter-Kit

Bringing ReactJS to WordPress. Using Next.js and WordPress this starter-kit is a fast way to get off the ground running. Definitly worth a look for clients used to using WordPress.

https://github.com/nyl-auster/reactpress

 

WP-Rig

A progressive WordPress theme rig. Built with fast development and lightening speed websites in mind, this starter theme is definetly worth a look. Modern processes bundled into one package.

https://wprig.io

 

React-Vis – Charting Library

This ReactJS based charting library has all the graphs you could possibly need, as well as all the options. Some great examples, use cases and with almost 4000 stars on Github, who can miss out on it?

https://uber.github.io/react-vis/

 

A bit of everything

 

Zeplin IO

I am surprised I hadn’t come across Zeplin before. A brilliant website to help teams work together to build products. For both designer, developer and the whole business site of the team. Think Basecamp, but tailored for design. Includes XD and Sketch integration to save time messing about with exports.

https://zeplin.io/

 

Design Thinking and Storyboarding Changed AirBNBs Entire Business Strategy

An incredibility insightful interview by Forbes, with the Rebecca Sinclair, founder of Honest Design. She helped AirBNB disrupt itself, and change the business strategy by changing how the business saw itself.

https://www.forbes.com/sites/emilyjoffrion/2018/07/09/the-designer-who-changed-airbnbs-entire-strategy

 

Mail chimp chart banner

Creative / Development Inspiration 38

Two great website inspiration examples, several website generators, and why the open-plan office is rubbish! This plus a lot more in this weeks website design development inspiration rundown.

 

Website Inspiration

Freetrade

I found this site whilst doing research into investment apps. The thing that struck me was its simplicity, and ease at which is gets its message across. The whole site is well thought out, and easy to digest. It could look into user accessibility a little more, but as a piece of inspiration, perfect.

https://freetrade.io/

 

Iconwerk

Although simple, my god its quick! The way the blog title and images are swapped from the standard card layout is interesting, and works well in this case. Once again, accessibility is an issue (why is this such a standard problem, its not hard to fix!).

https://iconwerk.com/

 

Designer Resources, Examples and Inspiration

10 Beautiful Examples of Wireframes

Wireframing helps designers map out the structure of a website before anything is set in stone. 1st Designer has pulled together 10 examples of different wireframes.

https://1stwebdesigner.com/wireframes-web-design/

 

Dark UX Patterns in Advertising

According to Hubspot research, 85% of people have a negative opinion towards websites with obnoxious or intrusive ads. What’s wrong with the remaining 15%? This article points out the ad creators, and how they tried to trick you. Interesting read.

https://icons8.com/articles/dark-ux-patterns-advertising/

 

Development Snippets, Samples, and Articles

Storybook

I am surprised it has taken me this long to find out about this. But now I have I am definitely sharing it. Storybook is a development environment for UI components. You can browser a component library, view different states, and interactively develop them!

https://storybook.js.org/

 

Stitches

Build plain html templates from this JS template generator. A great idea for rolling out fast concepts, and the ability to add your own templates! Drag and drop and all that.

https://github.com/amiechen/stitches-template-generator

 

Docusaurus

A great project for easily building, deploying and maintaining open source projects. The “Simple to Start” guide walks you through the whole process in a very short amount of time.

https://docusaurus.io/

 

Does the Perfect Email Template Exist? We Used Data to Find Out.

Mailchimp put the numbers together, and came out with this article. They should know, they are the email people! There are no set rules, but they have found some helpful guidelines from this.

https://blog.mailchimp.com/does-the-perfect-email-template-exist-we-used-data-to-find-out/

 

Aria Examples

I have been banging on about accessibility for the past few weeks. Here is a link that can help you with that. Some great examples of common elements, and how they should be built to include/improve accessibility.

http://heydonworks.com/practical_aria_examples/

 

 

A bit of everything

These two articles go against what is being shouted about on Linkedin and those life inspiration blogs. They are also both very good reads.

 

Don’t listen to those productivity gurus: why waking up at 6am won’t make you successful

There is a list of things that “experts” say you must do to be successful, before you begin the working day. This article is of the opinion that they are wrong. I am inclined to agree.

https://medium.com/swlh/dont-listen-to-those-productivity-gurus-why-waking-up-at-6am-won-t-make-you-successful-b3c77921d9fd

 

The open-plan office is a terrible, horrible, no good, very bad idea

Articles like this one have been circling for the last few weeks, and I finally decided to add it to the rundown. I have always been of the belief that open plan offices are counter-intuitive. Especially for individuals who need to concentrate on their work. As much as a support Dave hyping up his client on the phone and getting that sale, I also now can’t concentrate on this awkward function.

https://m.signalvnoise.com/the-open-plan-office-is-a-terrible-horrible-no-good-very-bad-idea-42bd9cd294e3

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/

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

 

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

 

CSS Animation Shooter Game

Creative and Development Inspiration 16

This post has been a long time coming, what with crippling man flu (sympathy vote alert) and work deadlines I haven’t been able to put anything together. I have however had a lot of time to stare at my phone and look at pretty pictures. That means that this list is especially special, and has some pretty interesting links for you to peruse.

 

basicScroll

Inspired by skrollr, this scrolling library allows you to change CSS variables depending on the scroll position. Use the variables directly in your CSS to animate whatever you want. I am a massive fan of this, and can’t wait to roll it out on some of my projects.

https://basicscroll.electerious.com/

 

3D Parallax Example

Thismanslife built this example of 3D parralax on IMacs only using CSS.  Definitely need to take a look at that source code!

http://www.thismanslife.co.uk/projects/lab/imac3d/

 

Sweet Alert 2

Need to remind a user to save their work before they leave the page? This alert library is a perfect addition to any web project using alerts. Easy to integrate, and an improvement on the standard browser alert.

https://github.com/sweetalert2/sweetalert2

 

5 UX Design Principles That Never Go Out of Style

The best designers understand that there must be a balance between standardization and innovation. Keeping that in mind, here is how to design a product with GREAT UX.

https://medium.com/walkme/5-ux-design-principles-that-never-go-out-of-style-672cc6ba9047

 

Stimulus

Because why wouldn’t we need another JavaScript library?! Personally I doubt I will ever use this, but you may. Easy to install using NPM, Yarn ect and allows you to enhance your already existing HTML.

https://stimulusjs.org/

 

Gangbase

One for the designers. Gangbase was created to collect all studios, designers, tools and awesome websites in one big base, where it’s easy to find whatever you need.

https://gangbase.design

 

GradPad

A beautifully designed website, with only one purpose. To create perfect CSS colour gradients within your browser. Perfect for web designs / developers.

http://ourownthing.co.uk/gradpad.html

 

Kutt.it

Like Bitly, but yours. Free and open source, Kutt.it allows you to host your own server, and manage all of your links & data yourself. A great interface, and documented API.

https://kutt.it/

 

CSS Space Shooter

I haven’t had one of these in a very long time. An old-school arcade-style 3D shoot-em-up rendered entirely with CSS 3D transforms. A great break from work, as well as a perfect example of CSS transforms. How far can you get?

https://www.michaelbromley.co.uk/experiments/css-space-shooter/

Spotify releases development API

Creative and Development Inspiration 12

A mixed bag this week. Some great new additions to the code snippets bookmark list, as well a new design inspiration website. Also, Spotify likes developers!

 

9 Custom Open Source File Upload Field Snippets

Upload fields are one of the toughest inputs to restyle. If you’re hoping to customize your upload inputs, this gallery will help. Speckyboy has collected 9 handmade upload fields from CodePen that prove you can restyle the field to look however you want.

https://speckyboy.com/custom-file-upload-fields/

 

Why do People Hate Papyrus and Comic Sans?

The world we live in is a mix of opinions and it’s hard to definitively agree on anything. But one thing’s for sure—Comic Sans and Papyrus are the worst. Why do we feel this is the case?

https://onextrapixel.com/people-hate-papyrus-comic-sans/

 

Instagram CSS

Want to bring Instagram filters to your site? Wait no more, this Github resposity has your back.

https://picturepan2.github.io/instagram.css/

 

Company Tricks People into Swiping Instagram Ad with Fake Strand of Hair

A cunning Chinese company has received both props and scoffs for a devious Instagram Stories advertisement featuring a fake strand of hair over some heavily discounted sneakers. Not such a development article, but a comment on advertising design.

https://medium.com/shanghaiist/chinese-shoe-company-tricks-people-into-swiping-instagram-ad-with-fake-strand-of-hair-54d8a2d8ec1d

 

Spotify for Developers

Spotify have opened up an API for us developers. So. Many. Ideas.

https://beta.developer.spotify.com

 

A New Inspiration Feed – Designspiration

A selection, concoction, amaligmation of great, interesting and creative designs. All those descriptive words show how I feel about this site. It’s good.

https://www.designspiration.net