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.

Grid

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

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.

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.

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.

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.

Image background

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

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.

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.

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.

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.