What is annotated wireframes and what’s their surprising relationship to alien spacecraft? Let’s find out!
What’s a Wireframe?
The short answer is that a wireframe is an illustration that represents all the functioning parts of a website, the one you’re about to build that will bring your new, let’s say, real estate business fully to life.
A wireframe will show clearly where the functional elements and content will go, as well as what the relationships are between all the web pages. A wireframe is created before anything gets built and it’s a little bit like a blueprint.
An Architect’s Blueprint
We’ve all seen what an architect’s blueprint for a house looks like. It’s a highly detailed rendering of a home’s exterior shape and all the rooms, doors, windows, and passageways inside.
Created in the design stage, a blueprint shows the flow of space, the aesthetic, and how everything will work together.
If there are no changes, it then transitions to a precise guide for the construction crew to start building.
If there are questions, alterations, or a re-envisioning of any design aspect, the time to make those changes is when that house is still a blueprint, before anyone buys even one box of nails.
A blueprint is filled with symbols for doors, bathtubs, and windows that can look like what they represent. An architectural floor plan is very similar, often with the addition of words to describe what each room is.
Why is a blueprint necessary? It shows the size and scale of the property, helps companies to estimate what the materials and labor will cost, and gives a sense of the timeline to complete the construction.
In the same way, by identifying every component in a schematic, a wireframe tells designers what resources will be needed and on what schedule. It’s the first step in building the website for your blossoming real estate empire.
How Do Aliens Fit In?
Suppose it’s 73 years into the future and the architectural firm responsible for this spectacular house (the one with doors and windows!) not only has a stellar reputation here in the US but it’s also known throughout the galaxy. They’ve attracted a new client from beyond.
A less evolved alien species has landed on Earth in a wheezy, rinky-dink space vehicle. The aliens know their ships need a re-design because they look like cheap lampshades.
The architects will make some design sketches. Because they want to make sure every design note is crystal clear to the aliens, these future architects will annotate their blueprint with explanations.
These notes will explain how every door, hinge, or button functions and why it’s there.
In case the design team needs to step away, the aliens will have a document that captures the flow and logic of the redesign concept.
The Best Way to Annotate Wireframes
It’s super important to document the design process as early as possible (so that changes can be made before the design is in production) and so that all stakeholders can pre-visualize your future site’s user experience.
Creating a great user experience should be a priority; it’s integral to the bottom line since annoyed users of your site or app won’t return.
This is where the brand promise of your real estate empire starts showing up, in a seamless, trustworthy, clear user experience.
Another great benefit of product design annotation is that it helps eliminate assumptions or guesses about what’s needed.
It captures a designer’s thought process and it helps developers and copywriters know what they’ll be working on.
Ready to Annotate?
Let us know what kind of website design you’re thinking about!
Leave a Comment
Comments (0)