Following on from my debut post on then State of Search I got to thinking about tools we could use to help harmonise the relationship between SEOs and designers, as well as anyone and everyone else involved in the design and build of a website in any company/agency/collective.
What are wireframes?
According to our friend Wikipedia “A website wireframe…is a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose…The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together…Wireframes are generally created by business analysts, user experience designers, developers, visual designers and other roles with expertise in interaction design, information architecture and user research.”
Wireframe tools are specifically designed to allow you to put together a wireframe and share it with a team of people who can add, edit, and discuss the mock up so they all stay on the same page when it comes to design, functionality and more, in real time. Keeping everyone up to date with most recent site versions and allowing them to discuss possibilities easily can make a real difference to getting your conversion paths right first time round and minimising leakage away from path or even the site itself.
During the planning stages of your website it’s essential to make sure the whole team is singing from the same hymn sheet for a large number of reasons including time frame and budget as well as maintaining as much harmony as possible in the workplace. From a conversion rate perspective, a site which does not flow well or creates stumbling blocks for the user will convert at a lower rate and may even dissuade users from completing the actions you are specifically trying to encourage them to take.
There are a large number of mock up tools available online, some of which are free, some of which are paid.
Free Wireframe Tools
As with most things in life that are free, these tools are largely basic but effective. Stage one tools like this to help teams pull ideas together and keep communication flowing between the SEO, designer, and anyone else involved in the project, saving time on all sides and minimising confusion from the outset.
MarkUp
MarkUp is a really simple tool which you can kick off with by simply dragging a bookmarklet to your toolbar and marking notes with shapes and text annotations. Nothing is downloaded; it all stays in the browser. Though a very simplistic format, MarkUp is great for scribbling down ideas and sharing them with minimal effort. If you’re more of a pen and paper kind of ideas guy (yes, they still exist), this may be a close alternative if you need to work online and share ideas electronically.
Gliffy
Gliffy reminds me a little of SlideRocket, a clean workspace with easy to use options not too far removed from the format of Excel or Word. With the ability to import, export in various formats, collaborate, publish, and with a large array of options and store your documents, Gliffy is a great way for designers and UX experts to come together and mash up some ideas. The Gliffy API is also useful to developers by allowing them to integrate Gliffy components into existing web-based applications they may have.
Lumzy
Lumzy is a great little free resource with a large number of component functions already in place and broken down into neat menus. This makes the initial mock up work quick and simple for the designer and their team, with an annotations section to help the SEO and others involved in the project. The drag and drop insertion of components into the page make building a page layout smooth and straightforward.
Paid Wireframe Tools
Balsamiq
Paid wireframe tools include Balsamiq (one of the better known tools), which you can try for free and sign for at $79 per year for a single user agreement. Balsamiq concentrates a fair bit on aspects of conversion optimisation and has specific areas designed around click-through and UI components, so if you have one of these guys on your team this tool is definitely worth a try. The ability to integrate UX
You may also wish to experiment with the Mockingbird application, a popular tool with an easy to drag-and-drop editor and simple sharing facility. Mockingbird has a free trial, a bundle of extras and format aids and is quite comprehensive for the $9 per month you pay for the entry level package. This kind of scope can be really helpful when trying to plan out your website design to maximise conversions, allowing the split testing of many versions of the same page, created and shared quickly and easily through your wireframe planner.
If you don’t get on with these examples, a large number of alternatives are available including:
Of course, wireframe tools aren’t an essential part of the process, but they can help the cogs turn more smoothly by eradicating confusion and helping all of those working on the project to communicate efficiently. This in turn can help keep tension at a minimum and avoid misunderstandings between designer and SEO, helping the project keep to its deadline.
Do you use wireframe tools? Do you specifically not use wireframe tools? Share your top tools and tips below, there’s so many more tools to choose from out there.
