The final version of this website, meant to represent a working and communicable site. Technical, experience, and interface concerns are considered.
Visual representation of what the site will look like, consideration of type, colour, size, and placement. Often built in programs like Illustrator or Photoshop.
A working simple website that represents the overall structure of your site. Each page to be built is created with working navigation throughout. The focus is on building the shell of a working site—to be populated later, rather than a full blown designed site.
“A wireframe is a low-fidelity visual representation of a website’s layout design, sometimes referred to as a skeleton, outline or blueprint. Often, a wireframe represents the basic page layout structure and navigational scheme of the site’s pages, as well as major site components (like web forms and ad units).” These may be created by pen and paper, design programs like Illustrator or online software like Mockingbird.
“Sitemaps are a hierarchical diagram showing the structure of a website or application. They are used by User Experience Designers and Information Architects to define the taxonomy through grouping of related content. They are an important step of the user centred process as they ensure content is in places users would expect to find it.” These may be created by pen and paper, design programs like Illustrator or online software like Writemaps or Gliffy.
A written document that lays out your intentions for the website / project. Ideally discusses audiences, usage, technical requirements, aesthetic direction and information architecture. As an initial document it is often subject to modification as the project evolves.