Wireframe:

The wireframe is the sketch, hand-drawn or digital, that is used to layout the basics of a web design. These are typically pretty rough and don’t contain any content specific items just labelled rectangles.

The Grid:

When making page layouts graphic designers often employ a grid. The idea is that you produce an underlying grid of boxes to place the content of your page into. The setup of the grid determines how well your page works composition-ally.

Grid Benefits:

• Content is generally rectilinear (text blocks, images, media, etc.) so it fits well into a grid.
• Forces alignment which results in a more cohesive design.
• You can group elements that go together into nice blocks.
• The blocks of the grid can be expanded, shifted, and easily adjusted based on the size of the window.

Wireframe Lab:

Using Adobe Dreamweaver you will produce the basic layout of a website. By using the WYSIWYG editor and other tools in Dreamweaver you design a bootstrap based responisve site with placeholder text and images.