In the same way I begin all digital projects, I began by establishing a grid structure initially. I layered three grids, a square grid of 10px, a column grid of 4 columns and a row grid of 2 rows which act as a margin for safe zones vertically.
In these beginning stages, I always find the translation from page to screen quite difficult. No matter how detailed and refined your sketches are, you always have to make adjustments to your designs when they begin to take form digitally.
In the beginning, I always like to focus on blocking in planes. This was particularly important for the modular layout of my home screen. I had to play with the planes for a while to get them to sit comfortably in the frame.
I designed my frames in the preset for an iPhone 13 mini. I did this intentionally as this is a perfect example of a small compatible device, so if my content can fit on this screen size then there will be no issue scaling it up. Whereas if you design on a larger screen and scale down for responsiveness then that is where you can run into some issues.
<aside> ⭐ REFLECTION: I found it strange in the beginning designing for such a small screen size. In my previous designs, I never had really considered responsiveness so I always designed in larger presets to allow more space. However, I felt it was a great way to stretch myself as a designer as it forced me to be very selective in the elements that I included in each interface and forced me to compose my content in a way that maximised space for button sizes and usability on a smaller threshold such as this.
</aside>
As previously mentioned in my rebranding blogs, it was in this stage that I realised I was not happy with the body text I had chosen for the brand. I did a side by side comparison in this low-fi stage and it confirmed to me that league spartan was the stronger choice for the product.