I’ve been in this game for nearly 15 years. I was around before responsive websites were a thing. I’ve designed websites in Photoshop for Christ's sake! Over the years I’ve seen a tremendous evolution in web design tools and processes. New prototyping software has made it easier to design and collaborate with developers and I’m constantly amazed at how far the industry has come in this time.

However, all of that pales in significance compared to when I discovered Framer. In the Summer of 2023 I started to hear rumblings on X about this new piece of software that was changing the game. People were sharing links to sleek, professional websites, all made with zero coding knowledge. Naturally, I was curious. Just as I was considering trying it out, a family friend asked me to create a website for their new plumbing business. The budget was tight, and typically, I’d point them toward a DIY website builder. But this was the perfect chance to test Framer.

First impressions

I still remember my initial experience with Framer. The interface felt familiar like other prototyping tools I’ve used so I settled in quickly. I began by following my usual design process—setting up text and colour styles, adding breakpoints. My first wow moment was when I started designing on the desktop canvas (yes I’m desktop first, you can’t change me) and immediately my designs appeared on all of the other breakpoint canvases. This is such a simple but impactful design decision. Your desktop canvas is your primary canvas, any changes you make on it will be reproduced at all other breakpoints but then you can manually tweak the other canvases as you wish and it will keep those overrides.

If you are like me and you like to reduce padding at smaller breakpoints this can be easily applied. But in terms of workflow this is a far more efficient way to do things. In prototyping software I’d have to rebuild each breakpoint manually which was a huge time sink and prone to a lot of spacing errors. 

The next revelation came while working on my friend’s plumbing website. I realised I could add animations to elements in just a few clicks. And not just simple ones—you can adjust every detail, from speed to delay, mass to bounce. Previously I had to juggle two or three different tools just to show developers how I wanted the animations to look. Framer cut out that extra step entirely.

It wasn’t plain sailing building my first Framer site, I did spend a long time figuring out how to create a mobile-friendly navigation menu. Fortunately there are lots of free tutorials online and people in the Framer community are keen to help. When I was ready I hit publish and I had a fully working website. A short tutorial later I had the site on a custom domain. My friend was chuffed with their new site and I was starting to rethink my market offering.

Learning curve

If you’re familiar with Figma and comfortable using components, styles, and auto layout, you’ll already know about half of what you need to work with Framer. The other half requires a shift in mindset—you start thinking more like a developer. You need to consider how to structure your site for performance, cross-browser functionality, and SEO. But any questions you have, there’s a tutorial for it. Occasionally you may need to add a bit of code but don’t worry—it’s usually just copy-pasting a few lines and adjusting some variables.

Web design process before and after Framer

Framer isn’t just another piece of web design software, it’s THE web design software. It has completely changed my offering.

Before Framer if I was to work on a website project my process would look something like this:

• Scope project

• Estimate my costs, developer costs

• Proposal

• Sign off

• Content delivery

• Sitemap

• Sign off

• Web designs

• Sign off

• Export assets for build

• Create guidelines for developer

• Additional animation examples

• Build

• Round one of snags

• Build amends

• Round two of snags

• Build amends

• Round three of snags

• Build amends

• Project sign-off

For a ten-page site, this process would take over a month, and it involved a lot of tedious back-and-forth.

Now, my process looks like this:

• Scope project

• Estimate my costs

• Proposal

• Sign off

• Content delivery

• Sitemap

• Sign off

• Design site in Framer

• Any amends

• Project sign off

Since the design and build stages are now combined, I can complete projects significantly faster. For a ten-page site, I can easily finish in two weeks. Not only that, but the quality of my work has improved largely because I have full creative control. I can implement new ideas on the spot, experiment with animations, and avoid the endless rounds of revisions. The days of comparing my designs to a developer’s build and playing “spot the difference” are over.

Strategy

My approach has shifted. Now I can offer clients an end-to-end branding and website service with faster turnaround times at competitive rates. Essentially I can cut project costs by a third (eliminating developer fees) while increasing my profit margins. Agencies love working with me because I can deliver beautiful, fully functional websites quickly, and they only have to deal with one person.

Framer is easy enough for beginners but powerful enough for experts. In just over a year of using it, I’ve launched 20 client websites, and as I get more proficient, my speed and output continue to improve. If you’re thinking about trying Framer, take the plunge—you’ll wonder why you didn’t start sooner!