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

 

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 IDE 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 mean’t 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

 

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/

 

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

TunnelBear

Creative / Development Inspiration 24

This weeks Creative & Web Development Inspiration does not touch the code at all. I have found 5 articles that look at the design aspect of websites, as well as a few ideas that cover the process of creating digital media. How emotional interfaces can help retain users, all the way to the idea of transparent design.

 

How To Design Emotional Interfaces For Boring Apps

Humans can’t endure boredom for a long time, which is why products that are built for non-exciting, repetitive tasks so often get abandoned and gather dust on computers and phones. But boredom, according to psychologists, is merely lack of stimulation, the unfulfilled desire for satisfying activity. So what if we use the interface to give them that stimulation? Alice shares five secrets to more emotional UIs: gamification, humor, animation, illustration, and mascots.

https://www.smashingmagazine.com/2018/04/designing-emotional-interfaces-boring-apps/

 

Constant Small Improvements Pave the Way to Perfection

A great article from Invision on constant improvements on design. Baby steps forward. Constant iterations. Nonstop nudges in the right direction. That’s how an empire is built. The path to success doesn’t need to be sprinted. Start selling this to clients, for both a better relationship, and a better product.

https://www.invisionapp.com/blog/designer-perfection

 

Start your designs with a concept

Defining a concept upfront can help shape everything that follows: the interactions, the relationship between elements, the tone of voice and copy, the transitions, the animations, etc. Once you have a strong concept, all these aspects start to align. Interfaces that are conceived without a concept and designed on autopilot creates interaction patterns that aren’t strategically aligned, user paths that don’t follow a clear logic, screens that are inconsistent and do not ladder up to a consolidated metaphor or concept.

https://uxdesign.cc/start-your-designs-with-a-concept-7270e6b00fcc

 

New to email coding? Here’s where to start.

The sooner you stop fighting the quirks of email, the sooner you can use them to your advantage. Email can seem like a tangled mess, and you will deal with some crazy parameters. But once you learn to embrace the peculiarities, beautiful things begin to happen. Caity covers some great resources and techniques for creating emails that even work on Outlook! I also covered a great resource in Creative and Development Inspiration 1 – Heml!

https://explore.reallygoodemails.com/new-to-email-coding-heres-where-to-start-2494422f0bd4

 

Why transparent, open design leads to happier clients

“When you bring the folks you’re working with directly into the project, you create a lot more buy-in,” said Adonya Ourshalimian, Client Partner at Citrusbyte. “There’s a much better understanding of what’s actually happening.” The program they use looks unbelievably useful as well, sit down XD – https://www.figma.com/

https://blog.figma.com/why-transparent-open-design-leads-to-happier-clients-aaf98a7cd50c

Neomedia Pokemon

Creative / Development Inspiration 23

This weeks creative & development inspiration covers some great articles, all the way from bad user onboarding and UX to using IBM Watson to analyse your social media. The most eclectic post so far.

 

4 Examples of Bad User Onboarding That Will Ruin Your UX

Starting off with this great article on bad user onboarding, Ty Magnin breaks down a few issues that are causing bottlenecks in getting users onto your service. It doesn’t just stop there either, if the user can sign up easily, they may hang around longer.

https://www.appcues.com/blog/bad-user-onboarding

 

Gender pay gap: women in graphic design earn £4,000 less than men

Gender equality is something that is being spoken about in all industries. This article discusses the issues behind the gender pay gap for woman in design, and how woman in design get paid 6% less than their male counterparts.

https://www.designweek.co.uk/issues/3-8-april-2018/women-graphic-designers-earn-4000-less-year-men-gender-pay-gap-shows/

 

NEA Media

Whilst researching different portfolio websites for styles and how the page load is managed I stumbled across NEA Media. The way the site loads and then animates up is really enjoyable, as well as the design across the whole site. Definitely worth a look.

http://www.neamedia.fr/en

 

“Let’s not be elitist about what we do”: should designers give away their secrets?

Pentagram partner Natasha Jen recently lambasted the term “design thinking” as “bullshit”, “jargon” and “extremely dangerous”. Designers share their thoughts on the concept and discuss whether teaching design skills to businesses is helpful or irresponsible.

https://www.designweek.co.uk/issues/26-march-1-april-2018/lets-not-be-elitist-design-thinking-designers-share-secrets-natasha-jen/

 

Analyzing Your Company’s Social Media Presence With IBM Watson And Node.js

