Preparing To Work With A Web Designer
‘Tis the season to redesign your website.
Quite often when I’m about to start working with a web design client, they say “I’m really nervous” and it always takes me a little bit by surprise.
As creative business owners, we assume people know that OF COURSE we have a process that we follow every time and that’s how we get consistent results. 
I think with any kind of visual design it can feel like you’re taking a punt on whether or not your designer ‘gets your vibe’.
Luckily with web design, the fundamental building blocks of every project are the same, which means there are definitely things you can prepare to give us a greater chance of success together.
Prepare A Mood Board
Time to legitimately spend a load of time on Pinterest. Put together a mood board, covering fundamentals like colour, shape, pattern, fonts, sample images and layout ideas.
Every designer will have their own mood board process, and they might ask you to categorise it in a certain way, but you having a clear overall vision helps us connect with you. If you would like some more detailed guidance, check out this blog post from our good friends over at The Design Space.
Create a Brand Guide
If you have an existing brand (or logos, colours and fonts), your designer will love you if you compile a brand guide showing how you use your brand elements. Include your fonts and how they work together and your colour references. If you have them, make sure you supply your logo files in vector format (that’s EPS or Adobe Illustrator files).
Want to swipe our Canva Brand Guide template? Take a copy right here.
Prepare Your Copy
Make sure your copy and content is ready to go. Don’t wing it. I know it’s tempting to say ‘Let’s just use what I’ve got already and I’ll improve it a bit as we go along’. But the reality is that your designer is looking to create the absolute best layout they can for you and they can only do that if they know exactly what they are dealing with.
If you are working with a theme or layouts from StyleCloud, they are incredibly easy to customise by adding sections from the cloud but do plan ahead so that you know roughly what is going to where and if you have any new copy to add into the mix.
Designing around placeholder text and then having to shoehorn in the actual copy later on is frustrating for everyone. Creating a design around the copy you have is going to get you a much better result.
Plan Your Navigation
If you are thinking of making any changes, use a mind mapping tool or just a pen and paper to plan out your navigation. Make sure that any key home page calls-to-action are represented in your menu. In particular, think about returning visitors who are ready to make a final decision and book. Can they easily find your portfolio and contact details?
Prepare a Wireframe of your Home Page
This might be controversial because many designers prefer to create a ‘wireframe’ or rough sketch of your home page themselves. I am not one of them and I love it when clients do this. It helps me get a sense of what is truly important to them. Even making a rough sketch with pen and paper first will help your home page flow. More importantly, it will help you work out whether you need to add or take away sections from the home page template you are working with.
Nearly all of our StyleCloud layouts follow the same formula, so if you’re looking for the key sections you need to include, here are our recommendations.
- Hero image with strapline or postioning statement above the fold (ie. what you can see when the site loads without scrolling)
- Introduce yourself and your business
- Signpost your portfolio
- Summarise your process / USP
- Showcase a testimonial
- Latest posts
- Email optin for a lead magnet
- Footer
Plan Your Visitor Journey
Think of your home page as the ‘movie trailer’ of the rest of your site. It’s only job is to get one more click. Make sure each section has an obvious purpose and a clear call to action. But don’t just stop there. I like to do an exercise called the ‘perfect client journey’. This is where you map out the path your ideal client would need to take to compel them to make an enquiry.
Make a list of the pages you would like them to visit, in what order, to achieve that conversion. Ask yourself what they would need to read or see on each page and what the call to action should be. The journey should be clear and compelling.
Prepare Your Images
Your designer will love you if you have 12-15 sample images in various orientations ready to go. You’ll need some images to lay text over, some to act as backgrounds and some to showcase your work. Choose a mix of light and dark, colour and black and white to give your designer as much choice as possible.
As a designer, I actually then use only those images during a build as placeholders. I then take my client on a tour of the site , explaining why I choose each image and why they work in that specific location, giving them the confidence to make the final image selection. Even better, make sure you get some professional headshots done and include them in the sample images. 
I’ve written extensively about choosing images in this blog post.
And finally, we really really love it when you properly compress your images for web. As a general rule of thumb, here are the image sizes to use for best results.
Image Sizes
- 1920px wide: any image that will be full width
- 1280px wide: any image you will be using in a standard page or post. That is the standard Kadence page width, so if you have changed that general site size, then you can adjust your image size to match
Image Compression Tools:
There are many ways to compress your images. If you are a photographer, you can control the size of your images as you export from Adobe Lightroom or Photoshop, but it also doesn’t hurt to add an extra compression step to your workflow to reduce file size. As a general rule, you are aiming to get your images below 300kb in file size.
Here are my favourite image compression tools:
JPeg Mini (paid)
The photographers’ favourite. JPeg Mini is a simple app which you install of your computer. It gives you a button to drag folder of images onto which then resizes them in their current folder. It’s an easy, unfussy solution with no uploading and downloading.
Short Pixel (free and paid)
ShortPixel is both an online service and a plugin. You can compress up to 50 images for free (tip – always choose the glossy setting to preserve image quality) but I usually install the ShortPixel plugin too to make further reductions when uploading images into a site. You buy credits to use and you can go back and compress your whole media library.
You can also use it to convert your jpegs to the webp format, which many people think gives better compression and speed results.
Bulk Resize Photos (free)
One of my favourite free online browser-based tools. You can drag a whole folder of images onto this site and output them by file size or image size.
That wraps up my guide to making life easy for your web designer. With good preparation and an understanding of what you are going to be asked and why, you’ll be setting yourself up for a much better result.
Don’t forget, if you need a hand, there are two recommended ways to get help with your StyleCloud website.
If you need a some help getting set up, some personal training or a WordPress expert to swoop in at the end and tidy things up, you can book a VIP session with one of the StyleCloud team right here.
If you need to hire a designer to build your whole site, then we partnered with the team at Evosites who specialise in rebuilding and improving your existing site with Kadence and StyleCloud.
