Informal Wireframe Creation for PPC Managers who don't know Photoshop (Video)
PPC isn't only about the pre-click world, but the post-click world - the world of what users see and do after they've clicked on your ad and you've paid a provider like Google Adwords.
Well what happens post-click actually directly affects your PPC accounts - in the case of Adwords, your Quality Score, which dictates what your minimum bid is for each keyword, is affected by how well your landing page matches your ad, and also very likely by how often people abandon your site and return to Google.
Today we're talking about creating landing page wireframes -
well, sort of, not formal wireframes that big companies might need to use, with a million approvals from every person in the building and bureaucracy out the wazoo, but informal ones that anyone can make, and marketers at small to medium sized business could create. The idea is to put your idea down on paper, then formalize the messages a little in photoshop so that you can sit down with a designer and have a decent page created.
So grab the Adobe Photoshop file from the video and follow along: Download the PSD file
Now don't laugh at my fake landing page! The whole point is that you can change it into absolutely anything you want, so if you don't like it, good! Go and make it better!
Landing pages are an essential part of the PPC cycle, and it's really very common that the people in a company who know their product or service best, the marketers, and those responsible for the PPC campaigns, can't get a landing page properly designed in the way they'd like. So this video is a very basic introduction to the idea of creating a filled-in wireframe in Photoshop. We're going to look at the concept of layers, we'll look at shapes and how to resize and reshape them, and we'll add text - with these basics, a simple landing page wireframe can be created, which any designer can work from to create an attractive page with the messages and path to conversion that you, the marketer, envision as best.
If you're familiar with Photoshop already, you aren't likely to learn anything new, but if you're thinking "oh no I can't use Photoshop", but you really want input in your landing page development, this tutorial is for you. Armed with this knowledge and a starter Photoshop file, you can produce a sort of functional wireframe for your landing pages, then sit with a designer to have them create the beautiful page you actually want, with things in the right places, and calls to action perfectly positioned, etc etc - the first time.
The landing page creation process, in my humble opinion, should begin with a small marketing team who understands not only the website, but also their customers and how to lead them to a conversion. To begin with the team should identify and create/source the elements which may make it into the final page, either graphically or textually, including things like:
- Main Headline: Some text has to be the biggest, what should it say?
- Offers / Features: Short punchy headline style text needs to be brainstormed.
- Lists and bullet points: Whichever information lends itself well to bulleted lists should be worked out, again in a short and punchy manner.
- Short-copy / Long-copy: depending on the landing page type you'll need either a little, or a lot, of text. I'm a fan of short pages, but I may not represent your audience, so if you need copy, long or short, write it out first, then later, during the design phase, you can find or create the appropriate space for it. If you're unsure about long vs short, you may wish to try both and split test them.
- Trust symbols: In most cases trust symbols are a pretty important element to include, and sourcing them may take longer than expected if legal issues like logo usage come into play.
- Testimonials: If you've got them, flaunt them!
- Navigation: Marketers should decide which navigational elements will be presented on the landing page, and how prominent they are "I like to see a clear path back to the main website so those who wish to surf more don't feel trapped" but who knows, maybe you're selling closets to agoraphobics.
- Imagery: You'll have to find legal imagery to use, and while this task is often left to the designer, that isn't always the best idea. I like to see a marketer try to source a lot of potential images from a stock photo site then sit with a designer, present the examples, and discuss what they'd like to get out of the imagery.
- Contact form / format: is it a web-form? Is it an 800 number? Decide on all contact elements which should be present, and remember that doesn't have to just be one, but it should always be traceable. If it's a form fill-out you're after as a user's primary action, I'm a fan of putting the form right on the landing page.
I'm sure there are some essential elements I may have left out - these are really top-of-my-head examples of elements that could be included in a landing page. If you want some in-depth heavy thinking about landing pages give this Tim Ash guy a call, trust me. Not only does he have a six letter name, his landing pages are optimized too.