Graphics Checklist

Multiple graphics are essential and highly recommended to create a personalised branded portal.

Although it is recommended to have graphic design and front end web development skills for the best design of the Duel platform, front end web development skills are not essential.

Webpage Creation 

β˜‘οΈ Programme Landing Page 

We suggest creating a static webpage on your e-commerce platform that provides an explanation of the programme. This webpage will serve as a landing page where visitors can find information about the application requirements, potential perks and rewards, and links to the signup and login pages.

πŸ“  It's important to make this page visible and searchable on your website to effectively promote the programme

See more info & examples here

β˜‘οΈ Duel Hosted: Programme Overview Page (optional) 

Duel can also host a simplified version of this page that sits internally within our portal. This page serves as an easily accessible visual of perks & rewards. This page needs to be in HTML/CSS format and should have any links/CTAs removed. 

Icons & Elements 

β˜‘οΈ Icons: 

Brands will have to produce the following icons, PNGs are recommended unless otherwise stated. 

  1. Programme Logo: This can either me a custom programme logo or simply the brands logo - 400px by 400px 
  2. Favicon: One icon 180px by 180px & One icon 32px by 32px
  3. Tier Icons: These icons should be designed to represent the tier names that have been confirmed by your team - 400px by 400px circle cropped
  4. Default Profile Image - 400px by 400px circle cropped

β˜‘οΈ Background Imagery & Banners:  

Graphics can be used on the program overview page and on the signup/login pages. 

  1. Portal Banner Image - 1650px by 150px
    1. Banners should be designed to work on both desktop and mobile (helps to have repeating graphics with a central graphic) 
  2. Signup/login page background - This can either be a graphic, solid hex colour or gradient
    1. If you choose to use a graphic we suggest designing it while considering different device sizes i.e mobile. 1920px by 1080px graphics that can be repeated tend to work better. 

β˜‘οΈ Task Branding: 

Tasks can be further branded with custom icons and banners. We'd recommend icons at a minimum to make it easier for advocates to navigate the task list.

  1. Task Icons - At least 150px by 150px transparent PNGs
  2. Task Banners - 1452px width, 200px height

Portal Branding

 πŸ“ Knowledge of CSS is helpful for some of these advanced customisations.

The portal is branded through the styling page in the Duel dashboard. There are a range of inbuilt elements that can be edited however some knowledge of CSS can be helpful for more advanced styling requirements. 

Key Elements: 

See full breakdown of portal branding options and guidance here

System Email Branding

πŸ“ Knowledge of HTML/CSS can be helpful for these advanced customisations.

System emails are triggered by account based actions, These emails can be designed from scratch, using a 3rd party tool or simply by editing the default HTML.

System Emails Customisation

CRM Email Graphics

If you plan to use CRM Flows for your programme launch, you will need to schedule the design of these flows as well.

Promotion Graphics

Depending on recruitment methods being used for your programme it’s worth scheduling in graphics required for these. Some graphics could include but not be limited to: 

  • Launch Email Sequences 
  • Organic & Paid social (all formats)
  • Email & Website banners/CTAs