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

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

SVG Landscape Animation

Creative and Development Inspiration 17

SVG Landscapes

SVG animations are really starting to come into their own. Speckyboy has pulled together a great selection of SVG landscapes with animations to show off the potential. Some brilliant styling!

https://speckyboy.com/landscape-scenes-css-svg/

 

Epic Spinners

A collection of CSS only spinners. Perfect for loading animations within an app or website. Great selection all in one place.

http://epic-spinners.epicmax.co

 

CSS Content Cards

I have written a post about content cards before now.  But they are so great I thought I should include this link as well. Contains card examples, as well as the code!

https://speckyboy.com/css-content-cards/

 

Unused CSS

This web tool scans your site, and finds any unused CSS selectors. Great for keeping the code size down!

https://www.jitbit.com/unusedcss/

 

Gulp!

I am a massive advocate of automating your workflow. I know I am harking back a bit here, but for those of you who don’t have the robots doing half your job, you should. This article breaks down this JS automation tool.
https://scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js

 

The Sudden Death of the Website

This article covers a range of factors that point towards large brands doing away with their website. How bothered should we be as designs/developers?

https://techcrunch.com/2018/02/13/the-sudden-death-of-the-website

 

Microframes, the Future of Wireframing?

Microframes, or micro-wireframes, are miniaturised versions of wireframes. Microframes amplify the benefits of wireframing and eliminate most of the shortcomings. Their benefits include speed, clarity of communication and lack of confusion. Are they the future?

https://www.creativebloq.com/features/are-microframes-the-future-of-wireframing

 

Just Leave!

Our industry has a tendency to eat people up, squeeze them for their creative juices, and spit them out burnt up. It’s just not worth it!

https://medium.com/@EliFitch/just-leave-no-job-is-worth-burning-out-for-33b5644942d7

SVG Landscape Polygon Background

Creative and Development Inspiration 15

After a weeks break (Girlfriends birthday) I am back with another web dev/design rundown. There are some great UX/UI articles, as well as some darn pretty pictures.

 

People Don’t Scroll ( and Other Page Length Myths )

A few page length myths debunked. A few of those “beliefs” that are thrown around and checked against studies to see what really is correct! Do people understand scroll? How long should a page be?

https://uxplanet.org/people-dont-scroll-and-other-page-length-myths-c7ca720a0595

 

UI Design Inspiration #3

A series of UI Design Inspiration from FreeUi.Design. Some beautiful examples of icons, applications and website. Definately worth a look.

https://freeui.design/ui-design-inspiration-3/

 

Daily Life Interactions To Learn UX From

If we look into our everyday life, it consists of continuous series of microinteractions that often go unseen, almost at a sensory level. The thing is, they feel natural but they are 100% artificial, which means someone designed them and as UX researchers, we might want to learn from it.

https://uxplanet.org/daily-life-interactions-to-learn-ux-from-2888e1ca9d80

 

SVG Backgrounds

Customizable SVG patterns and background designs for websites and blogs. Great for adding some colour, but keeping the page load time down!

https://www.svgbackgrounds.com/

 

The 12 Do’s and Don’ts of Web Design

If you design websites, you know that making your designs useful and enjoyable is your top priority. It can be an overwhelming task for anyone who just recently started creating websites, so to simplify it, Adobe has created a simple list of do’s and don’ts to keep in mind when designing your next web design project.

https://theblog.adobe.com/12-dos-donts-web-design-2

 

Build a Download Button Full of Micro Interactions

On the same vain as most of the other articles, UX! Learn how to build a button that is full of useful micro interactions. Some coding goodness to end the list.

https://scotch.io/tutorials/build-a-download-button-full-of-micro-interactions