Now that all necessary information has been gathered, and the proper decisions about design have been made, it's time to start actually designing the site! The first step is to create mockups and wireframes of the site. A mockup is a version of how the site will generally look. There are two kinds of mockups: a completely image-based mockup, and an implemented HTML-based mockup. An image-based mockup is a picture created to represent what the website will look. It has no functionality, but it is a good way to discuss possible visual designs of the site. The second kind of mockup is an image-based mockup that has been converted to HTML. It may not be very functional, but it does show how the site will look as HTML, not just as an image.

A wireframe is the entire site without any of content. Usually this comes after the decided-upon mockup has been created and turned into HTML. This could be thought of as an outline of a book. It will include all the titles, links, etc. that will be in the final production, but will lack any of the actual content. Unlike mockups, a wireframe is completely functional, and gives a great way to test the navigation scheme on the site.