For the assignment, we sketch an imaginary homescreen, a version of how our phone could look when we open it. After sketch, we would make a mock-up by HTML/CSS.
This assignment made me think more about what does phone and homescreen means to me. I use phone to keep in touch with people vitually, receive news and information, know more people from dating apps and games… My phone basically is another dimension of my world, where people also live in and interact with me. If so, then my homescreen is the map of this world, which navigates me to check out everything in it. A folder is a continent, the apps in it are people who live there. The button in the button is the link to other section of the map… When I came up with this idea, I immediately think about the 2D organic illustration I made, those island with face on it. So I created this sketch in Figma:
When you click on the face, a pop-up menu will show up, and you can check the people(apps) inside.
Since the assignment is just the mock-up , so I only created homescreen in codesandbox, here is the mock-up:
One of the problems I have now is that the image sometimes can’t fit in the screen perfectly, especially when the screen height is too short. I am wondering if using vh or percentage for height would help. Thanks for watching!
