When campaigns development is kicking off, we are often asked for mockup design guidelines for landing page and/or email templates. Since Boingnet campaigns are typically spanning direct mail, web and email, there can be confusion in the mockup design process. That confusion can lead to delays that nobody wants. Print oriented mockups typically use very different design guidelines than do digital mockups.
With a little bit of guidance, print oriented designers can easily design mockups that easily translate into HTML. Designers that follow this guide will find that the mockup and development process will proceed smoothly, efficiently and in a cost effective manner.
Download Mockup Design Guideline PDF
MOCKUP DESIGN GUIDELINES FOR BOINGNET PAGE AND EMAIL TEMPLATES
General Mockup Design Guidelines
- Adobe Illustrator or Photoshop mockup preferred
- Mockup should be prepared in pixels. Inches, points, etc are not suitable for web or email
- At a minimum a mobile and desktop mockup should be provided. Desktop mockups typically work on tablet.
- Color Palette – Provide layout color palette in Hex, RGB, or RGBA format only.
- Use character styles in Photoshop and AI for consistency
- Note any effects such as text shadow, drop shadow if not easily visible.
- Package Photoshop and AI projects to include all images and fonts used.
- Design for code not images
Landing Page Mockup Design Guidelines
- Use a grid layout/framework. We recommend the Bootstrap 3 framework. Bootstrap AI and PSD files are included
- Use web safe fonts or fonts available on https://fonts.google.com/. Provide a minimum of 2 additional fonts for fall back if the default font choice is not available on the users device.
- Full width background images should be prepared at a 16:9 ratio at the recommended width and height of 1920px x 1080px.
- Images should be compressed to keep the file size small for quicker loading on the web. Full width background images should be compressed to less than 500kb.
- Images with effects should be exported with the effect. i.e. transparent overlay colors
- Include a design for hover effects for elements such as buttons
- Define all form fields in mockup
- Indicate which form fields are to be prefilled with data from the contact list
- Indicate which form fields are required
- If a Thank You page will display upon form completion, then include a desktop and mobile mock up for this page as well.
Landing Page Additional Information
- Grid System Information: Bootstrap 3 http://getbootstrap.com/
- Google Fonts https://fonts.google.com/
Email Design Guidelines
- Maximum email width 600px
- Use web safe fonts only. Email clients provide little to no support for fonts available through https://fonts.google.com/. Provide a minimum of 2 additional fonts for fall back if the default font choice is not available on the users device.
- Maximum image width 600px
- JPEG file type provides the best support for all email clients, PNG and GIF do not render on all email clients.
Mockup Etiquette
- Name all of your layers. Be concise and descriptive.
- Group related layers together. For example, if you have a button you’ll probably have one layer for the background and one layer for the text. Put those in a group called “Button” (or similar).
- Group section of the site. You might have the entire header area in a group called “Header”, the entire footer in a group called “Footer”, and so on
- No half pixels. Pixels must be whole numbers. i.e. 14.5px is incorrect
- No opacity on text, unless a required effect
- Note any additional effects if not easily visible
- Clean up and delete unnecessary layers from mockup
- Spell check all content to ensure that it’s complete and accurate
Landing Page and Email Content Notes
- Define all form fields on landing pages, make sure data list includes mappings for these fields to be updated
- Define form fields that should be prefilled with data
- Define form fields that are required
- Include all urls/links if outside of Boingnet system
Downloads
- Download Boingnet landing page and email grid layouts at http://www.boingnet.com/wp-content/uploads/2017/05/Boingnet-Grid-Layouts.zip
Contact Our Support Forums for Help
We are perpetually seeking to evolve our product as well as our support process. If you didn't find your answer here take a moment to visit our support forums as well as submit your ideas on how we can bring Boingnet to the next level!
Support Forums