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.
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.
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.
Company Landing Page
Fluid, modern landing page, where sections flow into each other. Great example of a 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.
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
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.
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.
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.
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.
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.