In this walkthrough, I’m going to take a local business website and show you how small, thoughtful tweaks can significantly improve the overall layout and design. I’ll be using a Figma plugin called HTML to Design, which turns a live website into a fully editable Figma file.
Pulling the Website into Figma
The site I’m reviewing is Hero Martial Arts. I used the HTML to Design plugin to import the full site into Figma, where it automatically generated all the layout layers. It’s a decent website to begin with, but there’s a lot of room for refinement.
Improving the Hero Section
The hero section has a pastel paint-like background and an awkward shape divider. The layout also spans full width, while the rest of the site sticks to a contained layout. The call-to-action button is very low contrast and hard to see.
Here’s what I changed:
- Removed the background image
- Broke up the long intro text into a heading and subtext
- Applied uppercase styling and letter spacing to the subtext
- Increased the size and visibility of the primary button
- Adjusted alignment so text and image are centered within the layout
After these adjustments, the hero section feels more polished, with clearer hierarchy and more effective emphasis on the call to action.
Streamlining the Image Sections
Following the hero, there’s an image section that works well, but then another section with four additional images that feels redundant. I removed the second set of images entirely.
Then I:
- Centered the body copy
- Broke the About Us section into two lines: “About Us” and “Hero Martial Arts Mount Juliet”
- Updated type styling to improve readability
- Repositioned the head instructor image and added a button below it
- Moved the lead generation form that’s lower down the page further up into this section
Here’s the results:
Creating Better Structure in Content Sections
I continued cleaning up the layout by:
- Changing the SVG icon color to match the brand
- Adding a light gray background block for structure
- Grouping content into three evenly spaced cards
This change gave a cleaner layout with better alignment and visual separation between elements.
Cleaning Up Layout and Consistency
There was a small headline that didn’t add value, so I removed it. I also:
- Converted another area into a two-column layout
- Matched text and color styling for consistency
- Corrected spacing and alignment issues
Updating the Testimonial Section
The testimonial section had a parallax background image and a quote:
- Centered the quote
- Overlapped the quote with the section for more depth
- Improved padding for consistency
Refining the Tab Section
- Increased the font size for clarity
- Reordered content to place the image on the right and text on the left
- Rewrote the button label to be more descriptive
- Added a heading for context: “Our Classes and Age Groups”
Polishing the FAQ and Footer
For the FAQ section:
- Reduced background opacity for better text visibility
- Updated button and icon colors for clarity
For the footer:
- Ensured all content was aligned within the site’s container width
- Scaled and repositioned the logo, contact info, and map
Before and After Comparison
With just a few layout changes, color updates, and clearer hierarchy, the site already looks significantly more polished. I used Figma’s ruler tools to align everything, and the before/after comparison speaks for itself.
This was a fun challenge and shows how subtle design changes can have a major impact on the quality of a site’s visual presentation.
Are you interested in getting my professional help on refreshing your website? Get in touch!
