This weeks design and development inspiration has a couple of great Codepen projects, showing off HTML5, Canvas and JS. On top of that I have found articles and design from across the web to get you into the mood.
The Last Experience
I’ll start you off with something great, and strange. The Last Experience is a collection of robots designed to dance in sync. That is, until you get involved.
https://codepen.io/ge1doot/pen/LkdOwj
StencilJs
Self-named as the “Magical reusable web component compiler” Stencil is a compiler that generates Web Components (more specifically, Custom Elements). It combines the best concepts of the most popular frameworks into a simple build-time tool to make development faster. Since Stencil generates standards-compliant web components, they can work with many popular frameworks right out of the box, and can be used without a framework because they are just web components.
Wind Animation
Take a map, take a wind chart, animate. That is exactly what Esri have done. The code for this project uses nothing but an HTML5 Canvas element and pure Javascript. The data come from the Global Forecast System which produces a large variety of datasets as continuous global gridded datasets (more info below). Great inspiration, beautifully designed.
http://esri.github.io/wind-js/
The Future Of Mobile Web Design: Video Game Design And Storytelling
As technologies change and design techniques evolve, it’s inevitable that we’d experience massive growth in terms of design quality. There are similar parallels we can see within video game design as well. This article helps look at website design in another angle.
https://www.smashingmagazine.com/2018/03/future-mobile-web-design-video-game-design-storytelling/
10 Examples of Drag and Drop UI
Drag-and-drop has been with us for decades. It helps us to get things done on both our desktop, mobile apps and operating systems. There’s both a simplicity and intuitiveness that has led to it become one of the most universal UI features. Speckyboy has pulled together 10 examples to show this web functionality off.
https://speckyboy.com/drag-and-drop-ui/
Responsive Components
Media queries are great, but it can be such a nuisance when limited by needing to alter the whole page. As opposed to altering each section depending on is own size. This approach would allow fully modular design, with elements being able to be added without as much thought to device size. I honestly thing this development approach is a step in the right direction.
https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/
Milligram
A minimalist CSS framework. Milligram provides a minimal setup of styles for a fast and clean starting point. Only 2kb gzipped! It’s not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code.
