Guidelines for Designers in Preparing Designs for Web

We’ve been building websites now for about 15 years, and over that time have launched many sites; both those designed by our in-house creative team, as well as those designed by other designers and agencies.

We love working with design agencies, bringing your designs to life on the web.

We always strive towards a pixel perfect implementation of the design, so that the website as it appears online matches exactly your design files. Our designer always reviews work before it is released to the client, providing feedback and revision requests to our developers where necessary.

Some designs are easier to implement than others – easier translating into requiring less time and money – and we’ve put together the following list of recommendations for how to best prepare designs and send us materials.

This is an evolving set of guidelines, as trends and technologies change, we’ll update this list to take advantage of best practices.

Design/layout files:

when possible, provide designs as layered photoshop PSD files, naming all layers meaningfully
For best results, prepare a design for every page or page-type that will be required in the site
Ideally, in addition to the PSD files, also send PDF files
If you’re using smart objects, or any linked resources, remember to include those when sending the files
Set colours in RGB mode, and for specific colours for text, etc., please provide the HTML/hex colour – looks like: #C00000.
For mobile/responsive designs (resizing for phone and tablet), please provide designs for the pages at these sizes, or alternatively we will use standard breakpoints and have the site resize in a standard way.
Standard widths:
- Desktop: 1170px
- Tablets (landscape): 992px (desktop could be used for tablet landscape, however there may be issues with menu lengths, wide elements on the page, etc.)
- Tablets (portrait): 768px
- Phones: 768px
Standard height: There really isn’t one. Devices come in all sizes, long scrolling pages are the norm nowadays, and its not recommended to design to a specific height. If you are going to target heights, make sure you’re sizing your Photoshop files appropriately and let us know this so that we can take it into account.
Resolution: Maximum screen resolution is 96dpi/ppi on Windows and 72 dpi/ppi on Mac anything above this will work, though if images are to be blown up or printed higher is required. (if you’ve got some time and want to know more about this, have a gander at: https://en.wikipedia.org/wiki/Dots_per_inch#Computer_monitor_DPI_standards

Fonts:

Specify sizes in pixels
Stick to web safe fonts (those that most people will have on their computer), or for great variety use Google Fonts, which will work in all browsers https://www.google.com/fonts). If you’re not using fonts that everyone can access, some people will not see the site as you intend it to be seen.
https://www.typetester.org/ has a great site where you can view and compare websafe and google fonts.

Icons:

For icons (home buttons, social media, email icons, etc) we recommend using the Font Awesome library (https://fortawesome.github.io/Font-Awesome/icons/).
You can use graphics for icons, however the Font Awesome icons will load more quickly and scale very nicely

Images:

If we’ll be placing images, please provide them cropped as you’d like as web optimized png files (this may depend, we should discuss). We’ll often ask for the original source file as well, just in case we’ll need to make any adjustments.

General:

Provide a Branding and style guide indicating: Font family, font sizes, colours, font stylist ie: Title, subtitles, main content, links and buttons, ordered lists, unordered lists (bullets), alerts, accordions, etc., form fields, etc.

Content:

If you’ll be sending content as well, please send it in Word (or other electronic format) files, with each page clearly indicated, as well as the position on the page where the content is to go if it may be unclear (for example, if a page has 3 content areas at the bottom, please let us know which piece of content will go in which area)

Other considerations:

There’s no hover on mobile devices, so consider how you’d like dropdowns to work. This is usually solved with rotating arrows or pointers next to dropdown items that activate or deactive them.

Though these sites are a bit old, more good tips can be found at:

Ready to send your files?

We haven’t received a CD or DVD in years, nowadays we receive files most often by Dropbox (www.dropbox.com), WeSendIt www.wesendit.com, Transfer Big Files www.transferbigfiles.com, or anyone of a number of other cloud based sharing services.