Skip to main content
CSS Wizardry banner

Creative / Development Inspiration 41

A brilliant landing page example, common web design mistakes, pure CSS wizardry, and some great thought-provoking articles. This weeks design development rundown is a little more aimed at helping you consider your design and dev. For example, how did Facebook end up bad? Is Google Amp really the way forwards (no is the answer to that), as well as articles explaining the best way to design elements on your website.

 

Website Inspiration

Duda – Landing Page

I found this through clicking an advert on Facebook. Selling themselves as a WordPress replacement I was intrigued. I left having found a brilliant landing page. Simple, and effective, with nice use of CSS animation.

https://wp.duda.co

 

Designer Resources, Examples and Inspiration

Common web page design mistakes

16 well explained examples of the most common mistakes made in web design, with a focus on how to avoid these.

http://blog-en.tilda.cc/articles-website-design-mistakes

 

Waveguide – Design Knowledge Base

A curated, searchable base of design knowledge, UX/UI patterns and examples for research and inspiration. The goal is to help create a repository of referable concepts to help designers and developers build amazing, high quality products.

https://www.waveguide.io

 

Designing Charts – Principles every designer should know

Seemingly simple rules can be forgotten when overwhelmed with the larger project. This article steps though the correct principles for designing charts, and why.

https://uxdesign.cc/designing-charts-principles-every-designer-should-know-part-2-ce1e06af56fc

 

Development Snippets, Samples, and Articles

Pure CSS Wizardry

A brilliant codepen by Julia Muzafarova. A wizard with potions making animals come alive. All with CSS. Love it!

https://codepen.io/miocene/full/mjLPVp/

 

Guess.JS

A selection of libraries and tools for enabling a machine-learning driven user-experience across the web. It uses Google Analytics to work determine which page the user is likely to visit next, and pre-fetches all resources required.

https://github.com/guess-js/guess

 

Carbon

Create beautiful images of your source code, right in the browser. Share directly from the platform.

https://carbon.now.sh

 

Creating the “Perfect” CSS system

A high level guide for designers and developers who write CSS, but want to be more strategic about building moderate to large scale CSS systems

https://medium.com/gusto-design/creating-the-perfect-css-system-fa38f5bcdd9e

 

Lazyestload.js

Only load images when they are in the view port, if you scroll past they wont be loaded. Only 350 bytes of JavaScript. I introduced Carl a couple of weeks ago, but that is a more general asset manager.

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

 

Fast Average Colour

A client side library to quickly get the images average colour. Not sure how much of a good idea this is to use on a front end, but it could be used on the admin side to save the colour in an input.

https://github.com/fast-average-color/fast-average-color

 

 

A bit of everything

Google AMP – A 70% drop in our conversion rate

Let’s talk about Google AMP. AMP stands for Accelerated-Mobile-Pages. It’s a technology Google originally introduced to get web developers to speed up their web pages for mobile devices and mobile networks. But in many ways it seems like great technology for any device or network. Who doesn’t want fast websites?

https://medium.com/the-set-list/google-amp-a-70-drop-in-our-conversion-rate-35fe3cb69c59

 

Everything bad about Facebook is bad for the same reason

In June 2016, Antonio Perkins unintentionally broadcast his own death to the world. It was a sunny day in Chicago, and he was sharing it on Facebook Live, a platform for distributing video in real-time, released just a few months earlier.

https://qz.com/1342757/everything-bad-about-facebook-is-bad-for-the-same-reason/

 

How to create a customer journey map

Understanding users’ behaviour and feelings is crucial when building a user-centred product. In this guide you’ll learn how to create a Customer Journey Map and how to apply it to any project.

https://aerolab.co/blog/customer-journey-map

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

 

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