A well planned landing page should be a part of any marketing campaign that is implemented by an organization today. An effective marketing campaign, whether offline or online, will most likely trigger an individual to search for more information online either by using a search engine or directly typing in the URL of the organization. This is not a new concept, but it’s important for organizations to pay attention to how they are building these landing pages. Two of the most effective tools for specifying and designing a winning landing page are Adobe Fireworks and Specctr.
Adobe Fireworks for Planning
The first tool I’m going to address is Adobe Fireworks. If you’re working in the web industry and haven’t used this tool I suggest you try it. The ability to plan and prototype multiple pages of a website is what sets Fireworks apart from other web planning tools such as Photoshop and Illustrator.
Once you gather all of your requirements for the campaign it’s time to draft a functional specification, which documents all of the important attributes and functions of the page. This information will be very helpful in architecting the visual representation of the landing page in Fireworks. The document should contain information such as:
• Conversion goals of the page
• Customer type and persona
• Marketing messages
• Graphics requirements
• Structured content for different devices with importance rating
• Key metrics and analytics framework
Once you have this information it’s time to start building in Fireworks. What I like most about using Fireworks for a landing page is the ability to author multiple variations and functionality using the “pages” and “states” tab. This organizes the pages and makes it very easy to create multiple versions of the page to test out with Content Experiments inside of Google Analytics. It’s also effective for organizing the different page versions for desktop, tablet, and mobile devices. The image below depicts how to organize versions by using the page tab.
Specctr for Specification
Once the landing page versions are mocked up in Fireworks, Specctr makes an amazing plugin for Fireworks that allows you to specify the following page attributes:
• Width and height of objects
• Spacing between objects, text, and canvas
• Fill color
• Stroke color
• Opacity level
• Font size
• Font family
• Font color
• Alignment, leading, kerning
• RGB/HEX numbers
The ability to specify the mock-up at this level of detail and speed is a very effective workflow for design and development teams. The plugin will automatically create the spec labels and put them in a separate folder named Specctr. Examples are depicted below:
This level of detail ensures that the development team is building the landing page exactly how it was planned and designed, which is very important to the success of the landing page. It also speeds up the workflow and streamlines the process.
The Specctr tool comes in a paid version and a lite version, which is free. The plugin recently was developed for Illustrator as well.
This article just scratches the surface on the capabilities of these two tools, but you can see the power they possess for planning effective landing pages in an organized and streamlined workflow.
