Back to blog

High Fidelity Design - Prepare and Execute Like An Agency

25 min
Tim Davidson
Tim Davidson

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:

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.

Get a 'too long, didn't read' summary of our latest articles

Once a month, we compile and distribute a tl;dr summary of our articles so you get the good stuff quickly.

    We won't send you spam. Unsubscribe at any time.

    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:

    UX homepage from Clutch Listings - example 1
    UX homepage from Clutch Listings - example 1
    UX homepage from Clutch Listings - example 2
    UX homepage from Clutch Listings - example 2
    UX homepage from Clutch Listings - example 3
    UX homepage from Clutch Listings - example 3

    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.

    Design sneak peak 1
    Design sneak peak 1
    Design sneak peek 2
    Design sneak peek 2

    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”.

    Collaboration on design
    Collaboration on design achieves better results

    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.

    More articles

    Adapting to Shopify's New Checkout Extensibility: A Guide for Shopify Plus Merchants

    Wojciech Kałużny

    Should You Use Next.Js for Your Next Project?

    Tim Davidson

    SaaS Pricing: 6 Steps To Nail Your Pricing

    Tim Davidson