Responsive Layouts & Other Preliminary Research

Posted on

After focusing a majority of my early research on aesthetic, I wanted to move my attention back to the usability of my design. This meant shifting my focus to address how specific features of my site would work and adapt.

The initial technique I wanted to address was Responsive Layouts. Creating a design that auto adjusts to fit the screen would really help me convert my website into an app, and vice versa. Unfortunately, I found this hard to communicate through the use of Figma (Figma, 2025). Chalk it up to lack of experience, but I definitely couldn’t figure out how to stop my images from becoming distorted when adjusted. This forced me to add cropped versions with new alignments when converting to an app format, not ideal in terms of time saving. I did however find a compromise with the use of my text. Whilst adding the text background was initially a legibility choice, it later proved to be a practical way to instil responsive layouts.

After that battle, I then transitioned into my Mid Fidelity Layouts. Whilst I didn’t capture each step in this process, my design inspiration was fairly simple. Thanks to my early storyboard panels, I was able to refer back to certain layout compositions with ease. This paired with my previous research in regard to colour palettes and typography, allowed me to adjust text boxes and buttons with ease. Thanks to this, I was also able to add new features, such as calendar overlays and more prominent call-to-action prompts. Paired with my previous research addressing illustration and text (B. Muzyka, 2025), I was able to adjust my layouts effectively when converting my formatting into an app, whilst ultimately still being able to keep crucial information included.

Moving finally into my greatest struggle yet… On-boarding. Due to my lack of experience, mixed with limited pieces of software, I really struggled to create a sign in page for my site. Every attempt felt bumpy and awkward, usually resulting in a blank page that my user couldn’t interact with. After several stages of feedback from my peers, I decided to scrap the idea and instead move attention to an account page. This allowed me more creative freedom, and despite not being a functional page, it still portrays the concept of a functioning account. In order to still be in-keeping with my laws, I chose to address the placement of this feature. Whilst a sign in page may have been a pop-up, I instead adjusted my icon to follow the header of my menu bar. Research also suggested that most adults inside of my demographic “weren’t so dependent on instruction” and instead focused more on recognizable imagery (W. Craig, 2025). This helped instil Jakob’s Law (E. Stevens 2024), especially when paired with the mirrored effect on my app design.

References