Wireframing, or digital blueprints, is the cornerstone of the layout, design, and user flow within a site and application. We create intentional planning documents that make everyone else’s job easier. We string together these wireframes into prototypes so they’re easy to understand.

Wireframing & Prototyping is arguably the most exciting time of any project — it’s the first time that you start to see your project move from abstract ideas into a more tangible form. It’s the period where we hash out the nitty-gritty details and your vision comes to life in a practical way.

Wireframing is also a very misunderstood step in the process. People want to skip wireframes and move right to visual design. That’s a huge mistake that will end up costing more time & money, and result in a worse product. The primary reason why you wireframe first is that it’s fast, you can iterate quickly. Also, it strips away all the prettiness, so you can think about and optimize for your business goals, and user flow through your application or site, and decide on how the functionality will behave. It’s so easy to get caught up in what is the right shade of blue, or some other visual detail, when we hardly spend time arguing about the best possible way to achieve a given goal.

Wireframes are generally flat files, created in Illustrator, Sketch, Visio another vector editing program. Templates and views are determined, and we like to label each element with a unique identifying number (for atomic design builds later on). We then annotate these wireframes in InVision with comments, so that we can articulate all the functional elements of the site as well as visual rules like margins, grids, etc.

We then take the wireframes and string them together into a clickable prototype so you can feel the flow of using the application. This is easily done in Adobe XD, InVision, but sometimes we also create coded prototypes in HTML or React. Prototypes are great ways to get Executives to understand how the application will function, without involving them in all the various meetings.

Generally, we find that the sites & applications that invest heavily in the UX wireframes and prototyping stage are better products at the end of the process. They are more thorough, they convert better with their audience, and they are easier to use. Don’t skimp on wireframing.