Here are some explorations on screens.  Instead of calling them projects, I consider them as rough experiments. Since I had quite a short time with them, no more than one week on each, I mainly expect to feel the magic of visual coding and regard screens as playgrounds in the process, rather than designing thoughtfully to solve real problems.

01 Why our earth is inhabitable?

An educational website

The task is to get familiar with html/css by designing a website about space.

I had a lot of fun with the CSS animations in the process. And I also managed to figured out how to arrange complex visual elements with code. Meanwhile, I have implemented some basic interactive functions such as hovering to show different information with CSS.

02 The Guardian in Pictures
Screenshot 2020-04-12 at 17.52.59.png

A web news media

The task is to design with APIs,

my given database are XML files of the Guardian website. There are complex headlines and categories and opinion on the website. Luckily, I find the inPicture column of the Guardian merely shows series of well-shot pictures, which is eye-catching and easily to understand. So I extract the code of the inPicture images and integrate it into my design.


This media is mainly for those who feel uncomfortable with large textual information. Firstly, They guess what is the theme hiding behind while viewing a set of pictures. And then the headlines appear to reveal the topic. I think it makes the picture news more engaging by switching the pacing and rhythm of presentation. And the media is suitable for a screen saver programme.

Thank you for making it here! 🤓

Previous case:

Screen-based interaction

Next case:

Tangible interaction