Get in touch with us today! Call us toll-free at 1.866.754.4111 or email us at [email protected] Close button
Web Design Kitchener Waterloo Guelph Cambridge AODA Development




Web Design Tips for Our Valued Partners

To help you create efficient artwork files that our developers can easily work with, we have created this useful information and guideline page.






We hope these instructions will aid you in preparing your artwork; perhaps you'll gain a little knowledge about designing for the web as well. Should you have any questions, feel free to contact us!




Photoshop CC icon


Preferred File Format:

Adobe Photoshop CC or lower (*.psd)


Creative Cloud icon


Other Acceptable File Formats:

Adobe Illustrator CC (*.ai or *.eps)
Adobe Fireworks CS6 (*.png)




Download Our Photoshop Template

This guided Photoshop file will help you get started on your project.

Download Template




File Preperation Specifications



Layout & Safe Area

  • All necessary text and images must be kept within a 'Safe Area': 1200 pixel area with 15-pixel padding on each side to ensure that the working web pages are optimized for the majority of screen resolutions.

  • REM builds websites using standard Bootstrap principals that is based on a 12-column grid, and asks that these rules are kept in mind when 3rd party designs are being sent to us for development.

  • REM staff will thoroughly test for responsive sizing and ensure the site scales properly for multiple screen sizes.

  • If you wish your design to be full width please specify detailed Instructions such as padding, breakpoints, other css requirements etc.

  • For more info please visit Bootstrap's documentation pages



Layers & Groups

  • Do not flatten/merge artwork.

  • Label and sequence layers and groups logically with descriptive names. For example company logo in the header and main navigation items would be in a group called “Header.” The company’s logo would be labeled “company-inc-logo.”

  • Avoid excessive, redundant and/or empty layers.

  • Do not use symbols (*&^:;#@$%!) 

  • Embed or rasterize Smart Objects and/or Cloud Library files (such as purchased stock photos or vectors) to avoid broken links.

  • The screenshot on the right is an organized and properly named Adobe Photoshop file.

Example of Naming and Organizing Groups and Layers




  • File resolution must be 96 dpi.
  • Avoid low quality images such as ones where pixelation can be seen at normal zoom.
  • RGB Colour Profile.
  • Stock photos must be purchased, high quality and without watermarks.
  • REM will optimize the images for the web.

"The images you create in programs like Photoshop and Illustrator look amazing but often the file sizes are very large.


Optimizing your images for the web means saving or compiling your images in a web friendly format depending on what the image contains."

Source: GTMetrix




  • Do not outline fonts.
  • Ensure that font-sizes are rounded up to whole numbers (e.g. 16 point instead of 15.9 point)
  • Include a “fonts” folder that has all the font files (OTF or TTF) used in the design (including fonts used in Smart Objects).
  • Fonts used must be either fully licensed or OFL (Open Font License). Feel free to use the OFL font resource that our designers use: FontSquirrel
  • Fonts must be convertible to web-fonts. For more information on web-fonts please go here.

"A desktop font is designed to be installed on your computer for use with applications such as Microsoft Word or Adobe Photoshop.


A webfont is a specially tuned font for use on websites using the CSS @font-face declaration. Webfonts have no OpenType features and often have extraneous glyphs removed."

Source: FontSpring



Additional Items

  • Please collect all files into a Compressed ZIP folder.
  • Supply RGB jpg proofs of all layouts.
  • Include any detailed notes about the artwork that we may need to be aware of.
  • Please add notes about any effects such as mouse-overs or drop-down styles that you would like us to create.