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

Leave a Reply

Your email address will not be published. Required fields are marked *