Wireframing & Prototyping
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.
Plan For Success
Wireframing & Prototyping is a critical moment in the planning and design phase of your site or application. Don’t skim on it if you care about conversions, ease of use, and maximizing the impact of your product.
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.
Align the Team
Wireframes & prototypes get your entire team in alignment on what the product or site is and how it functions. We create annotated wireframes for each template and state so it’s clear to everyone upfront.
Hints for the Visuals
Good wireframes should hint at what the visual designs will be like. This helps eliminate surprises with management and executives later on.
Feel the Flow
A user isn’t static on your site or in your application, rather they flow through a series of pages or states to complete their objectives. We model flow paths and help users get where they want to go easily.