Home Screen



This project was an assignment for the "Hand Held: Creative Tools for Phones" course at ITP in Fall 2020.

The assignment was to create a mockup of an imaginary home screen for mobile phones using HTML and CSS.

My goal was to create a home screen that fits all icons in one page regardless of how many apps are installed.

Here's the Live Demo on Glitch. You can also use the following QR code to visit the link in your phone's browser:

The Problem

According to statistics, there are between 60 and 90 apps installed on the average smartphone. But how many apps do we actually use? I would easily assume that most people use less than 20 apps in everyday life. Because there are so many apps installed on their phone, their home screen is divided into multiple pages of apps.

While having pages is useful, it has two problems:

  1. It requires more interactions (swipe) from users to find and open an app.

  2. Users don't feel the need to clean up unused apps which makes the first problem worse.

The Solution


My solution to these problems is to fit all icons in one page regardless of how many apps are installed. As the number of apps grow, the size of icons will become smaller and smaller. And as they get smaller, it will make it more difficult for the user to open an app. This gives them good motivation to clean unused apps that will improve their experience and make more available storage on their phone. And since the user can see all apps in one page, it requires single (touch) interaction to open an app.

Source Code

Live Demo


Software Engineer | UX Designer | Creative Technologist