SPECIFICATION GUIDELINES FOR CREATING BRANDED WIDGETSui2.awin.com/documents/merchants/...BrandedWidgets.pdf · The content has a fixed layout which is used as a template across all

SPECIFICATION GUIDELINES FOR CREATING BRANDED WIDGETS

Please Read before sending your artwork | Thankyou

2

Contents Introduction ……………………………………………………………………………………………………………………………… 3

What is a Content Widget? ....................................................................................... 3

Step 1 – Create Background Artwork ...................................................................... 4

How many widgets can you supply? .............................................................................. 4

Creating your background ........................................................................................ 4

120x222 CONTENT WIDGET .................................................................................... 5

120x582 CONTENT WIDGET .................................................................................... 5

444x90 CONTENT WIDGET ....................................................................................... 6

704x90 CONTENT WIDGET ...................................................................................... 6

250x232 CONTENT WIDGET ..................................................................................... 7

300x582 CONTENT WIDGET ..................................................................................... 7

720x282 CONTENT WIDGET ..................................................................................... 8

600x502 CONTENT WIDGET ..................................................................................... 8

400x382 CONTENT WIDGET .................................................................................... 9

What is Padding? .................................................................................................. 10

Step 2 – Customizing your Design ......................................................................... 12

Colours ................................................................................................................ 12

Font .................................................................................................................... 12

Image.................................................................................................................. 12

Links ................................................................................................................... 13

“Buy Now” Button ................................................................................................. 13

Creating your own button ....................................................................................... 13

Stock ‘Info’ and ‘more’ buttons ............................................................................... 13

Step 3 – Checking your Artwork & Supplying Artwork .......................................... 14

Supplying your Artwork ...................................................................................... 14

Where to send your artwork? ..................................................................................... 14

Specification Overview ...................................................................................... 15

Frequently asked questions ...................................................................................... 16

3

Introduction The aim of this document is to guide you through the process of creating and sending your Merchant Branded Widgets to be uploaded by your account manager.

The following steps will be covered: 1) Designing and creating your artwork to the correct size specification 2) Customizing your design 3) Specification Overview 4) Supplying Artwork 5) What to send to your account manager

What is a Content Widget? Content Widgets are a technology exclusive to Affiliate Window enabling affiliates to select products from the entire ShopWindow database (currently over 6 million+ products) and display them on websites or in emails in a widget.

Affiliates can create a simple Content Widget design, selecting the colour of the background, border, text, etc.

Alternatively they can use a ThemedWidget such as the ‘CD’s’, ‘electronics’ or ‘valentine’ designs (these ThemedWidgets are designed and maintained by Affiliate Window).

Better still, affiliates can use a BrandedWidget designed by you that contains only products from your datafeed. An affiliate can use the branded design template and populate it with products of their own choosing.

4

Step 1 – Create Background Artwork

How many widgets can you supply? You can supply one

default set of generic branded widgets and then any additional sets, as long as they are significantly different e.g., seasonal branding, sales etc.

Creating your background Currently, branded widgets can be created in a range of 9 different sizes. These sizes have been carefully selected to suit the majority of websites and page layouts, and include standard banner and blog sizes. When designing the background image for a specific widget size, it is very important to note that the actual background design space is actually slightly smaller than the final widget size - this is due to the "powered by digital window" signature within the content area of the widget.

For example

The table below lists the background sizes you should supply, and the final widget sizes.

Background Supplied size Final Widget Size

120x222 120x240 120x582 120x600 444x90 468x90 704x90 728x90

250x232 250x250

400x382 400x400 400x582 400x600 300x582 300x600 600x502 600x520 720x282 720x300

5

Create Background Artwork Size specification

120x222 CONTENT WIDGET


120X240 Layout Guide

120X600 Layout Guide

Example of supplied design


Finished Widget

Finished Widget

6

Create Background Artwork

Size specification for each widget



468x90 Layout Guide


Finished Widget

728x90 Layout Guide


Finished Widget


7




C

250x250 Layout Guide


Finished Widget


Finished Widget


8






Finished Widget



Finished Widget

9





Finished Widget

10


What is Padding? By including padding around the edge of your designs you can avoid the following errors.

Error #1 - The rounded corner of the Branded Widget clashes with the square edge of the Product Image Error #2 The Design border sits too closely to the product image Error #3 - The design border sits too closely to the ‘More’ button and the product title

Error #1

Error #3 Error #3

Error #2

11


1) Border Padding - In the case that your design may feature a border or design detail surrounding the content, if this is the case special attention should be paid to the dimensions given between the content space and widget edge/branding space. The content is made much clearer and visibly satisfying by allowing a few pixels of padding.

2) Branding Space - Each widget has an empty space which allows room for your branding. You may like to use this area to display your company identity, logo or any graphics that you feel will make your widgets unique and branded. Don't be afraid to use the rest of the design space too, but be aware of how it will look with the widget content on top.

3) Transparency - When designing a background with a rounded corner, or any design that does not have sharp or square edges, be sure to supply the file as a GIF or PNG with transparency. When supplying a GIF with alpha transparency, be aware that the matte colour will affect how the widget appears on different coloured backgrounds.

From left to right; no transparency, GIF with transparency, GIF with alpha transparency and white matte, PNG with alpha transparency.

To understand more about transparency and alpha transparency in GIFs and PNGS, please read this useful Wikipedia article here.

http://en.wikipedia.org/wiki/Transparency_%28graphic%29�

12

Step 2 – Customizing your Design You can customize your widget by implementing different styles and features and adding a button (or choosing a pre-designed button if necessary) to each widget. All the information below needs to be supplied to your account manager

Colours

• You will need to supply colours as 6 digit hexadecimal colour codes. These are 6 digit codes used to represent colours in HTML. Here are some example colours:

A colour specification will need to be supplied for each of the below-

• Product Title – Title text for each product • Description – Description text for each product (only in larger widgets) • Price – Price text for each product • Image Border – border colour around each product image

Font • A Font typeface and size needs to be specified for your widget see Specification

Overview The Font selection consists of three typefaces – Arial, Verdana or Times New Roman The size of font allowed is - Size – 9px, 10px or 11px

Image

You need to decide whether the image of the product within your widget is a link, and if it has a border. If it does need a border, you need to decide what colour that border will be. This needs to be supplied in a 6 digit hexadecimal colour code.

13

Customising your design

Links • You will need to decide whether links in your widget will open in the same window

or a new window; this will determine whether your site overwrites the website the widget is on, or opens up next to it in a new tab or window.

“Buy Now” Button • The "buy now" button you supply is used across all widget sizes, so only one needs to

be supplied. It is important to note that there is a limit to the size of the button.

Creating your own button To create your own button see the specification below. eg:

Stock ‘Info’ and ‘more’ buttons You can use a button design from our stock selection shown below. Simply indicate the button number you want to use when sending us your design details.

All stock buttons are 52 x 18 pixels.

For reference, the hexadecimal colours used are as follows:

1 Blue - #0000CE

2 Green - #009A00

3 Grey - #9C9A9C

4 Red – #CE0000

5 Orange - #FF9A00

14

Step 3 – Checking your Artwork & Supplying Artwork You must check that your background artwork and (button artwork if you have supplied it) are the correct size for uploading. They must be the exact dimensions in pixels as specified in the Size specification step within this document or

otherwise your account manager will be unable to upload your widgets.

Make sure that the file type is JPEG, GIF or PNG (transparency is allowed) and that your file is no bigger than 250kb. NOTE: A Branded Widget design can be replaced at any time, simply by supplying us with an updated design.

Supplying your Artwork Please refer to page 15 Specification Overview.

Where to send your artwork? Your final designs should be sent to your account manager to be uploaded (typically your designs will be made live within 24 hours).

15

Specification Overview Please check that you have supplied all information listed below to your account manager

for each specific widget.

Background Requirement

Make sure widget is correct size (Page 4) File type – JPEG, GIF or PNG (transparency is allowed) File size - no bigger than 250kb

Title Requirement

Colour – Please supply in hexadecimal code Image

Requirement Link – Yes / No Border – Yes / No Border colour – Please supply in hexadecimal code - (If required)

Price Requirement

Show Price – Yes / No Colour (if required) – Please supply in hexadecimal code

Button Requirement

Show Button – Yes / No Button style – please choose from stock buttons (page 13)

OR Button supplied by merchant

Requirement Size up to 52x18 pixels File type – JPEG, GIF or PNG (transparency is allowed)

Font Requirement

Typeface – Arial, Verdana or Times New Roman Size – 9px, 10px or 11px

Links Requirement

Target – Same window or new window

16

Frequently asked questions

Why can't I change the layout of the content?

The content has a fixed layout which is used as a template across all branded widgets for all merchants. Your job is to simply supply a design which fits around the layout, and combined with your specification of text colours and font, creates a unique looking widget. For this reason, it is great to create something interesting and with some design flare that will set your widgets apart from the competition!

For further information and help on designing and supplying your own Branded Widgets, please contact your account manager.

Documents

SPECIFICATION GUIDELINES FOR CREATING BRANDED WIDGETSui2.awin.com/documents/merchants/...BrandedWidgets.pdf · The content has a fixed layout which is used as a template across all