High Fidelity Design - Prepare and Execute Like An Agency

One of our primary services is designing impressive, modern websites. So when the time comes to work on our own site, our team are all in.

We need to result to be so good that when potential leads turn up on our site, they’re half sold by the time the homepage loads.

The next step was putting together the high-fidelity design.

Here’s a summary of the topics we cover in this rebranding series:

• Step 1: 🏀 Defining Rebranding Goals & Brand Strategy - A Complete Guide
• Step 2: 🚚 How To Pick Your Niche - How My Software Agency Solved This Problem
• Step 3: 🎡 Finding A Branding Freelancer - How To Hire An Expert On A Budget
• Step 4: 💳 Building Our New Branding - The Process To Follow
• Step 5: 🗺️ Website Roadmapping - Planning To Maximize Conversions
• Step 6: 🖊️ How To Write Great Website Copy - Sharing Our Process
• Step 7: 🎨 High Fidelity Design - Prepare And Execute Like An Agency
• Step 8: 😶‍ Choosing The Best Website Framework & Headless CMS

Research process

Rather than simply jumping into design concepts, we wanted to do our due diligence and survey the design landscape. There are tons of great websites that have had a lot of research poured into them, just asking to be leveraged.

However, finding websites worth investigating amongst the vast sea of the internet is challenging.

Sites like Awwwards are an easy place to start, but the designs that make it onto these sites aren’t built for practicality. They’re slow, full of animations and err on the side of artistry rather than conversion.

The next option is simply plugging “top companies in my niche” into Google and seeing what returns. Surprisingly, companies with a budget to spend on SEO and ads aren’t always the ones with good design.

We’ve also flirted with digging around Dribbble and Behance but the way they require posts to be formatted makes it difficult to identify good designs.

So what is the best way to research relevant websites that have great web designs?

Enjoying the content? We're working on some really cool new content around headless services and the best digital products to watch in 2023. Sign up to our newsletter to receive a monthly summary directly to your inbox.

How to find inspiration for your website

The best way we’ve found to research cutting-edge, conversion-focused design trends is to analyze what the top User Experience (UX) agencies are doing with their websites. These companies aren’t just focused on building impressive websites. They also put a lot of thought into how users interact with the design.

Finding the top UX agencies across the globe is pretty straightforward. Almost every digital marketing, web design and software development agency worth its salt has a listing on Clutch. So all you need to do is Google “Clutch top UX design agencies”.

You now have access to thousands of UX-focused companies that have spent hundreds of hours refining their website designs. The first few results showcase tight animations, minimalistic designs, clean typography and creative styles.

Here are a few examples from the top 10 UX companies on Clutch:

Research tip - focus on features

One tip we can share from researching dozens, if not hundreds of websites, is to focus on features. Picking an overall style is relatively straightforward, but if you’re anything like us, the conversation will become more granular, and you’ll want to focus on feature styles.

You don’t need to find inspiration for every single feature, but it’s worth digging into the big stuff like:

• Navigation
• Hero
• Call to action
• Primary content areas
• Testimonials
• Case studies
• FAQ
• Latest article showcase
• Awards & recognition
• Footer

Depending on what elements your team identified during the Website Roadmapping process, this list will be different. <<link to article>>

Time to design

Finally, it’s time to put the design together. This is when we hand the reins over to Patryk, our senior web designer.

I won’t go into too much detail about the actual nuts and bolts of how he designs websites, except two things; the tools we use and the CSS framework we adhere to.

Tools

We’re completely committed to Figma as our design tool. Rarely, we’ll need to bring in an Adobe product like After Effects to create a video or to show how an animation will come together. But for the most part, we stick entirely to Figma.

Are there other tools on the market that do a similar job? Sure, but they’re not as good as Figma, especially for collaboration. This may change now that Adobe has purchased Figma, but for the immediate future, we’ll keep using it.

CSS Framework

We build a range of websites and applications using different technologies. Becoming proficient in new technology is time-consuming, and where possible, we try to use the same tools and frameworks.

Almost everything we build has a user interface and requires CSS. We use a framework called Tailwind CSS.

Tailwind preached particular design standards around colours, naming conventions, and global properties like font sizes. While it’s a framework for writing CSS, it can be implemented during the design stage. Creating classes in Figma to match the intended CSS classes is a massive time saver and ensures that the developed product is consistent with the design.

The results

Here’s a high-level look at the results of the design process.

What you can’t see from these screenshots is the dozens of comments we’ve littered across the design. This part is made easier by Figma. Each page has gone through several rounds of revision to get it as close as possible to “perfect”.

If you’re keen to see the final results, simply browse around our site. There are still some polishing touches to build in, but it’s 95% done!

Wrapping up

That’s it for the high-fidelity design part of our rebranding process. We’re nearing the end of the journey. All we need to figure out our tech stack and then get it developed!

If you’ve got questions, please leave them in the comments section below.