Before digging into code, it’s important to create a plan of action that all parties are satisfied with. A mockup, or wireframe, is an easy vehicle for sharing a basic design with anyone involved with design decision making for a web or app development project.
When you hear the word “wireframe,” an image of eyeglasses with a metal frame might come to mind. It might seem cheesy, but a wireframe is similar to a pair of glasses in the way that it allows you to see clearly. Before you can add on a good pair of lenses to clearly see the world around you, you need a sturdy frame to put them in.
Wireframing tools make the process of creating an app or website much easier, by purely focusing on functions and user interactivity, stripping away everything else. A wireframe allows you to plan information hierarchy without the distraction of typical design elements like colors, fonts, and images.
Wireframes look like a mock up of the website or app layout, kind of like a newspaper’s mock layout, before detailed stories are added in.
$99.99 for Mac version
Omnigraffle is a wireframing app that has a high cost, but is worth it for the features. It allows you to create diagrams, process charts, page layouts, wireframes and even graphics that can be used on your website.
Where OmniGraffle stands out from many other wireframing tools for web developers is in its precision. Graphics and wireframes created through this tool could easily make their way to your final product.
Another feature of this tool is ease of use, with something for everyone – from professionals to beginners. You can start simple, then layer on detail if the project requires it. It’s easy to get started, but there’s plenty of additional power in this tool when you’re ready to unlock it.
Omnigraffle on Mac is perhaps the best user interface for creating mockups (with iPhone and iPad apps also available), and purchasing the program provides access to their support team.
Once you’re done with a project, you can quickly share individual elements or entire mockups in a message to a project collaborator, or export finished assets for the project in whatever format you need.
Free basic version, paid plan is $14/month billed annually
Mockflow allows you to easily collaborate with others – up to 2 on the free version and 5 with the paid plan.
It’s known for easy editing and creation features, with drag and drop elements. There’s an extensive library of options to choose from, like video, social media bars, images, and text. If you need inspiration, Mockstore (their template store) allows you to purchase other developer’s templates – or upload your own!
The export options are numerous, including formats like PDF, Microsoft Word, HTML5, images and PowerPoint presentations.
Mockflow is one of the best wireframing tools for developers, but if you’re looking for cons:
- Limited customer support (although they do maintain a FAQ section and tutorials)
- No add-on licenses, which forces you to subscribe to the premium membership if you require sharing access with more team members to use the software
- Billed annually, so a larger investment up front
Basic plan starts at $9/month
WireframeApp is very similar to Mockflow, but at a slightly more affordable monthly price point. In the past, they’ve worked with Appsumo to offer affordable lifetime access (under $50), so it’s worth following both parties to hop on that deal if it happens again in the future.
WireframeApp is available on the cloud, is touch-friendly, optimized to work fast, and allows for easy collaboration. An especially useful feature is the ability to easily add notes to describe features or functionality that would be too clunky on a basic wireframe.
iMockups for iPad
$6.99 on the App Store
iMockups was created exclusively for the iPad, and it allows developers to draft wireframes for their websites or apps – on the go! iMockups provides the mobility of an iPad + power of a desktop, offering a beautiful interface with intuitive functionality.
It’s easy to share and collaborate, and app purchasers have access to a dedicated support team. The price doesn’t hurt, either.
Adobe Photoshop and Adobe Illustrator
Cost varies, depending on if you own the software, or if you’re paying for an Adobe Creative Cloud membership. The most basic plan with Adobe Photoshop starts at $9.99/month.
Some people use Adobe Photoshop, Adobe Illustrator, or a combination of these two tools to design their wireframes.
In Illustrator, you can save object types and copy them later. Objects are easy to move, scale or modify on this wireframing tool for developers. Illustrator can then export to a PSD file with editable layers, and many typography features. Photoshop is then used to translate the wireframe into a visual final mockup, not dissimilar from how the final website will look. Think of Adobe Illustrator as your bare-bones wireframing tool, and Adobe Photoshop as the final visual wireframe before coding.
If you’re familiar with how to use these tools, the process is relatively straightforward. If you’ve never used either, it’s probably not worth learning just for wireframing purposes, since there are so many other great wireframing tools for developers. On that note, the only major caveat of using Adobe tools for wireframing (compared to others on this list) is that neither Illustrator nor Photoshop offers libraries of interface elements.
Framebox is a simple and free wireframing tool for developers that’s available as a web application. It has various drag and drop elements, allows you to give elements titles and descriptions, and makes it easy to share your final product with others through a URL.
This tool is ideal if you’re looking for something free, just note its limitations compared to other tools on this list, and determine if that’s worth it.
Pen and Paper
Building a wireframe doesn’t need to mean that it is done on an app or tool; the apps and tools are just there to make everything easier. Some people work better when using the old pen and paper route. Some of the best app ideas started with this wireframing process!
This method is essentially free, since these items can be found laying around the house. But instead of loose pieces of paper or a shared notebook, it’s best to jot down ideas in a separate notebook solely for app and website ideas, for easy organization. Moleskine’s squared notebook has a built in grid that’s perfect for the job.
Wireframes are important when designing a website or app to identify basic information hierarchy, without the distraction of other elements. Clearly, there are a number of tools available – you just have to determine what makes the most sense for you and your collaborators.
In your opinion, what are the best wireframing tools for web developers? We’d love to hear what’s working for you in the comments below.