IVT Web Design Specifications

We normally stick to our preferred partners, however you may want to BYO designer. This is a guide for those designers!

Process

We have found this approach to be quite efficient. Here's a quick summary:

1. A comprehensive design briefing takes place attended by delegates from all parties
2. The designer prepares two initial homepage concepts
   ASI must approve these before the client sees them to ensure they are suitable for our platform
3. Following client feedback/revision a final homepage design is approved (see Approval below)
   and in many cases signed off (see Sign Off below) so we can make a start on the build
4. The designer then prepares the inner page designs (see What to Include below)
   Again, ASI must approve before the client sees them!
5. Following client feedback/revision the complete final design is approved and signed off by the client
6. Designer then provides final PSD or Sketch documents to ASI (see Handover below)

What to include in the design

• A homepage design typically features the following elements:
  • Header with logo, menu(s) incl drop menu, search, etc.
  • Banner area
  • Login button/form (when not logged in)
  • Member Centre link & logout button (when logged in)
  • Latest News list
  • Upcoming Events list
  • Footer with Copyright note, site info menu, AO logo
• An inner page which includes the following elements:
  • Headings H1 – H6
  • Text formatting including paragraphs, bullet points & blockquote
  • Form elements including buttons
  • Tables
  • Inner nav menu (3 Categories Deep)
• List page which could include the following elements:
  • Titles
  • Short Descriptions
  • Images
• Member Centre landing page which could include the following elements:
  • My Account Area
  • Member Links
  • Member Events
  • Member News
• Event detail page which could include the following elements:
  • Title
  • Date
  • Time
  • Location
  • Price
  • Description
  • Image
• eMarketing Header & Footer

• Notification email Header & Footer

Note: web fonts can't be used in emails! Actually, a lot of things aren't possible in emails... Background images for example. Here's a guide that we often refer to.

Fonts

If you must use non-standard fonts please use Google Web Fonts. Why?

Approval

Please show us the previews before handing them to the client, so we can ensure that the design is suitable for our platform and nothing is impossible or unnecessary.

Sign off

A written sign off from the client is required for each design provided. This should be provided to the designer directly, and passed on to IVT with the final designs.

Hand Over

Schedule a hand-over meeting and take the time to go over the file(s) with the developer to ensure that they have a firm understanding of how the end product is supposed to not only look, but behave in terms of user interaction. In the end, both designers and developers will save valuable time.

Delivery

Design must be supplied as a layered Photoshop PSD or Sketch File.

1. Name all layers appropriately
2. Use layer groups which correspond with their position in the design
3. Nested groups can also indicate to the developer how elements could be arranged structurally within the HTML
4. Include a colour palette
5. Include all link states a:link, a:hover, a:active
6. Include all navigation, dropdown and button states
7. Preview formats in JPG or PDF

Layer Groups Example

• Palette
• Header
  • Logo
  • Navigation
  • Account/Search
• Content
  • Sidebar
  • Main Bar
• Footer
• Background