project[1]
0344034.
BDCM
.Interactive Design
::project[1]
project[1]: Landing Page Design
todo:
- Create a landing page wireframe
- Create a landing page mockup
process:
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.
 |
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.
 |
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.
 |
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.
final:
Figure 1.2.1, Final wireframe, 8/10/2021
Figure 1.2.2, Final video concept, 8/10/2021
reflection:
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.
Comments