Arek Dvornechcuck
Branding Expert
In this article, we'll explore how to leverage Figma for web design, creating impressive websites efficiently.
We'll dive into streamlining your web design process, including specifics of building wireframes, writing compelling copy, creating a style guide, and finally, designing the homepage.
PS. You can also consume this content in video form on my YouTube channel.
Figma is a cloud-based design tool that is rapidly gaining popularity among UX and UI designers worldwide.
It allows real-time collaboration, making it the perfect web design tool for remote teams and freelancers.
It's not only free but also browser-based, which means it's accessible from any device with an internet connection.
With Figma, you can create, prototype, and get feedback in one place, streamlining your design process.
Let's take a look at a recent website redesign I completed.
On the surface, the differences between the old and new designs might seem minimal, but remember, design is all about the details.
In this project, we've incorporated new illustrations, structured the content more effectively, and improved the overall design aesthetic.
The old design was crafted using Adobe XD back in 2021 (see this work on my portfolio) but with the client's request for an update, the design was given a fresh look with Figma.
The difference between the old and new designs may not seem significant at first glance, but as the saying goes, "the devil is in the details".
Figma is a free software that you can sign up for at figma.com which is beloved by web designers mainly due to its straightforward and intuitive interface.
For instance, you can begin by creating a frame, which is essentially your canvas where you will build your page design.
Then, you add shapes, text, and other elements onto this canvas, similar to placing objects on a page in Photoshop.
Its intuitive interface allows you to start from scratch, introducing elements such as green rectangles, logos, menus, buttons, and other elements to construct a layout.
The properties panel on the right allows you to change characteristics like color, text size, alignment, and more.
These properties make it a breeze to build custom elements like headers, buttons, and menus.
The first step in designing your website is building wireframes, which are essentially the backbone of any web design process.
Here, we'll make use of the Relume Library, which offers free Figma files with hundreds of pre-made web components and layouts.
In this project, I started with a basic wireframe filled with placeholder content (see image above).
This resource provides multiple layout options for various components of your website, such as the navbar, footers, headers, and other sections.
The goal is to select the right sections for your needs, copy them, and paste them into your new page, creating a structure for your homepage.
I'll later gradually replace this dummy content with actual headlines, paragraphs, and eventually, the final design elements.
The evolution from a basic structure to a fully realized design is a fascinating journey in every project.
With your wireframe set up, the next step is to write the copy.
For this, we'll use ChatGPT, an AI tool that is excellent at crafting engaging copy.
By providing the AI with guidelines and the framework of your choice (in this case, the StoryBrand Framework by Donald Miller) you can make it write really good copy and in the matter of seconds.
The, you can refine the copy to perfectly suit your needs, adjusting and refining the details like CTA's or headlines.
I merely had to tweak a few areas to make it fit the overall website context, a great testament to the increasing sophistication of AI chatbots like ChatGPT.
PS. Check out my full list of AI tools for every business need.
After writing the copy, it's time to add content and create a style guide.
Using tools like MidJourney, you can generate unique and original images that are required for your specific website.
Alternatively, you can use stock photos like Adobe Stock or Unsplash to find the right assets for your webesite.
In this step, I simply populate the design with real content—this included images, illustrations, icons etc.
Next, we'll transfer your style guide into Figma to ensure consistency across all aspects of your design.
Figma's features support the creation of styles and color swatches, making it easy to establish a uniform look and feel.
Here's the original style guide I created for Medihuanna (which is quite comprehensive), but it should cover at least your logos, typography, color palettes, and perhaps other design elements.
PS. Learn more about design systems.
As you're moving along with applying styles and adding colors to your basic wireframe—you'll start seeing your web design coming to live.
The homepage is the first impression a visitor gets of your site, so it's crucial to get it right.
That's why it's important to tweak all the details, alignments, sizing, etc. until you get a unique and custom look.
In this case, I've also added some patterns, custom illustrations and other elements to achieve a clean, modern homepage that is aligned with the brand's overall aesthetics.
The web design process outlined in this guide shows you how to create websites in a day (not weeks or months).
Using Figma and other tools like the Relume Library helps you streamline your workflow and makes delivering websites to clients a more efficient process.
If you're looking to build a new website (or redesign one), just shoot me an email.
