What are Wireframes?
Wireframes are sketches or a pure skeleton of a website or application. They are presented as a first step in creating the final product or design. In this stage, you gather information and requirements and create user stories in parallel that have visual requirements, roles, and functionalities listed. Once you have a complete set of requirements they are transferred into wireframes and presented to the client for feedback. Once the client has a chance look at the wireframes they can be adjusted if needed. After this initial stage, we can begin to create the design based on the wireframes. Wireframes can be created using several different popular tools like UXPin, Balsamiq or Axure, which is the tool I use for creating wireframes here at Coria. After the initial stage of creating wireframes with pen and paper, they are moved into one of the design programs so they can be presented to the client. With the client feedback, the wireframes are updated with correct layout, roles, and features, which is much faster than starting with mockups directly and having to update everything in much more detail at this early stage. After the wireframes are complete it is time to make the mockups or the design.
What are Design Mockups?
Mockups are the presentation of the final design including all visual elements and details like fonts, colors, etc. Mockups can be created in different programs like photoshop, illustrator, or sketch. Once the designs are complete they are shared in a prototype tool like InVision. This allows the client to see how the application will work from the user perspective and allow them to provide feedback. A lot of time there is confusion between wireframes and mockups. When you first present wireframes to a client they need to understand that this is a simple layout with very few actual design elements. It is just a first step to make sure everyone is on the same page with how the application will work and what the general layout should be. Sometimes designers do hybrid wireframes that show a little more detail with a design but still aren’t considered a fully finished mockup.
Wireframes vs Mockups
There are three possible ways we can create the complete final product. First, we can create wireframes, collect information or requirements and functionalities, after that we can create mockups or actual designs using some of the graphic editing tools. It is easy for wireframes and mockups to get confused so it is best to decide which method to use on a case by case basis. If they are more visually inclined, then showing high fidelity wireframes might be a good method so they can see part of the actual markup and complete structure.
In the end, whichever approach you choose, it all depends on the client and the circumstances.
