Partner Design Tips

Web Design Tips for Our Valued Partners

 

divider

 

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 iconPreferred File Format:

Adobe Photoshop CC or lower (*.psd)

Creative Cloud iconOther 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 our PSD Template here

 


 

File Preperation Specifications

 

Layout & Safe Area

  • All necessary text and images must be kept within the Safe Area: 1000 pixel area with 5-pixel padding on each side to ensure that the working web pages are viewable to the average, lowest screen resolution (1024x768).

  • Backgrounds can be created wider or seamlessly repeating so that the layout will seem full-width or “scalable” at any screen resolution.

  • REM staff will select an appropriate colour scheme for the mobile template framework based on the desktop theme.

  • The example on the right is one of REM's clients: Matbridge Investments. This design follows the Safe Area criteria.

 

Layout Example with Guides

Click here to view larger image

 

 


 

Example of Naming and Organizing Groups and Layers

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.

 

 

 


 

"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

 

Images

  • File resolution must be 72 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.

 

 


 

"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

Fonts

  • 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.

 


 

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.

 

 
Home Our Work Our Team Our Services WebWiz@rd™ Support Contact Us  

OUR ADDRESS

72 St Leger Street, Unit 2

Kitchener, ON, N2H 6R4

P: 519 884 4111 | TF: 1 866 754 4111 sales@remwebsolutions.com

 

Footer bullet Client Centre Login

 

Accessibility & Compliance Privacy Policy
 
 
© Copyright 2017 REM Web Solutions. All Rights Reserved.
Web Design and Content Management by REM Web Solutions.
 
FaceBook Twitter Linked In YouTube Google Plus our blog