Creative & Account Management

Responsive

Follow Bootstrap Responsive Breakpoints:

Designs will be set on a 12 grid system with columns as discussed below.

Gutter width = 30px (15px on each side of a column)

  • Extra small ( <768px ) (Mobile)
    • Provide Creative for Mobile. Show the homepage design on Mobile and any unique subpages. Eg: if you have a subpage that has a filter within the page, you will want to show how the filter works on mobile.
    • Should be a 1 column layout
    • 12 column Grid
    • No container, gutter still remains for 15px on each side
    • Column width Auto
      • Example of Grid for this Layout. We set the mobile grid at 640px… There is no container for devices under 768. The grid will re-size based on the device size. We used 640px because we thought it was a good mobile example.
    • Show your mobile menu expanded(if applicable)
  • Small devices  (≥768px) (Mobile/Tablet)
    • Note: Creative should be based on a Mobile layout. Note* we will not need Mobile creative for this break point if there is one provided for the <768 Extra Small breakpoint(above^). The dev team will use the same creative that you provide in the <768px break point for this break point(Small).
    • Should be a 1 column layout (same as Extra small above)
    • Column width 62px
    • Container width 750px
  • Medium devices Desktops (≥992px)
    • Note: Creative should be based on the Large Device Desktop layout(below). Note* The dev team will not need creative for the Medium device break point if there is one provided for the  >1200px breakpoint(below). The dev team will use the same layout that you provide in the 1200px break point for this break point.
    • Should follow a 12 column layout
    • Column width 81px
    • Container width 970px
  • Large devices Desktops (≥1200px)
    • Provide creative for Desktop
    • Should follow a 12 column layout
    • Column width 97px
    • Container width 1170px
    • Show your drop down menu expanded (if applicable).

Creatives

.PSDs & Jpegs

  • Provide a .PSD and .Jpeg for each design that needs to be developed.
  • Include a document that communicates the functionality that you wish to accomplish on the front-end and back-end for each design.
  • Show hovers
  • Show drop downs for mobile & desktop
  • Show the designs with and without the grid.

Limit the number of designs that you submit for development. IE: if you have three sub page designs that carry similar design elements, try to combine them into one design. The development team would rather build one template that works for multiple sub page design layouts.

Style guide or label elements on creative

Provide a style guide for the site, or label the elements in your designs.

Fonts – Include font name, style, weight(if applicable), size.

Colors – Hexadecimal values.

Buttons

Hovers

Menus & pages

Please provide a list of the menus and pages that you wish for the development team to build. Identify what template you wish for each page to carry. EG: if you have 20 subpages, please let us know which subpage template you would like applied to each subpage.

Images & icons

Images – Create an image folder that has the images used in the design without their text overlay(unless the text overlay is part of the image and NOT driven by the backend of the website). All images used in the design should be supplied in a folder. If an image has text that will be driven dynamically from the backend of the website, do not include the text overlay in the images folder. The text overlay should be included in the design file.

Icons – All icons used in the design should be supplied in a folder. .PNG preferred.

Folder structure

  • Client Name (Folder)
    • Style Guide.PDF
    • Development Brief.doc
    • Designs (Folder)
      • Home Page (Folder)
        • Images & Icons (Folder)
        • Homepage Desktop.PSD
        • Homepage Desktop.JPEG
        • Homepage Desktop_Grid.JPEG
        • Homepage Mobile.PSD
        • Homepage Mobile.JPEG
      • General Subpage (Folder)
        • Images & Icons (Folder)
        • General Subpage.PSD
        • General Subpage.JPEG
        • General Subpage_Grid.JPEG
      • Other Page (Folder)
      • Other Page (Folder)

Copy

Please supply a list of the pages and copy that you would like for the development team to integrate. A google doc is preferred for copy.