One of the goals of the Xbox.com homepage redesign was to emphasize the imagery that would draw users into a more immersive experience. Edge-to-edge hero images that expanded with the browser width were employed to achieve this. In addition to exploring numerous layouts for this page, I worked to optimize the variable height of the hero image in order to balance the goals of focusing the user on the hero while peeking at the additional content below. Several combinations of the smaller 16:9 capsules were designed in order to give marketing teams maximum flexibility in the number of items they could promote.
For mobile browsers, a square hero image was used to preserve the emphasis of the hero in a single-column, tall layout.
Designshoop 