Favorite Landing Page Design Tools
“An artist is only as good as his tools,” so the saying goes. I always liked that one more than, “It is a poor artist who blames his tools.” Because DiVinci didn’t try to paint his masterpieces with a plastic spoon. Good tools can really help a designer make great landing pages and increase conversions. Here are five favorite tools that are in my survival kit, and their respective pros and cons.
5. Mockflow – For Wireframing
Mockflow and I have had a love-hate relationship from the very beginning. I’ve experienced some issues ranging from annoying to downright impossible, but luckily many of my issues have been fixed.
The Pro’s: When it comes to wireframing, this tool is quite handy because it allows for a collaborative work environment. Multiple people can work on the same site (not the same page) and post helpful comments, using arrows to indicate certain areas for referencing. In addition to working with others, Mockflow is extremely intuitive. It uses a “drag and drop” style online program that has most of the elements one would normally use. The 960 grid is built-in, and there is a preview feature using active linking between different pages.
The Con’s: Some of the elements are a fixed size. While dragging a tabbed menu bar to the top, for example, it will only be a specific size. To get the full effect, you have to draw each of the tabs and link to them individually.
4. Jing – For Capturing
Jing allows a user to capture screen shots of an entire, part of a screen, and create short videos.
The Pro’s: There is nothing like running into a problem while building a site and being able to draw a square around the issue, hit record, and show the actual glitch to your team members. It is also possible to capture a still image then draw arrows, write comments, and highlight on the image before saving it; eliminating a step or two after it has been captured.
The Con’s: The tool does not seem to want to capture full pages only the screen as shown. Also, you have to install. And, its sidebar/top bar icon can get in the way from time-to-time. But, having it movable, it’s only a minor inconvenience.
3. Google Drive – For Storage
Google Drive is an online storage service that allows you to save some of your files onto an online accessible drive and share files with others.
The Pro’s: Back it up! Most of the projects that I work on are stored on my Google Drive folder, so I can share them with other people on my team. An added bonus came my way when my laptop suddenly sparked then began to pour out smoke from its side. I was able to jump to a different computer, open the file I needed and pick up where I left off with very little down-time.
The Con’s: When working with many people, and many different file structures, it can become very cluttered very quickly.
2. JoinMe – For meetings and sharing
Okay, so this is not technically a design tool but I use it many times a day. It’s an online meeting program that allows attendees to talk, share screens, and operate the mouse on another computer.
The Pro’s: Everything I just listed, plus the ability to lock meetings if you have many using the same account.
The Con’s: The audio is not always the best. If you are scrolling on a page, the audio can cut out to the point of not being able to understand what a presenter is saying.
1. FEN-GUI – FOR ANALYZING
Fen-GUI allows you to take a screen capture of a site that you are trying to improve and get a overall understanding of where one’s eyes look the most. The tool tells you whether your call-to-action is standing out enough or if something else is competing with it for attention.
The Pro’s: It is fast-performing and provides a heatmap as a gaze plot allowing you to see where an eye is going and when each thing is looked at (and in what order). It is fairly inexpensive for its value. Do you recall my last post where I talked about the boss strong-arm design tactics? This is a great tool to show if the boss’ idea is a good one.
The Con’s: While being based on tons of human testing data, it still isn’t human and requires you to use some interpretation to come to a conclusion. For example, if you take a screen capture with the scroll bar on the side, it will consider that as an image in the gaze plot and decide when the eye lands on it. Then you must consider when a scroll bar gets much attention (only when user wants to move down the page). It also notices the area of contrast. So, while in big white letters on a green background, you have the word “FREE,” the heatmap might decide that the contrasting color at the end of the word is the most eye catching; whereas human behavior dictates that an eye will see the word not just the color.
There are so many tools out there that it comes down to using what works best for you. Hopefully some of these will also benefit you.
Shawna Duvall
Latest posts by Shawna Duvall (see all)
- Landing Page Conversion: 3 Mistakes and 3 Solutions - October 19, 2013
- Favorite Landing Page Design Tools - September 17, 2013