<img height="1" width="1" src="https://www.facebook.com/tr?id=1101141206686180&amp;ev=PageView &amp;noscript=1">

Blog

Wireframe, Mockups, and Prototypes

Before implementing a new feature in an application, it is common practice to create and wireframe and mockup first. These are visual preview of the app made without a time commitment towards any code. These can be used to spark discussion on the details needed to execute a feature from a UI perspective as well as where each individual component should be located on the page.

 

Here at Erdos Miller, we use Balsamiq to create the wireframes/mockups/prototypes for brainstorming. Balsamiq is a very powerful program that allows the user to drag and drop components on page to create the said wireframes/mockups/prototypes. All our prototypes start out as wireframes and mockups, and our mockups start out as wireframes. In other words, we first create a wireframe that becomes a mockup and then lastly will become a prototype.

 

A wireframe is a light-weight bare-bone rough sketch of what the UI will look like. Ideally, one would have all the components needed for the page/screen, as well as be positioned/aligned properly. However, there would be none or little styling. Each component could simply be a rectangle with a label inside denoting the component depending on your preferences. This would allow discussion and revision on where all components should be positioned on the page. Once the positioning has been agreed upon, you would typically begin styling the page or creating the mockup.

 wireframe

(This is an example)

Being a styled version of the wireframe, the mockup would look very similar to the finished product. There should be custom buttons, input fields, colors, etc. Keep in mind that none of these components would have any functionality to them. It would be no different than looking at a screen shot of the application. However, with the styled version of the components would help those who have a hard time envisioning the final product picture what it would look like with a wireframe alone.

 mockup

(This is an example)

The prototype is just taking the mockup one step further. This would be adding navigation to your mockup via clicking in a manner to behave how it would in the app. Balsamiq allows you to save your mockups as a PDF of multiple pages. It allows gives you the ability to link to specific pages by clicking on certain components. This would obviously exclude keeping track of state in a normal application. However, with a bit of finesse you can somewhat simulate how navigating the app would feel for the end user. Once the prototype has been signed off on, it is time to begin coding!

 

 

Recent Posts:

Introduction to PCB Design and Manufacturing Part 4: PCB Manufacturing 
Publish Date 02 Mar 2021 Nathan SzantoNathan Szanto

So, you’ve created your schematic, you’ve laid out your PCB, you’ve had multiple [..]

How to Build a Better MWD Hand
Publish Date 02 Mar 2021 Jason GalleJason Galle

What skills and experiences should we be looking for in new hires and what kind of [..]

Customer Experience means everything to us, Here's Why...
Publish Date 02 Mar 2021 Casey MayesCasey Mayes

Here at Erdos Miller, we all strive for the same goal, and that is to provide our [..]

NVCC – Intro to Utilizing GPU Power to Offload the CPU Part 2
Publish Date 02 Mar 2021 Jack BakerJack Baker

Assumptions: Machine has a Nvidia CUDA Core GPU (such as a GeForce) with installed [..]

Comparing different methods to get the 50th Fibonacci number in C++
Publish Date 02 Mar 2021 Jamison GrayJamison Gray

When comparing different algorithms, we typically look at space and time complexity, [..]

Introduction to PID Control Loops
Publish Date 02 Mar 2021 Yifang YangYifang Yang

A Proportional Integral Derivative controller (PID Controller) is a closed loop [..]

Making a calculator with Pyside
Publish Date 02 Mar 2021 Ashton ScaliseAshton Scalise

Python is not really the first language that comes to mind when thinking about GUI [..]