Hero concept for an Accounting firm

I’ve been teaching myself how to use Figma for the past few months, and I think I’ve finally designed something I’m proud of. A clean, modern hero for an accounting firm. Credit to @346eur for the color palette inspo.

The Design Challenge

The challenge was to design a modern hero for an accounting firm that could be used as a template for future clients. The design had to be complete, with no placeholders.

Color Palette & Inspiration

I had a specific color palette in mind before I knew what I wanted to design with it. I saw it on Threads and thought the blue & orange hues would work well on a web design.

This color palette works for accounting firms since they are a more modern take on traditional blue hues that accounting firms usually use for their branding. The bright orange adds a bit of vibrancy and helps stand out from the crowd.

Typography

I went with Montserrat as the font for its versatility, featuring many weights I could play around with. It works great for modern business websites.

I used bold weights for the headline to establish strong hierarchy and lighter weights for supporting text.

Design Iterations

I received a few suggestions in Threads for tweaks I could make to enhance the design. If you compare the original version with the final version, you’ll see I took advantage of the available whitespace so that the headline didn’t break awkwardly. I also aligned the trust indicators with the image, and the image itself was aligned with the contact button in the navigation bar.

Original

Key Changes from Original to Final:

• Improved headline spacing to avoid awkward line breaks
• Aligned trust indicators with the hero image
• Aligned image placement with the contact button in the navigation

Final

Lessons Learned

This was my first Figma design where I started out by creating a design system first, which helped me iterate faster and maintain a consistent look across the design. Being able to update the individual components once and having all of the instances update in the background was a game-changer, and solved one of the biggest headaches I was facing with Figma.

If you’re learning to use Figma, I highly recommend you start with a design system first, and iterate from there.

I’m sharing a version of the design system for anyone who might be interested in trying it out.

What design challenges are you working on? Share your thoughts or designs with me on threads.