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.
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.
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.
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.
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
