a portfolio website

Variable Ad Cards For Product Listing Template

Graphic Design, UI/UX, Web Development

This is one of the user stories I had the privilege of working on while on contract with Trek Bikes. The essential parts of the story were to create an ad card with a size matching the adjacent product cards. For content, Trek wanted a full-bleed background image, with a selection of styling options for the text content and and optional call to action button.

Trek Bikes - Card Ad - Centered header and description with CTA link.

Centered text in center position - Covers noisy area of image (not ideal).

Trek Bikes - Card Ad - Centered header and description with CTA link (video popup).

Centered text in center position - Alternate typography.

Trek Bikes - Card Ad - Centered (lower position) header and description without CTA.

Centered text in lower position - Covers noisy area of image (not ideal).

Trek Bikes - Card Ad - Centered (lower position) header and description without CTA.

Centered text in center position - Covers noisy area of image (not ideal).

Centered text in center position (alt. type treatment) - Covers noisy area of image (not ideal).

Centered text in center position - Works much better here (and a better image choice here).

Centered text in center position - Covers noisy area of image (not ideal).

Trek Bikes - Card Ad with less than ideal text positioning

Centered text in upper position - Covers noisy area of image (not ideal).

Centered text in lower position - Covers noisy area of image (not ideal).

Another revision. I'm fighting the default iOS button state here (blue button shown instead of unicode right arrow character).
↑Back to Top