This week we had no class due to the bank holiday, so it was a case of carrying on the project work, that was still outstanding. This included settling on a layout and finishing off my landing page, updating my draft brand guidelines to their final iteration and creating some more mock-ups using the now finished app and landing page.
After finishing last week without a satisfactory layout that I felt was ready to develop into my final landing page mock-up. I started this week by digitising my final sketch, the “Z” shaped layout.
I set up the page using a 20px layout grid on Figma, so I could get the alignment right from the start. I felt this was particularly important for this layout as I would be swapping from left-to right and combining a mixture of text, image and mock-ups as my content. All of which would have different dimensions, but still needed to flow and look correct as an overall design.
From adding the first few pieces of content to this layout I was immediately a lot happier with how the layout was working. As I mentioned last week I had taken a lot of inspiration from the Revolut landing page, but I didn’t want to create a carbon copy. One of things I noticed Revolut had done really well was to minimise text content keeping all copy brief and to the point, I wanted to do this as well. So for all my body copy, I went through what I had created previously and cut it down to the essentials while still maintaining the tone of voice and required information. This involved clear titles and simple effective copy and I was pleased with the results as often keeping copy concise is something I find difficult.
I got into a flow with creating this design, adding content and continuing until I had all the content I wanted to include. I tried to order content in how important it was to my brand, so I started with my main strapline and worked down through, the key points of difference my brand brought to banking. As part of this I created some specific mock-ups (which I will discuss in more detail below) and these lifted my landing page and gave another type of content instead of just stock imagery (all sourced copyright free from Unsplash) and body copy.
Below you can see the layout I finished with on Figma:
I am only left needing to add a footer to the page and to proof read my copy for any spelling mistakes or grammatical errors. After which I will be ready to move this mock-up into Framer and see how it looks as an actual website.
After finishing my Figma version I used the Figma Plug-In that allows you to transfer your Figma mock-up directly into Framer. I have used this plug-in before and the results can be variable. One of the major issues is that you cannot copy over your complete prototype at once, you have to split it into sections and paste these over one at a time, for this project I had to split it into four sections to move it into Framer.
My main issue however was the simple fact I could not use the same 20px layout grid I had on my Figma prototype, so getting the spacing the same was difficult and I had to use my own eye and judgement. This became less important when I published my site from Framer for the first time and realised my font sizes were too big, this is because as you are always zooming in and out on Figma, you very often do not work at 100% zoom. Often on larger monitors to get an overview of the whole project you are using around 37% zoom. This gives a false impression of the font size required, and in this case made me go for a larger font size than I required. This is useful knowledge that I will keep in mind for the future.
You would expect to spot this issue when you go into presentation mode in Figma, I had sized this this prototype to fit a MacBook Pro 16” so when I go into presentation mode, I see the screen shown inside a MacBook mock-up. This also gives a false impression of the font size. This is all useful learning and something I will remember for future projects.