lim jia sheng,

.Interactive Design

project[1]: Landing Page Design


  • Create a landing page wireframe
  • Create a landing page mockup


I started out with an idea for a space theme to promote a motion designer. I also knew I didn't want a traditional scroll, perhaps something that scrolled by zooming in & out. With all that determined, I went on Unsplash & found images I could use.

Space shot by Daniel Olah, n.d

Figure 1.1.1, Space shot by Daniel Olah, n.d

I found this space shot that fit perfectly. However, I was more interested in the space part over the land part, so I took it into Photoshop & extended it.

Extended space shot by Daniel Olah, 29/9/2021

Figure 1.1.2, Extended space shot by Daniel Olah, 29/9/2021

After that, I also took an image of a window looking out into space & cut out the window portion so I could use it in the layout.

Space window, n.d

Figure 1.1.3, Space window, n.d

With all my assets collected, I constructed the wireframe that would be the baseboard everything slotted into. I then used that wireframe to create a video showcasing the design. The initial part of it would be a splash screen of sorts, while the rest would be a linearly interpolated scrolling sequence, where the user would be able to seek around at their own speed to visualize scrolling.

I also did some conceptualizing on how it would be built. lottie-web could be used for the shape & image animations, & my own mini animation library for the text. svelte (+ typescript) could be used to wrap it all up as well.


Figure 1.2.1, Final wireframe, 8/10/2021

Figure 1.2.2, Final video concept, 8/10/2021


This project let me explore ways to portray & "sell" a service impactfully, & will serve as a good stepping stone for the next project in continuation of this. It let me learn new ways to lay things out & adjust them for UX & responsiveness. One day I'll use these knowledges & actually make something big.