A wireframe is incredibly simple: designed in black and white, a wireframe’s main purpose is layout and functionality. The placement of buttons, images, icons, padding, and order of pages are usually depicted by simple boxes, some dummy text and an arrow or two. Much like building a house, the first steps to creating a website is constructing the blueprint. In the design world, this blueprint is called a wireframe.
Once the wireframes for the website are laid out, the fun part begins…the mockup! The mockup is a glimpse as to what the website will look like. Colors, background images, textures, fonts and patterns are used to populate the designated areas that were laid out by the wireframe. Mockups are what give your wireframes life.
These two terms easily meld together for the client who is quickly disappointed when a plain black and white wireframe is presented in front of them when they were expecting a color-popping layout. I’ve found that the simplicity of the wireframes is what makes this complicated. Nothing is black and white, right? Wrong. Wireframes are. Black and white turns into colors, different fonts and button styles with the mockups.
If these two terms can be clearly defined at the beginning of the website design process, not only will communication be clearer, but you’ll be able to arrive at a design that both please the client and designer.