When it comes to software development, there’s always more to learn. Chances are you’ve probably heard the term Wireframes. This crucial step in the design process can make or break your product, but why? Watch this video to learn what a wireframe is, how to build one, what you need to know before jumping in, and why they’re important.
What is a Wireframe / Wireframing?
Chey: So a wireframe is a really low fidelity, initial design.
Rachel: Wireframe is what I like to consider the skeleton of a software build. So for instance, it’s like the actual structures that would go into an architectural build, in an architectural drawing. So it’s the bones, it’s the structure that actually builds the software out itself.
Chey: So typically what [Wireframing] is is just really simple, maybe one or two colors, typically black and white, just showing where things should kind of lay on a screen.
How do you build a Wireframe?
Chey: At Slingshot, we do design studios sometimes. And what those are really rudimentary, Sharpie sketch wireframes. Then we take those to a program called Whimsical, which really restricts what you can do in terms of getting too complicated with your wireframes. So just really simple rectangles. You build it from the ground up with just place holders.
Rachel: Wireframes usually come after we do extensive user interviews. So that is the beginning stage where we start to take all the information, knowledge that we’ve gleaned and then place it into a visual form.
What should someone know about Wireframes?
Rachel: We really like to collaborate with our clients. And as we begin to show them the wireframes, sometimes it gets misconstrued of ‘that is the actual design’. And really when we’re in the wireframing stage, we want to work with the stakeholders. We want to work with our users. We want to work with people that are contributing to the system in order to understand it.
Rachel: I always try to remind people that it’s not what is going to visually look like. In fact, oftentimes they’re pretty ugly.
Chey: You wouldn’t build a house without a foundation and wireframes are that foundation.
Why is Wireframing important in the design process?
Chey: There’s a couple places in the development and design process where if you can get to a problem earlier, it will save you time and money in the long run. And wireframes are one of those spots.
Rachel: Wireframing takes a step back and it’s like, ‘let’s get the actual structure and foundation of something down before we start adding all the complexities and the visualizations.’
Rachel: So it really provides the beginning stages and saves time and money in the long run, because you understand the complexities of the system and the way that it flows before anything else is added.