Design 101

Design 101

Web Specs

The following identifies and describes the specs required for web-based marketing assets. It also provides an example of what specs should look like when input into a Monday.com.

Asset Type

Indicates the kind of marketing asset requested.

For example: On-site Display, Off-site Display, PDP Tiles, A+ Banners and more.

Device Type

Indicates the device type each asset will be viewed on.

For example: Desktop, Tablet or Mobile

Delivery Format

Indicates what the final delivery format is for each assets.

For example: JPEG, PNG, GIF, PSD, PDF...

Dimension

Indicates the pixel width and height dimension for each asset.

For example: 300x250px, 3000x600px

Max File Size

Indicates what the final deliverables maximum file size should. This number is set by the eRetailer. It's measured in kilobyte (KBs), megabytes (MBs) or gigabytes (GBs)

Aspect Ratio

Indicates the relationship between the width and height of an asset.

For example: 16:9, 1:1, 4:3.
This info can be supplemental to the dimension, but should not be provided without a maximum or minimum pixel width or height

Sample specs from a Monday.com breif

Instacart Brand Store Assets

3200x400 Header Image Desktop 2.5MB Max
3200x800 Header Image Mobile 2.5MB Max
2048x512 In-Page Banner Desktop 2.5MB Max
1600x500 Shoppable Banner Desktop & Mobile 2.5MB Max
780x624 In-Page Banner Mobile 2.5MB Max

Final Delivery Format
JPEGs

Glossary - Web Specs

  • A .jpg is a file format used for saving flat (rasterized images). ​It is commonly used for digital photographs and graphics created by image-editing software. ​JPEGs features lossy compression which significantly reduce the size of an image without much degradation.

  • A .png is a file format used for saving flat (rasterized images) and is ideal for saving images that require transparent backgrounds.​ It has a lossless compression format and tend to have higher file sizes than JPEGs.

  • A .gif is a lossless file format that supports both animated and static images.​ It is ideal for creating low file size, limited color, static images or simple short form aninations.

  • A .psd image file format is native to Adobe's Photoshop application.​ It's an image editing friendly format that supports multiple image layers and various imaging options. ​PSD files are commonly used in the creation of high-quality rasterized/bitmap graphics.

  • The width and height of an image/asset measured in pixels. ​
    Shown as: [width] X [height] or 300px X 250px

  • It's the relationship between the width and the height of an image. Shown as: [width]:[height]​ Commonly used aspect ratios are 16:9, 1:1, 4:3, 3:2​

    ​Providing an aspect ratio alone is not enough.
    A maximum or minimum pixel width or length is also needed.

  • File size/weight is the space a file/asset takes up in a storage medium like computers, external hard drives or cloud servers. ​

    File size is measured in bytes (B), kilobytes (KB), megabytes (MB), gigabytes (GB), terabytes (TB), and more.​

    ​Providing Retailer's speced max file size will ensure assets are accepted, page load times are reduced and assets will be seen by users.

  • Device type indicates the kind of display web content is viewed on. ​This includes desktop, tablet, mobile, TV screens, and more.

  • RGB refers to the three hues of light (Red, Blue, and Green) that create different colors when mixed. ​Combining red, green, and blue light is the standard method of producing color images on screens like TVs, computer monitors, and smartphones

  • PPI is the number of pixels contained within each inch of a digital image. ​

    72 pixels per inch is the standard for online use, allowing for a smooth loading time and a good quality visual.

  • Standard screen resolution is 72 pixels per inch. When designers create visual assets for these screens, they create at 1x size. ​

    For example, if a laptop screen is 1200 px wide, a full-width graphic will be 1200 px wide.​

    Tablets, smartphones phones and some monitors have increased PPIs, packing more pixels into every square inch. ​

    These devices scale images down 2 or 3 times smaller than standard resolution screens do in order to achieve their optimal image resolution. ​

    As web designers work at standard resolution (72 ppi), 2x and 3x images are created by increasing a graphic's dimension 2 to 3 times its original/standard 1x dimension. For example, while phone screen dimension may only be 320 pixels wide, its screen resolution (pixels per inch) maybe be 2 or 3 times more and therefore requires full-width graphics that are 640 px (2x) or 960 px (3x) wide, to render sharp and nonPixelated. ​

    As a 2x or 3x device automatically scale these larger graphics down, PPI increases to the required amount.