BYOD Submission Requirements

 

Here at Monk Development, builders of Ekklesia 360, we invite creativity and celebrate fresh designs from all avenues. We also strive for efficiency and seek to deliver an end result of a caliber that our clients deserve. In order to accomplish both, the below design submission requirements have been put together for all Bring Your Own Designer (BYOD) projects.

Please read the following and acknowledge agreement of requirements. Final designs need to be submitted as follows: 

Before You Begin 

1. Download these files

BYOD Templates

Included in this zip file are Photoshop templates set up on a Bootstrap 4 grid for Desktop and Mobile as well as some example files so you can see how all this looks in practice.

2. Familiarize yourself with the Ekklesia 360 CMS. 

Before starting any part of your page designs, make sure you know what module within Ekklesia 360 you are designing for. Understanding what content can appear on a page will help inform your designs greatly!

Example

Making a calendar list? That will use the Events module.
Creating a Resources page? That could be Articles or Sermons.

New to Ekklesia 360?

Check out our Developer Documentation to learn about each module. You can also get a demo site set up, so you can easily get a feel for what each module in Ekklesia 360 has to offer.

Happy Designing!

 

Submission Requirements

Design File Requirements
Each Custom Template Design Requires

  1. Layered Photoshop (.psd) files (Refer to the byod_example_home_2018.psd file from the downloaded zip file.)

    1. Label each file as “church-name_template-name.psd”
    2. Name all Layers and Folders within the file.
    3. Delete all unnecessary Layers and Folders.
    4. Include Photoshop Layer Comps showing hover states, menus and other functionality. Using Layer Comps
    5. Include Photoshop Notes with details for all elements and all functionality requirements such as: rotator transitions, hover states, pagination, social media feeds and links. Using Notes
  2. .jpg files for all Layer Comps
    1. file labeled as “church-name_template-name_#.jpg” 
  3. Mobile breakpoint (Refer to the byod_example_home-mobile_2018.psd file from the downloaded zip file.)
    1. If your site is responsive, you also must include mobile versions of #1 (Layered Photoshop (.psd) file) and #2 (.jpg files for all Layer Comps) for each custom template design.
    2. Create your mobile files with the bootstrap-v4-grid-sm-compatible.psd template. To make sure your designs look great on retina display, watch the video.
General Design Guidelines
  1. Minimum resolution: 72dpi
  2. Use a consistent template width and grid structure.
    1. Create your desktop files on the bootstrap-v4-grid-xl-compatible.psd template.
    2. Please include Photoshop Notes with any discrepancies in the grid standardized on the Home and Subpage/Style guide.
Subpage/Style Guide Requirements
  1. Use this downloaded Subpage/Style Guide as a reference: byod_example_sub_2018.psd
  2. Typography
    1. H1-H6 heading styles. Please include standard, link and hover states. (H1 is typically the Page Title).
    2. Paragraph. Please include regular, bold, italic, bold & italic, link and hover. (We recommend not going below 12 pt font)
    3. Blockquote
    4. Page description
    5. Unordered and ordered list
    6. Include Photoshop Notes to identify all fonts with Name/Weight/Font Size/Line Height/Color (ex: Cambria / Regular / 14 / 24 / #179522). You can use the “Copy CSS” tool within Photoshop. Using Copy CSS
  3. Basic Elements to Include
    1. 4 Levels of Navigation
    2. Column styles
    3. 6 button styles (with hover states) - Note: there will be multiple 4 sizes for each style (xs, s, m, l)
      1. The button names are: Default, Primary, Success, Info, Warning, and Danger. These are somewhat arbitrary names and you can use any button throughout the site designs.
      2. The default button is Primary, Medium.
    4. Form Styles 
    5. Tabs
    6. Accordions
    7. Sidebar: This should include sub-navigation and some sections/monklets. If this is not included, reasoning should be noted. 
  4. Other Elements Suggested
    1. Sections/Monklets: Sidebar and/or full width. Typically a section for sermons, blogs, events, and articles. Example
    2. Line break
    3. Call to Action 
    4. Sharing icons
    5. Embedded video
    6. Linked Image
    7. Pagination: This is used on many of the e360 Layouts
    8. Back button: This is used on many of the e360 Layouts
    9. Dark Style Guide: Each item from the Style Guide list needs to be evaluated and anything needing restyling for a dark background should be mocked up with annotation. 
Other Packaged Files
  1. Logos
    1. A .zip file of all logos used within the designs. We recommend providing .svg files or .ai files.
  2. Fonts
    1. https://typekit.com
    2. http://www.google.com/webfonts
    1. A .zip file of all fonts must be provided with designs. You must use a web-safe font, or own the web license to all fonts used within your design.
    2. You can also choose Web fonts from the following sites:
    3. It is the responsibility of the client to check all custom fonts to see differences in performance based on browser and operating system. Please note that Monk Development will implement fonts based on item “Subpage/Style Guide Requirements: 2.4” above; we do not approximate based on how the psd renders.
  3. Icons
    1. A .zip file of all icons used within the designs.
    2. If you want access to an icon font from within the WYSIWYG editor, please include all .svg files, and/ or the icon font as well as license.
Further Review

Monk Development has the right to refuse or ask for revisions to final designs based on the above criteria. Please contact us for more information. If you have any questions or comments concerning the above requirements, please do not hesitate to ask.