Designing a responsive landing page design in Figma: A Visual Design Case study
Introduction 👀
Sakhi is a conceptual e-library platform for people who love to read, discuss and consider books as their best friends. (Sakhi is a Hindi word for Bestie)
Role and Objective
- Working on the flow of the landing page
- Visual and UI Design (Grids, Layouts, Components, etc)
- Making the landing page design responsive with different breakpoints.
This was a conceptual project for my portfolio which I worked on to put myself in the shoes of a UI Designer and then design accordingly. This project took around 7–10 days.
Agenda of the Landing Page 🎯
- Creating Awareness: Creating Awareness about the new platform.
- Building Trust: Presenting the website in a way that it comes out as helpful, engaging, and reliable for the users.
- Conversion: Get users to Sign-up once they find the website helpful and reliable.
Research and Competetive Analysis 🧐
A key component of my research process was conducting a competitive analysis. This helped me understand what other e-library platforms are already doing, identify their pain points, and try to solve them resulting in an improved user experience.
Some key points from my observation were:
- No clear CTA: Websites lacked clarity of what is supposed to be done by the users.
- Lack of Communication: It almost felt like I was abandoned by the website to figure out what is supposed to be done because there was a strong lack of communication.
- Visually Unappealing: Most of the platforms appeared dull and lacked simple yet strong Visual language.
Quick Wireframing 📝
After figuring out the pain points, I had a brief idea about what things to focus on while designing the flow of the landing page. I started working on rough ideas over a sheet of paper to lay down and visualize ideas that were in my head. The focus was to have a rough idea of the flow of the landing page which helps me in getting closer to fulfilling the agenda of the website. I wanted to achieve a simple yet strong flow that didn’t overwhelm the user with information but kind of guided them step by step on what can be done.
Setting up for Visual Design 🤓
After some quick paper sketches, I felt the need to create the website's basic structure in Figma so that I could play around with different type settings, Grid layouts, and get a brief idea of what components would be required to make up the website.
Text Styles 🌐
One of the most important parts of any website is its type. Text tone and style play a very important role in deciding the overall vibe of the website. “Hi Ritik, what can we help you with?” in sans serif typefaces sets a friendly tone whereas the same message written in serif typefaces would sound a bit professional.
I wanted to create a friendly and engaging vibe for the landing page so I decided to go with Manrope Typeface. It’s a fairly good but underrated sans serif typeface.
Once the typeface was selected, I started working on setting up the text styles which could be used throughout the website. I started with body text because body texts have fairly more content than say headings. Most web browsers have default body text of 16px.
Font size: 16px
Line height: 24px (150%) for better readablility.
Letter spacing: 2% (allows space for the letters to breathe)
After the body text style was created, I created text styles for different headings, body, small body, labels, etc. I created two headings “Heading from H1 to H6” and “Small Heading from H1 to H6” as well which would ultimately help me in adjusting the texts for smaller screen sizes.
Color Styles 🎨
Colors also play a very important role in setting the mood and tone of the website. Since this is a platform related to books, I wanted to use colors that feel familiar to books such as browns, reds, blacks, and whites.
Tints and shades were created as color styles for each set of colors such as Primary, Secondary, Neutrals, and Accents.
Primary and secondary colors were used keeping the WCAG in mind. Most of the text or components such as buttons passed the AAA or AA (in some cases) contrast ratio.
Texts with the different font weights and colors with tints and shades were created as text styles and color styles respectively for efficiency.
Grids 🕸
Grid is what gives a structure to a website or landing page. It’s also one of the important building blocks of a website. I used 12 columns layout for desktops, 8 columns layout for tablets, and 4 columns layout for mobile.
I also used an 8px wide row layout for the vertical spacing of objects on the website.
Visual Design 🤳
As the type, colors and grids were in place, it was time to start working on re-usable components (atomic design concept). I started working on some components which would be used across the landing page such as Top Navigation, search box, etc making sure they would be responsive to the space assigned to them.
The top Navigation bar was created using Auto layout (space between) so it maintains the space between according to the change in screen size.
The search input bar responded according to the size assigned to it (fill container) and most of the components were created using the auto-layout and nested auto-layout feature in Figma which resulted in the components being fully responsive.
But after a certain point, the design started breaking, such as the top navigation links getting in the way of the logo, so I had to introduce different breakpoints for tablets and mobile screen sizes and adjust the design according to the screen sizes.
Landing Page: Mobile Screen
My Learnings 🧠
- Responsive Design (Designing for different break-points)
- The call to action should be clear for users to know what is expected from them and what are the secondary options
- Keeping the copy easy to understand
- Power and use of Auto-layout, constraints, and resizing features in Figma
- Efficient use of Text and Color Styles
Thank you for reading 🤝 If you liked my case study then you can let me know by giving some claps 👏 (claps are good for confidence 👀) or by commenting 💬
Also do let me know if you didn’t like anything or if anything could be improved, or just any general feedback for me is very much welcomed 📭
You can connect with me on Twitter, or Linked-in, or can mail me at: piyushux@gmail.com for work-related opportunities. Thank you :)