Jamie Munro demonstrates how to perform a search with Twitter’s API to retrieve content that will be inputted into the ML algorithm to be analysed. This way, you’ll be provided with characteristics about the users who wrote that specific content so that you can get a better understanding of your audience. The example application will be written using Node.js as the server.

https://www.smashingmagazine.com/2018/04/analyzing-social-media-presence-ibm-watson-nodejs/

 

Modern PHP Without a Framework

This article discusses the reasoning behind not using a PHP framework for your next project. A fairly technical read, but definitely worth it if you work with PHP.

https://kevinsmith.io/modern-php-without-a-framework

 

Mitsulift Elevators by Base Design

The last link is a beautiful new identity by Base Design. The new identity manages to work across all mediums, whilst easily portraying the brand and what they do. Big fan.

http://bpando.org/2018/04/03/branding-mitsulift-elevators/

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/

Rough.js graphic creator

Creative and Development Inspiration 20

This week creative and development rundown is more development orientated. I have found some great packages to help enhance the user experience, as well as some alternatives to already well used solutions. Although a shorter list than usual, these items are far more usable, both in terms of using within a project and for learning more!

 

Driver.js

Driver is a powerful yet light-weight, vanilla JavaScript engine to drive the user’s focus across the page. This would be great for when a user signs up to a new website, or service., as well as providing interactive overlays. It is easy to implement and has great documentation.

https://github.com/kamranahmedse/driver.js

 

React Tutorial: A Comprehensive Guide to learning React.js in 2018

As the title says, this tutorial is a ground up guide to learning ReactJS. It is well broken down, and incredibly easy to understand. ReactJs is definitely a must for most front end developers. The majority of tech companies use it as a quick route to sale.

https://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/

 

Toast UI Chart

No one like having to make code work on legacy browsers. But sometimes it matters.  The developers of Toast US couldn’t find a project which supported legacy browsers, maintained reliably, and was free for commercial use, so they decided to make one. It is well documented, and quite pretty! I will most probably be giving this a trial run on the next web development project that requires charts!

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

 

Animating Elements Along SVG Paths: Introducing PathSlider

This tutorial by Scotch is a really simple to follow SVG path animation guide. It used the PathFinder plugin, and anime.js, both very user friendly packages. Although not a groundbreaking example, it is a great gateway drug into SVG animations.

https://scotch.io/tutorials/animating-elements-along-svg-paths-introducing-pathslider

 

Rough.js

Rough.js allows you to create roughly drawn graphics within the browser. It is a light weight (~8k), Canvas based library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths.

https://github.com/pshihn/rough

 

Creating User-friendly forms

Forms are of pivotal importance to individuals & businesses alike. When it comes to collecting data, forms most often than not is the direction we all take (perhaps due to it’s long-time presence around us offline before the internet boom). Therefore, creating user-friendly forms is a major key to increasing the completion rate of your forms.

https://blog.prototypr.io/creating-user-friendly-forms-46e3f7f4eef2

Material Design Example

Creative and Development Inspiration 14

This week I have found some great links for UX snippets and examples, some CSS/JS magic, and a little titbit for you cryptocurrency geeks. All in a days work.

 

Bye bye Material Design

Considering Material Design for your next project? Emin Durak thinks otherwise. He belives that it is, I quote, “premature, shallow and arguably incorrect approach”.

https://medium.com/techtrument/bye-bye-material-design-acaebcc7c6b4

 

Micron.js

A Microinteraction Libary Built with CSS Animations and JS. A great plug and play libary for a quick MVP.

https://webkul.github.io/micron/

 

How Much Do You Know About Web Typography

Web typography is a bit tricky. So many quirks and snippets of information you need to know. Take this web typography quiz and test your typography knowledge.

https://betterwebtype.com/web-typography-quiz

 

Gradient Topography Animation

Codrops is back with a great new code snippet. An incredibly sleek organic SVG shape layer animation based on Diana Hlevnjak’s work “Gradient Topography”. Powered by anime.js.

https://tympanus.net/Development/GradientTopographyAnimation

 

Button with Email Dropdown

Code My UI has brought us a nice little snippet to create a drop down input field from a button. Keep everything tucked anyand tidy!

https://codemyui.com/button-email-optin-dropdown

 

Jump on the Cryptocurrency Bandwagon

Minergate is a piece of software that mines a varity of cryptocurrency coins in the background whilst you work. You can set the level depending on how much you need to use your CPU/GPU. Keep the referral link, and I get a small percentage of the fee (nothing is taken from you!)

https://minergate.com/a/2b33a24f39993dc303296b47