Wireframing Software

While in school for design, the students used all Adobe programs. The suite had all of the design industries covered with their comprehensive collection of programs. Post-graduation, most of the projects I create center around Photoshop. Illustrator, InDesign, Dreamweaver all play a part in my design processes as well, but Photoshop is the platform I use most, specifically to create wireframes. If you missed our previous post on the importance of wireframing, check it out to get more context for this article.

Photoshop is perfectly adequate if you are looking for the basics in wireframing. It allows for the client and your team to have a visual depiction of exactly what their site will look like. A PNG can be produced and put into an HTML file to give a better understanding, however in terms of interactivity, Photoshop and PNGs leave a lot to be desired. Of course, with a combination of Photoshop files and Dreamweaver coding, the idea of interaction can be achieved, but it takes a great deal more time and know-how than other platforms that have the functionality built all in one.

The next step up from a wireframe is a prototype. A prototype of a website is a minimally interactive display of the pages of the site. You can click from page to page and include interactive elements all in real time. There are programs with high capabilities in this area, but often they are very expensive and there is a steep learning curve, like with Axure. I am aware specialists in user experience and interaction use impressive expensive software like Axure, but I was only looking for a step-up in basic wireframing programs, so I was surprised to find there are more competitors out there than expected. The three I keep running into are the original favorite, Sketch, a quickly evolving up-and-comer, Figma, and the new kid on the block, Adobe’s XD.

Sketch has been around the longest and has more capabilities and users. It was originally just for design, but with the Craft plugin and in collaboration with Invision, the designs can be translated into prototypes. It is often being updated and now asks about $99 per year to keep up with the updates. There are certain aspects some users don’t love like the group resizing for responsive or specificity needed for simple movements, but their page organization and the greater allowance for design complexity gives them the one up.

Figma is a close second to Sketch and is quickly progressing. Basic prototyping capabilities are already available and are expected to expand rapidly. It is a web-based platform, so you don’t need to be chained to a single MAC like with Sketch. It has a user friendly vector manipulation element and easily allows multiple user collaboration and same-time manipulation. However, it doesn’t have the extensive list of plugins or third party cooperation that Sketch does. It’s organization aspects are a little rudimentary, but it is currently still free to use!

As an Adobe nerd, I feel it is necessary to give a little shout-out to their latest program, Adobe XD. In XD, elements pertaining to design responsiveness do not yet exist. But! It does have the capability for prototyping and design in one as well as collaborative workspaces between multiple users. Once Adobe has developed XD’s capabilities further, like the very basic text, design and effects tools, it just might give the other two a run for their money.

Is it time to begin testing out new software, or do we wait it out until the programs are a bit further along? That’s probably a question for each individual and company depending on what they need, but it’s always good to know what’s out there.