Reflection

This week was a little different to previous weeks as some of my class mates and lecturer were away for an employability trip to London so we had no lecture content. I used the time to continue on with my deliverables.

Landing Page I began my landing page. As I had already completed sketches last week the task this week was to get it in Figma. I started with my hero image. I used Anthony Boyds mock ups to display my app. To come up with some of my strap lines I used Chatgpt for some prompts which was very helpful. For the colours I played around a bit with my colour palette to see what looked best. Initially I had a dark background however I felt this took away from the app and didn't make it stand out as it didn't create enough contrast. I also experimented with different visuals such as a glowing gradient behind the phones and a gradient curve for the hero image, however these were not as effective as I had hoped. I then looked through Pinterest for some inspiration and I came across this landing page for High Fluency and the background shapes inspired me to create something similar.

Untitled

Once I had create the shapes I had to choose my colours I initially had the green background with the dark green shapes however this made me think of Pets at Home branding so I decided to try the mint cream background with green shapes and this works a lot better. I also decided against the dark text as it failed the contrast test. Moving past the hero image I wanted to show what my app does but I wanted to avoid paragraphs and big sections of text as much as possible to I decided to create illustrative icons and short sub headings to describe what we do. I initially had this on a neon green background however after getting feedback from friends we agreed this was too harsh. I decided to go for the dark green in the background. I feel like this adds depth to the page. I also initially followed through with the shapes going down the page but this created a lack of uniformity so I decided I would keep the shapes for the header and footer and use basic rectangles throughout. This also helps divide the sections so the user can clearly see they are moving on.

To create a hierarchy with my information I displayed them in what I believe is most important to least. This lead me to putting my values at the bottom, this does not make them not important but from my experience with landing pages I believe this is the order I would want read information in. I used illustrations to keep the user interested and shown more of my app screens further down to help with this as well. I then used photography towards the bottom to balance the text. I wanted to avoid large bodies of text as much as possible so with my values I split them up into sentences to make them easier to read compared to a large paragraph. I also removed all non essential information.

https://www.figma.com/file/PN4cdBfygERkwL6PVcIQyd/Landing-Page-Drafts?type=design&node-id=0%3A1&t=mk8hpykH6CswgTVB-1

Here is my final landing page. I’m very happy with how it turned out although I had to change a few things from my original vision, I feel it works really well.

Zura Landing Page.png

Figma file.

https://www.figma.com/file/3taZiIyzMi2H6NbQrqMxbm/Zura-Landing-Page?type=design&node-id=0%3A1&t=1BoXjy01OoGBa7Av-1