6 mistakes to avoid when designing a website for development

Collaborating with a web developer can be a great way to offer web design services in your design business without knowing how to code yourself.

I’ve been teaming up with web designers for over seven years to help them turn their designs into fully-functional WordPress websites, and I have a portfolio full of amazing websites I have had the pleasure of bringing to life.

However, over the years I’ve noticed there are certain mistakes that designers make, particularly when they haven’t outsourced their web development before, which can end up causing project delays and resulting in additional costs for the designer or the client.

I want you to avoid making these mistakes to ensure that collaborating with a web developer is a simple and stress-free process that doesn’t leave you questioning why you decided to outsource your development in the first place!

So here are 6 mistakes you need to avoid making when designing a website for development by a web developer…

Not designing to scale

One of the most common mistakes I see designers make when designing a website for development is not designing to scale and getting the sizing all wrong.

Size really does matter in the world of web design and development, and getting the sizing wrong at the design phase could have major consequences.

I’ve had projects where I’ve had to re-write the styling for the entire website once the designer has seen the first draft because everything looked too big or too small, despite the sizing on the design and website matching perfectly. This results in additional costs and major delays to the project.

When you are designing a website, whether that be using a prototyping tool or a design tool, set the zoom to be 100% and see how the designs look. This is the scale at which the actual website will be built.

A good way to sense check your website designs is to look at what size font you are using for your body text. On the majority of websites, this is 16px to 18px in size. If it is smaller than this, your design might be too small and may result in a website that looks zoomed out. If it’s larger than this, your design might be too big and may result in a website that looks zoomed in.

Not providing designs in a developer-friendly format

Speaking of prototyping and design tools, another mistake I see designers making is not providing their designs in a developer-friendly format.

What I mean by developer-friendly format is providing designs that we as developers can extract information from. This includes information about colours (hexadecimal codes, specifically), fonts, text sizing, spacing and padding.

Developers want to be able to go into the design, extract this information, and use it to develop a website that accurately reflects the designs. If we cannot extract this information, we have to go back and forth with the designer to obtain this information, which is a very tedious and time-consuming process. It also increases the likelihood of making mistakes, and can lead to more revisions later in the project.

Most developers will prefer you to use a prototyping tool (like Adobe XD or Figma) to create your website designs as these tools make it incredibly easy to extract the information required. However, most of us are also happy to work with designs created using design tools like Adobe Photoshop or Illustrator.

If you provide your developer with website designs saved as image files or PDFs, be prepared for your developer to refuse to work with them!

Not providing designs for all of the required pages

It’s not uncommon for developers to receive website designs from designers with pages missing.

And do you know what? I get it! If you are working on a particularly large website with functionality like e-commerce, memberships or a blog, there can be a lot of pages to provide designs for, and it’s easy to lose track of what needs to be designed.

Frequently forgotten pages include 404 error pages, confirmation pages (i.e. pages that users are redirected to after submitting a form), search results pages, cart and checkout pages for shops, single blog post pages, blog archive pages, login pages and account pages.

Unfortunately, missing page designs can result in delays to the project, and this in turn can result in additional costs. Most developers do not like being dripped designs once the development has started, so it’s important that you have all the designs ready for the start of the project to avoid any issues.

A good developer will tell you which pages you need to provide designs for before you start designing. However, if you’re not sure which pages you need to provide designs for, please reach out to your developer for guidance.

Not having permission to use certain fonts

Before you send a website design over to a developer for development, check if the design uses any premium fonts that require a license, and if they do, please make sure your client is aware of the licensing situation!

We really want to avoid needing to swap out the fonts once the website is in development because it is not as straight forward as you might think. Fonts can vary in terms of size, letter spacing (kerning), and line height (leading), so changing the font can have a knock-on effect on the rest of the website design. If the font changes, the development may have to spend additional time making adjustment to the rest of the design to accommodate the new font.

I once worked on a website where the client wasn’t prepared to pay for a license for the font the design had used in their designs. The designer then had to choose new fonts for the website that were free to use, and I had to replace the fonts on the website. I had to spend many hours adjusting the styling of the website because the new fonts, which resulted in delays to the project and additional costs for the client.

Not providing designs for hover effects

Websites are not static; they are interactive. This means you have to consider how the website will look when users interact with it.

One thing I often find missing from website designs is hover effects. This means showing what links and buttons look like when the user hovers their cursor over them.

When hover effects are missing from the design, it results in more back and forth between the designer and developer to clarify what is required.

Prototyping tools make it easy for designer to show how basic hover effects, such as text, background or border colour changes, should look. And if you are designing using a more traditional design tool like Adobe Photoshop or Illustrator, you can showcase these effects using a separate artboard.

If you want a hover effect to be more than just a simple colour change and you want it to be animated in some way, I recommend providing some working examples of similar hover effects on other websites so the developer can really understand what you would like them to achieve.

Not providing mobile/responsive designs

We all know how important it is for the websites we create to work seamlessly and look amazing on a range of devices, including desktop computers, laptops, tablets, and mobile phones.

When it comes to designing a website for development, most developers will request that you provide designs for the mobile version of the website, as well as the desktop version. Although most experienced developers will know how to adapt a desktop design for smaller devices, we really do appreciate some guidance to make sure the sizing, layout and functionality works as you would expect it to.

If you don’t provide a mobile design and you aren’t happy with the mobile version of the website the developer creates for you, you might be charged for any changes you want to make to the mobile version of the website.

Some developers might not require mobile or responsive designs, or they might only require designs for certain pages on the website. Others will require designs for desktop, tablet and mobile. Every developer is different! Therefore, I recommend speaking to the developer you are collaborating with to find out what their policy is on mobile/responsive designs.

Are you ready to outsource your website development?

If you’re a web designer who loves creating beautiful websites but hates the coding side of things, I can help!

I specialise in turning designs into fully-functioning WordPress websites that not only look beautiful but that are also functional, strategic and fast.