Research : Responsive Design

This was from an online lesson on zoom.

The navigation of software is consistently changing. 2 years ago, Adobe XD was the top application for building webpages, however now, Figma is the one to beat. Figma on the other hand, cannot publish websites, only design the websites. This is why Webflow is such important software pieces that we need to look into. There is however, a really advantage software that can allow for the cross over a Figma file, called Framer. Framer does not need the follow through of auto layout, which is useful for designers needing to get a website done quickly.

Below is a Figma autolayout layout playground file in which I used to gather some more knowledge on the subject.

From the workshops, to the building of different components within Figma, and learning different sections on my own via YouTube or Figma’s tutorial platform, I think my Figma skills are quite good, and feel comfortable enough to attempt to transfer my project onto Framer!

Research : Layout Grids

To make this website feasible, and also accessible, it had to be responsive amongst mobile, tablet, and laptop interfaces. This was something I had never done before, and whilst it took em a while to figure out, I got there in the end with the help of the Figma Tutorials Chanel on YouTube (https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA).

A key fact I learnt to help me maintain a responsive web flow was the use of grids within design, and especially, the use of the multiple of 8 within that grid design. Vertical grids should always have the same properties regardless of screen sizes, the video noted, but horizontal grids can be changed to adapt to a size.