Wireframing for Developers (NOT Dummies)
One thing we’re reminded of as we proceed through our coding journey is that developers should be lazy; that is, we should strive to attain functionality with as little work as possible. However, in the quest for eloquence and DRYness (Don’t Repeat Yourself-ness), it’s possible to prioritize the code architecture over the usability of an application. A single-minded focus on getting our code to work to the detriment of user flow and navigability is counter-productive, and easily avoidable. One way to mitigate wasted development time and feature creep is to have a solid sense of the barebones utility of our applications. And one of the best ways to do that is literally sketch out how they work. Hence, wireframes.
So what exactly is a wireframe?
Wireframes were originally used in CAD (Computer Aided Design) drawings to visualize 3D structures, like buildings or cars, and aid in overall design without the need for detail. The resulting drawings resembled an assemblage of wires making up the object’s superstructure, and gave rise to the term we use today. For developers, a wireframe is simply the most basic visual representation of an application’s screens or features. Before you code what a landing page will look like, or how a user might navigate between pages, it’s useful to actually draw out those connections and determine what might provide an optimal user experience. As developers, we’re already encouraged to spend time drawing out the associations between our models and contemplating the specifics of our schema before making our first migration — we should spend a little bit of time considering how our pages interact with each other.
Ok, so how do we wireframe?
As counterintuitive as it might be, the best way to wireframe is with a pen (or pencil) and paper. Wireframing should be lo-fidelity, fast, and instructive. The point is not to highlight cool features or novel use-cases, it’s to identify the way a user might actually navigate through your app or website. The more elements you add, the less informative your wireframe will be. A good wireframe should be intuitive, but simple enough that a user who is not computer-literate will be able to navigate it and give useful feedback. If you’re spending more than 5 minutes sketching a page for your app, you need to cut as many features as necessary to get under that time frame.
Don’t worry about aesthetics or design, leave that to the UI/UX folks. All that’s necessary is to get a couple of boxes down on paper and doodle in how you plan on having the user interact with the application. Some things to consider are:
- What do you expect to see when you open a website or app?
- What information is most valuable or informative?
- What actions do you want the user to be able to perform?
Below are a couple of examples of what basic wireframes can and should look like:
Iterating and Next Steps.
Once you’ve got a few sketches down, you’ll find that your wireframes have provided you with a helpful visual workflow and structure for building your application. You may want to sit down with a friend or colleague and have them walk through your frames to see if it makes sense to an outside observer. Once you feel comfortable with your boxes, you can refine and build out on them. You don’t want to be adding in actual content or graphics, instead use placeholder text (the Lorem Ipsum generator is pretty handy) and simple icons.
You probably don’t (and shouldn’t) need to go beyond the most basic sketches, but if you find the process useful and have some extra time, there are a number of tools online to build clean and functional prototypes out of your sketched ideas. Balsamiq is a simple to use wireframing tool with a good library of how-to videos, and if you want to go a step further, InVision lets you import your drawings or pdfs and wire up working buttons and links to fully test out your user flow. I’ve linked to some other resources below.
It’s incredibly useful to visualize how your user will actually engage with your application, but it’s equally important not to spend too much time on this phase of the process. Ultimately, wireframing should help us spend less time coding by gaining a clearer understanding of how we want users to interact with our code, allowing us to build cleaner architecture using the simplest structures.
Further reading and resources:
