Skip to main contenteBay Playbook

Layout in marketing

eBay's grid system offers flexibility and modularity, empowering designers to craft versatile layouts suitable for a range of applications and contexts.

Considerations

Structure

Structure orchestrates visual elements to create a cohesive and engaging layout, guiding the viewer's eye while reinforcing brand identity and emphasizing focal points.

Hierarchy

Hierarchy establishes the relative importance of visual elements, guiding the viewer through variations in size, color, and placement.

Composition

Composition arranges visual elements within a framework to create a harmonious and impactful arrangement that effectively communicates the intended message or aesthetic.

Margins

The margin’s size is 5% of the shortest dimension of the format.

Two rectangular layouts. The left side is in portrait orientation and the right is in landscape. The right example has a red spec line highlighting the height of the shortest side. A margin of 5% is marked around the edges of both layouts.

Grid

We use grids for constructing and defining layout structure, establishing hierarchy, achieving visual balance, and grouping information effectively.

A variety of graphic, simple layout diagrams detailing a variety of grids.

Logo placement

In most cases the logo x-height is the same as the margin layout. When handling wide or narrow formats, use your best judgment to ensure that the logo look optically correct.

A zoomed-in view of the bottom left corner of a layout. The logo x-height is marked with lines with a “5%” marker next to it and the margin is the same 5% size.
A variety of layout sizes all with the eBay logo in the bottom left following the 5% x-height rule with the 5% margin.

Hierarchy

Clear hierarchy is important to any layout as it brings balance to a composition and ensures that information is easily understood by users. Consider the various elements within a composition and how they work together to create meaningful hierarchy.

Advertisement for the eBay mobile app. The left side features bold black text reading 'All runways lead here.' followed by 'The perfect place to find the perfect look.' Below the text is the eBay logo and the tagline 'Things.People.Love.' The right side shows a group of four people against a green backdrop dressed in different styles of clothing.
A stacked image layout including 3 images moving diagonally from bottom left to rop right. The first image is cushion cut solitaire ring with a double pave halo. The second image is a woman in a black dress wearing a necklace. The third image is a pave clover pendant necklace on a red background. The eBay logo is in the bottom right corner of the layout.
A full-bleed layout including an image of a man with a gray beard wearing a black baseball cap, gray hooded jacket, and tan pants sits in a chair against a backdrop of a potted plant and wooden floor. A large headline reads "Timeless Streetwear fits" in the bottom left, smaller "Streetwear style” in the upper left and “2024” in the upper right.
Three layouts in a row. The first layout has a vibrant orange background with dark brown text on top. Towards the top in large text is “Top Rated 5.0” followed by smaller text “Fit for a queen Streetwear”. A orange-haired man is wearing vibrant sunglasses towards the bottom. The second layout is a sample image stack moving from bottom left to upper right. The third layout has a vibrant orange background with “Download our app and find your passion” in the top. The eBay logo and “Things.People.Love.” is toward the bottom all in dark brown.

Composition

Each element in Evo is designed to work together to meet any communication need. Composition principles determine how each piece can sit alongside one another to meet these needs.

A vertical white layout with a headline “You might say we have a passion for purses.” A stack of 3 images move from bottom left to upper right. The first image is a of a small black leather clutch with a gold chain. The second image is a portrait of a woman against a yellow curtain. The third image is of a hand holding a tan and black The eBay logo is in the bottom purse. “Things.People.Love.” is in the bottom right.
A vertical white layout with a headline of “We have things people love.” A vibrant yellow image sits in the middle of a chair with a white jersey and yellow hat. The eBay logo is in the bottom left and “Things.People.Love.” is in the bottom right.

On-site banners

Banners drive traffic to curations, promotions, events, and programs. We have a variety of options that are expressive, personalized, and relevant. To learn more, visit the banner component page.

Banner with a full-bleed photo background and white text centered vertically on top. The photo is of a young man and woman business owners standing in front of jackets hanging on a rack and a stack of boxes covered in masking tape.

Image background

Image background banners have a single action button and a full-bleed image that extends edge to edge as the background.

Banner with a solid blue background and dark blue text centered vertically on the left. A masked photo of a dark blue purse with a transparent background sits on top of the blue background on the right.

Color background

Color background banners have a single action button and a single color background chosen based on a theme. Our color themes have pre-defined background and foreground colors for the text and button. You can find all of our brand-approved color combinations on our Using color page.

A light gray banner with black text centered vertically on the left and an image of 4 happy Gen Z-ers inset with rounded corners on the right.

Inset image

Inset banners also have a single action button and images used in this banner type utilize lifestyle or studio PNG’s. The only available color for this template is our lightest gray background (N200) with black text.

A bright green banner with dark green text centered vertically on the left and 3 images sitting side by side horizontally on the right. Each image has a short string of text underneath it. The first says “earbuds” with a photo of earbuds. The second says, “over ear” with a photo of over ear headphones. The third says “wired” with a photo of wired over ear earbuds.

Multi-destination

Multi-destination banners promote sales or events that link to multiple different destinations. Destinations should feature specific categories, brands, or price points and utilize a PNG with transparent background to represent it.

A shorter banner that is wide and skinny with bright orange background and dark orange text on the left. A dark orange button sits on the right with the same background color as the button text. There is no image on this banner.

Loyalty

Loyalty banners promote sales or events that link to a single destination. They are used on dense, performance-focused shopping pages where height is a concern or there is no relevant image associated with the content.

Resources