When you open a draft on Figma to start a new web design project, the blank canvas can be intimidating, and the entire process from there to a finished website can feel daunting. The first step I always take is to browse the internet to collect inspiration for the project. Here’s my process for building a moodboard that helps tremendously throughout the design process and aids in communicating with clients.

Gathering Initial Content

I begin by gathering content from the client, which could include their logo, brand guidelines, preferred font family, color palette, pictures or photos they use for their social media (or existing website), and images of their place of business, like stores or office spaces. Since all this design needs to be approved by the client, the approval rate for following said design is also high. It also maintains consistency throughout their brand, reinforcing their customers’ brand awareness.

Competitor Analysis and Inspiration

Next, I screenshot webpages and sections from websites or even mobile applications of direct competitors (a quick competitor design analysis) or businesses in the same industry to understand their business, the information and metadata they display, and what could be applied or avoided in this project. Imagine you are the customer or target audience of the business you’re designing for, and use Google to see what websites and businesses show up in your local area as well as internationally. At this point, your job is just collecting with the project in mind—feel free to capture whatever piques your interest and seems helpful or applicable to the project.

Expanding to Fonts and Colors

After browsing inspiration from the same industry, I broaden my search for font pairings and color combinations. The color and typography convey the tone and mood of the website significantly, so collect and experiment to see what works for your brand and website. Take into consideration the type of images they plan to use for the website as well.

Organizing and Refining

You should now have folders filled with screenshots and images, along with bookmarks of websites you came across that inspired you for this project. The next step is to organize and choose the handful of the best options. I usually copy all the images into Figma (https://www.figma.com/) and drag and drop them into piles until I’m happy. There’s a pile for the business aspect of the project (what information to include), a pile with design layouts I want to use to convey information, and a pile with great color combinations or font pairings,…. Looking through these piles will give you a general idea and sense of the direction your website will take.

You can involve the client in this process by asking them to send you links to their competitor websites, what they like and don’t like, and what designs they enjoy that aren’t necessarily websites. One subtle thing I look for is the type of phone or app they like using, as those are likely the designs they’re fond of and tend to gravitate toward.

Turning Inspiration into Action

Now the blank page is filled with inspiration and colorful images. I’m no longer discouraged and am filled with determination since I can’t wait to design my own iteration that fits and works best for the client and their business. In the future, the websites I’ve designed will also appear in other designers’ moodboards, continuing to inspire others.

Tools I Use

Some tools I use include Hoverify (https://hoverify.co/) (to capture full webpages or sections, as well as view tech stacks), Lapa Ninja (https://www.lapa.ninja/), Awwwards (https://www.awwwards.com/), Designers Daily Reports, Templates Library from Envato Elements (https://elements.envato.com/), Webflow (https://webflow.com/), Framer (https://www.framer.com/), Shopify (https://www.shopify.com/), and, of course, Google.

Let’s Connect

Where do you find your design inspiration, and how do you go about building a moodboard for your project? I’d love to learn more and discuss—feel free to email me at hello@binhnguyen.me.