Landing Page: Wireframe & Web Design

A snapshot of my process developing a landing page design for my visual design class project, “The Whole Bean.” The project’s most important goals were to attract as many customers to the coffee shop as possible during its grand opening weekend, and to form long-term relationships with potential customers, especially locals, so the coffee shop is top of mind. Two key actions I wanted users on the landing page to take were to attend the grand opening and to sign up for email newsletter. I wanted the landing page design to build upon The Whole Bean’s consistent brand identity. The brand's identity assets are used throughout the landing page to create brand recognition, build excitement, and reinforce the brand’s personality, product offerings, and image.

Pen & Paper to Digital Wireframe:
To experiment with the layout and placement of content for my landing page, I first sketched out a few ideas on paper. I used UXPin to transform my sketch into a digital wireframe.

Photoshop Wireframe:
I recreated my digital wireframe in Photoshop using a two-column page design with a 12-column grid. I also began incorporating the brand’s color scheme and typescale.

Landing Page Foundation, Look & Feel:
After nailing down my copy, I added imagery, icons, and a custom CTA to my landing page.

Feedback & Final Landing Page Design:
After applying feedback, iterating, and testing my design solutions, I made final adjustments and completed my landing page design.

↑Back to Top