Muggery inc.

A simple and clean landing page concept, for a mug slinging e-commerce site.

Rough Sketches

I began by roughly sketching out wireframes for the desktop and mobile layouts. I also sketched out a dialogue box for detailed item information, this would allow a customer to customize their item and select quantity to order.

Grey Scale Layouts

I then created greyscale layouts in photoshop, at this point. Here I established placement of graphics, some of the copy and refined the flow. As mobile is the more popular choice for e-commerce users, I opted to design mobile-first.

Mobile Visual Design

I then applied branding, photography, and final copy. I first laid out the mobile version of the lander. AS for art direction, I chose a clean and direct approach. The colour palette is extremely simple, bordering on monochromatic, aside from the accent colour.

Desktop Visual Design

The design was then expanded upon for desktop. The functionality remained consistent with mobile, however this allowed for more space for graphical elements, as well as visible carousel items.

Desktop Order Dialogue Box

Similarly, the item details dialogue box, which allows customers to customize and add items to their cart, was visually design. In both mobile and desktop, it overlays landing screen.