Blog Post 4: Adapting Your Design for Web Deployment

Posted on

I started by transferring a copy of my full high-fidelity prototype onto a new page in Figma. This was easy enough. Though from here I started to adapt and redesign my homepage as a starting point. I tried the auto-layout feature as a way of effectively sectioning each component of the page, but that didn’t work well. I then tried to use a responsive plug-in, and that worked even worse, just resetting the frame dimensions, as opposed to the contents. Ultimately leaving me with no other option than to reconstruct the whole thing by hand, not ideal but sure let’s give it a go. This didn’t work either, leaving me with a stretched out messy version of my app, that didn’t even allow me to include every key feature. So, I set about doing some research into why this prototype looked so messy.

https://www.figma.com/proto/zVvappCMnXACSLgoXnQkfV/Sims-Companion-App-Website?node-id=112-103&t=eEXtvnWW7DtBQyid-1

Above is my Embedded Figma File, showing my High Fidelity Prototype for my website and the link to the functioning prototype.

After looking at the difference between website and apps on several key interactive app platforms, I quickly began to realize my issue. I had made my companion app in the format of a social media platform. My whole approach for my Sims companion app, was to design a platform for like minded ‘Simmers’ to share and interact with each other’s content, whilst still having a direct access route to the games expansions. This meant that when I tried to translate this into a website, filling that much space made the layout look bulky and unprofessional.

Image showing how Instagram (Instagram, 2025) looks on the web browser.

Despite this I persevered and created the frames in a website format. Do I like the way the site turned out? No, not even a little bit. But I think in a real client setting I would have opened the design up to be more of a discussion, expressing that key components needed to change for a website formatting. Addressing the fact that you can’t have an Instagram (Instagram, 2025) styled app, and expect a Facebook (Facebook, 2025) functioning website, without some compromise in design.

References

Visual References for Content & Art Inspiration