We do a lot of work with designers and design agencies. And they often ask us how we can turn a banging bit of design into a fully functioning and beautiful website without compromising the designs. To be honest, it depends a little bit on the project but, broadly, we do two types of web development: bespoke and modified themes.
In this article we’ll explain the differences and give you a few tips for using them alongside a web development agency like ours to create websites that look AND work exactly as you intended.
Bespoke theme development
Chances are the project itself would have been under way for a little while by the time the design phase has been completed. During this time we’ll always be on hand to help out with any technical consultation. But in order to start the development phase, we would need to be provided with designs that are signed off by the designer and client.
Usually we receive the designs as Adobe XD or Photoshop files. To ensure the designs are recreated as faithfully as possible and we end up with a super awesome website, they should follow some standards:
Get a grid
Create a consistent grid system and follow it. Most often we work to the Bootstrap grid system but can adapt to any similar system so long as it’s consistent. The bootstrap grid takes a webpage that’s 1170px and divides it into twelve columns. Twelve columns works well because it’s possible to divide the page two-column, three-column and four-column layouts.
To help with this, you can download PSD files that have the columns already set up. Here’s a list on cssauthor.com. Adobe XD has columns built in (⇧ ⌘ ‘ on Mac, Shift + Ctrl + ‘ on Windows to show them)
Stick to the grid
Once we have the grid, all the elements of the page need to stick to it. This means that all elements need to align to the left, right, or centre of a column (or group of columns) and not spill outside the first and last columns. This helps hugely with making the site responsive and consistent. If the columns use padding at all that’s always fine, so long as it’s consistent.
Minimise changes between device sizes
We don’t always receive a dedicated set of designs for mobile and tablet – often we are just given the desktop designs and are tasked with making them work on all device sizes (or as we in the biz like to call them, breakpoints.) This is no problem so long as the designs stick to a grid.
However, if we do receive designs for multiple breakpoints it really helps if the content doesn’t change heavily from device to device. Hiding certain page elements as the device size gets smaller is often encouraged, but having a block of text that reads differently on different devices can make CMS integration much harder.
Modified theme development
Now onto the second major type of web development we do – modifying themes. When modifying an existing commercial theme for our CMS of choice we still might receive some design direction, though these tend to be in the form of brand guidelines or a style guide rather than fully fledged page designs. We’ve got a couple of handy hints here too, though these also apply to a bespoke project.
Keep typography consistent
Having a defined set of typography styles for all devices can really help ensure the design is consistent. For example, if our site had three breakpoints (mobile, tablet, and desktop) we would need to know the font size, line height, letter tracking, font face, and colour for every heading type on all three breakpoints. This helps with development as we can define one set of styles and reference them throughout the site, ensuring that everything is consistent. We also agree with the 16px-minimum for body text, too.
Keep colours consistent too
Similar to typography, it can really help to have one palette of colours to refer back to for the whole site. But hey, you’re a designer, so you’re probably the last person we need to preach to about brand consistency.
Send over font files, SVGs, and other assets
Though it’s often not essential right from the get-go of a project, it’s really useful to receive font files with the designs to ensure we’re using the correct versions of fonts.
SVGs are becoming more common across the web and are supported in all the browsers we develop for. Receiving icons as SVGs can really help too.
—
And that’s it. Hope this helps, but if you’d like more information on how best to design for web and keep pesky developers taking liberties with your designs, don’t hesitate to get in touch
