Kheya Nandi

This is a project on landing page design for a personal website. It is a personal project. I used Figma to design this landing page. It took me 2 days to complete this one from research, wireframe to mockup.

Here’s the style guide/sticker sheet. These all are reusable and can be modified if required. For typography, I kept in mind the rule of text hierarchy. I got these icons from a plugin on Figma. I used contrast colors so that they can be visually appealing and also impact user experience. There are several hover effects that I used for the CTA’s.

First Block: The first block contains the Site Logo on the upper left side. On the upper right side, it has top navigation (Home, Portfolio, Services, Blogs & Contact). It has “About Me” on the middle left side. I used the Letter Spacing hover effect for this CTA. Below this section there is a resume download option, this has a hover effect as well. On the right side, five projects are displayed, They all have a Zoom out hover effect; under these, a “See All Projects” button is there, which has a hover effect too.

Second Block: This block highlights the services with a short description. I kept the background dark and used a white rectangle-shaped box where I placed the text. It gave a decent contrast and improved UI for this section. A ” See More “ option is also given to check extended information about this part. This CTA has the same letter spacing hover effect.

Third Block: The third block displays a client list in two rows. There is a “View All Clients” option which leads to a full client list. This CTA shows the letter spacing hover effect too.

Footer: I kept the footer clean and simple. I added a “Contact me” option on the left side. On the right side, some social media handles are provided.

Lastly, here’s the video representation of the landing page.

In conclusion, I want to thank you for your time in reviewing my work. Please let me know your feedback on this, it matters a lot.