Wireframing takes place early in the project lifecycle
A typical wireframe defines the overall layout, key elements and navigation of a design. It shows what goes where, providing a visual overview of how everything is organized and interlinked.
Wireframes are particularly useful in helping to arrange design elements in the best way,  making sure that the original reason to develop a site can be achieved within the creative and other design parameters. 
They come in many forms, anything from a simple pencil carving to detailed software-generated overview. What they typically have in common is their focus on functionality, behavior and priority of content, taking into account any user research.
Is this a Wireframe?
This is wireframes on paper: It is common for UX designers to use templates on dotted paper. This is a great way to brainstorm and quickly come up with or reject ideas to save time.
This is digital wireframes: This is a wireframe created in a digital tool like Figma or Sketch. There are also several great programs for drawing wireframes on the iPad.
This is NOT a wireframe.  It has graphics, typography and colors (UI design)
Read more about Wireframes:
Website Wireframe. Wikipedia
35 excellent wireframing resources. Smashing magazine
A beginners guide to Wireframing Tuts+
Smashing UX Design: Foundations for Designing Online User Expertises. Jesmond Allen, James Chudley
UX companion
Back to Top