In this article we will show you exactly how we built a website design using Figma and how you can follow step-by-step and replicate the design for your own website or sales funnel.
Figma is one of the most popular tools out there, but for those of you who don't know about Figma yet, we will give you a short introduction to the design tool and how it can be used for designing sales funnels and websites.
You will learn how to design a landing page like this - Read below how!
We use Figma for basically every funnel design project we do. We've just passed the 500-mark in number of funnels built, meaning we've used Figma a lot and tried out different software and tools for design - Still using Figma and we'll explain why later in this article!
For those who prefer video content, make sure you check out our video below as well!
What is Figma used for?
Figma offers a lot of solutions for funnel and design businesses, and even though we use it most for the graphics, we will give you a short introduction to Figma as a whole!
Figma is a web-based design tool that is used for creating user interfaces, web designs, mobile app designs, and other visual design work. You can also design simple images, graphics, backgrounds and vector icons - Which will then be exported to other projects.
It is a collaborative platform, meaning you can easily set up projects where you collaborate with your design team as you build out a prototype or design.
Clients or team members can easily post comments and share ideas and feedback during the design process, to make sure you reach the same target.
What are the features of Figma?
Figma is constantly developing and adding features to it's design editor.
Here's a sample of basic features inside Figma that will be helpful:
Vector tools - Tools to craft and modify shapes, lines, icons and curves.
Design libraries - Ability to store designs and graphic elements for future use.
Prototypes - Prototypes can be created and shared with remote clients or colleagues.
Responsive - Website designs are responsive and works with desktops and phones.
Collaboration - Managing and updating designs in real time with colleagues.
Plugins - Plugins will allow you to add powerful design tools for your projects.
Export - Figma allows you to export files in many format and easy to pass on.
Version - Figma allows you to track and manage your progress and previous work.
Feedback - Team members and clients can add feedback & comments to you work.
All-in-one - Figma covers everything needed for designing top-notch graphics.
This is just a general summary of the features and as you start out, you will quickly learn what to use and how to combine different features for maximum output.
How To Design a Website Or Funnel In Figma?
We will describe how we use Figma and how to get beautiful designs and graphics easily and quickly - Without adding too much distractions or noise to your page.
Remember, when designing websites and sales funnels, you wanna consider both design and conversion rates. In the end, these are the two parameters your clients will care about.
1. Basics of Website and Funnel Design Before Getting Started
Before we get started with our actual design projects, it's a good idea to do a short research about the client to make sure we understand the needs by collecting the following:
Project - What should the project include? Landing page? How many pages?
Niche - Niches usually have a typical design or theme you wanna align with.
Target audience - Who will use the website? Who are we selling to? Keywords?
Brand - What theme and colors are we gonna use? What's the current brand using?
2. Summarize resources for your Figma Design Project
In step 1, we did the research to make sure we understand the client and it's needs. In step 2 we are collecting inspiration and summarizing it all inside our design project.
In the picture below you can see there's 6 different screenshots and images from funnels and websites.
What we usually do is we go through inspiration sites and resources like Pinterest, Uplabs.com and Templatemonster.com and look for designs that we like and aligns with the brand colors we wanna use.
We have an article on 15 inspiration sites we use to collect inspiration from. You don't need to sign up for a paid plan on these sites, instead do a screenshot of the design and export it to Figma while designing your own.
Example from Dribble.com below, where we look for our funnel themes and pages.
Once you have a bunch of screenshots of websites or funnel designs you like, you will have an easy time to pick small elements from each image and combine them inside your own design. We never replicate an entire image or website, we only use them for inspiration.
Sometimes we like to sketch a wireframe (See middle in the picture below), where we quickly put together a layout to make sure we stick to our plan and stay consistent.
To the right you can see our color palette, that we either imported from a color palette generator or chose based on colors that matched with our brand theme.
This is how we collect inspiration, draw wireframes and brand colors and themes.
Once you put all these together, it's much faster and easier to get a beautiful and professional design done in Figma.
3. Frame
You have all the resources and graphics inside your project, now it's time to start designing.
Add a "Frame" to your project, simply by selecting frame and drag and drop it into your project. Edit the width to align with a desktop screen.
We go with the following frame dimensions:
Width: 1920
Height: 1080
4. Logo, headlines, subheading
Logo
Let's add the logo up to the left, since we already had the logo inside our Figma project. These resources will come in handy once you designed them once. If you're working with clients, you might have to ask them for the graphics and logos.
Headline
Next we are adding headlines, editing the text color and adding a linear gradient effect to make it a bit extra beautiful. Also adding a drop shadow to the text to lift it up from the background.
Font
We usually go with Montserrat for headlines, as we like the simplistic and clear style. It is easy to read and give a professional look to our website or funnel.
Once you are happy with the text, make sure to duplicate it and all the formats are ready to use in other areas on your website and design, without you having to edit the texts every time you add a textbox.
Subheading
Use the headline to duplicate the text if you want the same format. You might wanna consider removing or reducing the shadow on the subheading, otherwise it might take away too much focus from the headline etc.
5. Frame, Text and Image
Frame & Image
In this step we are adding a big rectangle for an image to the left and 3 more fields to the right. (See image below.)
Text
As we start designing, we might not yet know exactly what the text fields will be like.
To keep focus on the design phase, we are going to use a plugin called "Lorem Ipsum", which will generate a random text for you.
This is great when designing and not having all the texts ready, as it will give you a hint of what the site will look like in the end. (Lorem Ipsum under "Get a free template".)
6. Text fields, Icons and Call-To-Action
Text field
To visualize where visitors will put their name and addresses, we are adding texts inside the boxes and frames we created earlier. This is not working as a field to insert text into but will do so in the actual building phase later. This is only for design purpose only.
Icons
The icons for "Your name" and "Your email address" will be added by using a plugin called "Iconify". Simply search for your preferred icons, select them and then will Figma let you choose colors as well (if it's the right format).
Since blue is part of our color palette, it's our choice for the icons. Once you are done modifying the icons, drag them innto your text field or frame.
Call-To-Action (CTA)
Select the last box and add fill with a linear gradient of blue. We want the button and call-to-action to stand out - To be visual and easy for the visitor to click!
7. Mockup and Portrait
Mockup
To really lift the design of the page, we use a tool called Smartmockups. Smartmockups allows you to add images to different elements and the tool will then give you a nice animation or mockup of the images. Categories you can choose from varies from books, letters, desktops, laptops etc.
Portrait
Once the mockup is done, we are adding a portrait on top of the mockup.
We simply take one of our portraits and put it into a software for removal of the background. This is also available as a plugin called "Remove BG".
Once the portrait is ready, we add it onto the mockups. Just like that, we have a beautiful combination ready for the website.
8. Signature and Circle
You can keep adding small details and elements to improve the design, as long as you make them fit in with the other elements. Keep them discrete - The best designs are the ones where you don't know what makes it so good when you see it, but you just see it as a complete design unit and are amazed by it!
Signature
As a signature we are adding Gusten and as a complement to that we are hiding title and Brand just under the signature. Signature is a picture from a logo and the "CEO, FREEDOM FUNNELS" is a text box.
Ellipse/Circle
The blue blurry circle behind Gusten's head is a circle (or ellipse), with added layer blur.
This will make him stand out from the mockups behind him but still giving us a hint of the mockups and templates behind him
9. Testimonials & Background Effects
Brands & Testimonials
If you have a good amount of clients and referrals from your previous projects, make sure to include them on your page.
We've put together a PNG with all the most famous brands we've worked with. This way it's easy to insert to funnels whenever needed.
Background Effects
As you can see on the picture below, we've added big circles with onto the background. These circles work the same way as the layer blur behind the portrait.
To achieve the blue circles on the background we added blue circles with the following:
Color: Blue / 0044FF
Fill: 30 %
Layer blur: 500
See, not very complicated but still makes the background better!
10. Mockup with Photopea
Once you've designed a good amount of funnels or websites, you can always sense something missing or feel the need to add something more to it.
You don't wanna stop until you are a 100 % satisfied!
We'll show you another cool software you can use for your designs: Photopea.com.
Open Photopea.com and use their eraser tool with 0 % hardness. That way you can erase and remove the edges of the image to make it fade into the background.
There are other tools for this as well, but Photopea is free, which people generally like to use.
Once you've erased and trimmed the edges, save and export as PNG!
Import PNG to your Figma file and turn the fill-rate down to 10 % for the mockup-bundle.
For this example we hade a premade bundle of mockups to use for Photopea.
Results - First sections for Your Landing Page
Just follow the steps above, or watch our video, to get a design like this!
Once you've built one for yourself, you can copy elements, texts or graphics and use them on other design projects to save time and effort!
Hope you are happy with the results!
This landing page has worked so incredibly well for us!
Now you know how to design one for yourself as well!
Check out the video here to see the steps visually!
* * *
Check out our YouTube channel filled with free tutorials and trainings like this!
Comentários