Blueprints, Wireframes, and Prototypes


-Blueprints are CSS frameworks that aim to cut down the development time. It provides a solid foundation to build the project while
providing an easy-to-use grid, sensible typography, have useful plugins, and a stylesheet for printing. 

This is an example of a website blueprint


Advantages of making a website blueprint

  • Blueprints can help cut down on the development time needed to create a website.
  • Blue prints help organize information
  • Blueprints help the designer conceptualize the website

The above will help save time, money, and effort getting your finished product to the client faster.

Guidelines for creating a blueprint

  • There are no specific guidelines for creating a blueprint
  • Information architectures are abstract and under pressure to clearly represent the product of their work. The entire system is too young to set a standard that will work for all audiences and all situations.

Both the diagram and the navigation system display the “shape” of the information space in overview, functioning as a condensed map for the site developed.


Wireframes are visual guides that represent the skeletal framework of the website. This allows for the arrangement of elements to best accomplish a particular purpose.
The focus is on kinds of information displayed, range of functions, relative priorities of the information and functions, rules for displaying certain kinds of
information, and effects of different scenarios on the display. 

This is an example of a wireframe


Advantages of making a wireframe

Wireframes can really help a designer speed up their workflow by

  • Helping them understand page layout
  • Helping them visualize graphic placement
  • speeds up the design process

Guidelines for creating wireframe

  • There really aren't any specific guidelines that must be followed in creating a wireframe. Many people simply draw a wireframe on a piece of paper to help them visualize the organization of their site.
  • There are great online tools and downloadable softwares that can assist designers in creating advanced wireframes.


Prototypes are plans for how a website works, not how it looks. Every aspect of a website’s structure and functionality is represented in some
visual way by the prototype. Prototypes provide a structure that ensures a website is even possible. 

This is an example of a prototype


Advantages of making a prototype

  • Allows a designer to thoroughly test all the functions and tools on a site before the site is fully coded.
  • Allows a client to test their site before it is officially published to the web
  • Helps designers track what users expect when coming to the site.
  • Gives the client a substantial product to view and interact with before they give the go ahead to launch the site.

Guidelines for creating a prototype

  • There is no official guideline for making a prototype because each one is different.
  • There are great online tools and downloadable softwares that can assist designers in creating prototypes.

Created by …. Hillary Miller, Jerry Eberly, Lance Satterfield, Jacob Hardin, Joey Can