Research Week 07

This part of the project is my research and development of a brand landing page, a webpage which should encompass and sell users of the brand. After researching style and ideas in week 07, I discussed with my tutor some of my ideas. The main thing that emerged from this discussion was to look into ways to create the idea of something going from fragmented to stable, in a way creating a narrative which would demonstrate the ideas of the brand without having to literally say it.

I began by sketching some ideas for what the page could look like and how I would portray the idea of going from fragmented to stable through imagery. It was clear from this that I wanted some sort of whole-page metaphor, with the page going from fragmented at to stable at the bottom as I felt this would give it a natural feel to the progression and would create the idea of gravity which is something I wanted to explore.

My initial thought was to find a 2D physics simulator which I could put the logo into to see what sort of imagery was produced (similar to Channel 4). I thought this would be something fairly easy to find and use but surprisingly I really struggled to find anything on the internet that didn’t require a level of knowledge of Java that I don’t possess. I eventually found a Figma plugin which did pretty much exactly what I wanted.

https://www.figma.com/community/plugin/1051790240828992953/Physics-animation

I set up some copy for the page with shapes behind it that would act as obstacles in a sort of Pachinko-esque free fall. This was interesting but there were definitely issues with it.

• The objects fall slowly and there's no real way to speed them up.
• Obstacles have to start above the text so that the falling objects don’t just land on them and stop.
• The plugin can’t be used in a prototype so if I wanted to use this I would have to export it as an SVG animation and then add it to an HTML or possibly Framer doc.
• Having tested it on an HTML document it would have been really complex to tie the movement to scrolling due to the number of paths and would require a knowledge of javascript which I don’t currently have.
• Even if I did get it to move with the scroll type setting this in HTML would take a considerable time as I would have to set the opacity of the background, type, and collision shapes of the animation to zero so only the falling shapes were visible, then typeset an html doc so it lined up with the full opacity original.
• Also, that’s what I am hoping would happen and given my limited knowledge of js the way the animation moves while scrolling may not work how I want it and I would have wasted my time.
• Being so centred around the animation may limit the rest of the design.

I think this could have worked well but due to the complexity of getting it working wouldn’t be the best option for this part of the project so I went back to try a different approach.