Hi Everyone!

I've finished designing the second landing page based on the basic concepts learnt throughout this course. Any feedback is much appreciated! 

 

1. Hero section: 

I decided to go with a photograph as the hero section of the landing page. I made it darker to make sure that the white text stands out and is legible.

As for the header I designed a classic navigation bar, with the logo on the left side and used a gradient of my two main colours.

 

2. 1st Features Section:

For the first feature section I organised the paragraphs into 3 columns using the 12 column layout presented in the course. I used colourful symbols and a wavy background element which is in line with the client requests. 

 

3. 2nd Features Section: 

In this next section I decided to use an illustration from unDraw. I changed the colours to match the brand. I simply listed the features with checkmarks next to them to let the users know how the app is perfectly compatible with their iOS devices.

 

4. Small CTA:

Being one of the most important parts of the landing page, I wanted to make sure that the small CTA section stands out so I set the background colour to purple and used a larger font size.

 

5. 3rd Features section:

In this section I used similar illustrations to the one before, and the same wavy background vector filled with the main gradient to ensure consistency throughout the page.

 

6. Screenshot gallery: 

I incorporated an image slider in the screenshot gallery section, just as the client requested. I think it works good for this part as the information is in pictures (not text) and I designed arrows and a slider indicator in the bottom to make it easier for the user to navigate. 

 

7. Testimonials:

This is probably my favourite part, I really enjoyed designing it! I decided to incorporate a second slider in the Testimonials section, to let the user read as many opinions as they need before they're really convinced that NUMM is the right budgeting app for them.

 

8. Main CTA:

When designing the main CTA section I wanted to make sure that the layout is somewhat similar to the one seen previously in the small CTA. Again the reason for this is to make sure the page is consistent. I decided to incorporate the pricing in this section as well to make the layout cleaner. 

 

9. Footer:

I wanted to keep the footer as simple as possible while including all the information needed. 

 

Here's a picture of the whole page where you can see how the different elements and sections work together: 

 

 

 

Down below you can see my first attempt of getting familiar with Figma by basically designing more or less the same page that Adi did: 

1. Hero section:

 

2. Features Section 1: 

 

3. Features Section 2: 

 

4. Small Call to Action: 

 

5. Features section 3: 

 

6. Screenshot Gallery: 

 

7. Testimonials: 

 

8. Main Call to Action:

 

9. Footer:

 

Thanks for watching, please feel free to get in touch and give me feedback on my work! :)