Little Ember Coffee

Layout pattern comparison

The same brief, palette and sections in three different layouts. Open each one and compare how it reads on desktop and on your phone.

• Pattern AZigzag blocksAn oversized headline with the photo offset lower on the right, then full-width color bands whose content alternates left, right, left.View pattern
• Pattern BLeft axisA sticky index column on the left and the details on the right, with beans as rows and plans as one comparison table.View pattern
• Pattern CBottom-upQuiet copy on top and a wide photo that runs past the fold; every section puts its heaviest element, a price or a photo, at the bottom.View pattern

This is a demo site built with the create-multi-mockup skill. Little Ember is a fictional business and the copy, prices and address are placeholders. Photos: Unsplash.