UI Component Exploration

Why I started a playground like this

Nowadays, digital products have mature guidelines and most people got used to different gadgets around internet interfaces. The interaction model shared manipulation similarity and metaphors to the physical world.

Most companies should have their own design systems, which have reusable widgets with a similar visual style. Revisiting these existing UI components is not only a good practice for specific technology, but also a necessary accumulation for innovative interfaces in web, mobile and any form of phygital products.

Topics covered

The playground is hosted on Github. The implementations are not ideal, but an attempt for understanding the involved details and considerations.

  • Image widgets, like carousel, lightbox, gallery
  • Visual style library (CSS) adaptive to mobile web app,
  • Animation: I was once using After Effects a lot and enjoying tweaking the micro-animation in the timeline. However, when it came to a real implementation, there is really a lot to further to consider, details and trade-offs for specific platforms.

Image widgets

Scattered photo album

  • Click to get scattered images
  • One quote with one image
  • Hover to get two sided images