When creating web pages for a new product or campaign there are a few key items you may want to create first to streamline production. Two of these key items are mood boards and wireframes. Below are examples from my build process for brand pages on Walmart.com showing how first I set the visual direction with the mood board then define the user experience and messaging hierarchy with the wireframes.
Mood Board for Differin®
One important exploration in a mood board is the marriage of the target audience to the product in a believable way (pun intended).
Differin® Brand Page Design
The brand page design leads the campaign aesthetic. Clean and clear, just what the client wanted. At the review, they were just like “oooooh”. The meeting was less than 15 minutes. Win.
Desktop and Mobile Wireframe template system
Both simple and complex designs can benefit from a well thought out wireframe to reveal messaging opportunities and expose roadblocks in the user experience. I created a lightweight UX toolkit and a wireframing template system for the WMG designers to take their brand pages to the next level.
Mobile and Desktop Brand Pages for Quaker