Wireframes are the blueprint of a design. They don't contain colors, fonts, button treatments, or any visual flair- it's simply the layout / organization of where the content will go on a page; the bones of a site.
Many people argue that wire framing is a waste of time and money; that it's not a problem to jump head-first into design and just build out the finalized visual designs right away. We would argue however, backed by years of experience, that it's an absolutely crucial first step when designing and building a website and even more important when building a user-based application. Writing an essay without an outline may be faster at first but inevitably invites many rewrites or fails to get the correct point across. The same goes for creating a visual design without a wireframe... Below are some of our most compelling reasons to not bypass the wire framing process- let us know what you think!
1. Wire framing forces you to consider usability right off the bat- resulting in a better product.
The last thing you want when you launch your product is to realize that your users are having difficulty using your site or application. It is surprisingly more common than you think. Visual designs can give you tunnel vision, only focusing on the more prominent aspects of the colors, type, and spacing. Instead of focusing on the user story (the process a user takes to complete an action in your application). You'll end up having to go back and re-think the user process from beginning to end, and often you will lose those initial users forever.
2. Wire framing saves time and money.
While you may spend a little more time initially, you're not going back and fixing anything after the fact, you're not forcing your developers to hack solutions together blind, and you're not spending hours trying to make every single decision in one design sitting. Also, your development team will often require less visual designs if they are provided a good set of wireframes. It seems counter-intuitive that splitting out wire framing and UI design would save money, but it makes a huge difference, especially in the life cycle of your product/project.
3. Wireframe designs allow for your development team to get started sooner.
Visual designs take time, both to produce and get approved. Many times, product owners end up squabbling over colors, fonts, border treatments etc... and your development team is just waiting to get started. If you have approved wireframes ready for them, they can start building right away-- who cares what color the header bar is going to be, just build it already!
Tragic doesn't use wire framing for every project, but any projects that involve complicated user processes or larger development deliverables will definitely benefit from at least a handful of wireframes. We know how to use wireframes to shorten our project timelines, increase developer productivity, and iron out complex user stories to ensure we build successful applications. We're focused on quality, and budget-conscious results, which means it's crucial to avoid as many missteps as possible.
Wire framing isn't always necessary, but when it is, it's priceless.
