Wireframe vs Sitemap vs Style Tile


Sitemaps are the starting point for the execution of any successful website. By creating a sitemap one has a visual and comprehensive blueprint to effectively create their webpage. Sitemap’s is not only a guide but should dictate all of the production of the website. Sitemaps allow for not only the creator, but also the client to have a clear and concise idea on the navigation, content and functionality of the website. Sitemaps are typical formatted in a family trees that show the connections between each page with a description of its content.


Wireframes enhance the development stage of a website by giving a vague visual arrangement for elements on each page of a website. Wireframes help to influence the early design of a website and the cursor navigation. Essentially Wireframes are skeletons for a website and offer a frame work in which the preceding designs can be placed into. Wireframes are typically created in InDesign allowing for the execution of div boxes and early implementation of HTML formatting. It is best practice to design one wireframes that dictates the general design of most pages with changes customized to content. This way, the website is dimensionally cohesive.

Style Tiles

Style tiles are essentially mood boards for web design. Here, initial or preliminary choices on typefaces, color schemes and imagery are made. Style tiles may also inform persona and target audience. In conjunctions with wireframes, creating multiple style tiles provide options and clearer art direction the website can take. Style tiles should always visually enhance and make sense with the direction of the sitemap and wireframes. Style tiles should not be confused with advance wireframes in which final imagery and content are used. Style tiles are more general and do not go indepth with layout unless it influences the visual design.


2 thoughts on “Wireframe vs Sitemap vs Style Tile”

  1. I like the phrase “dimensionally cohesive” because it creates a sense that you are in fact working within another dimension. The 2D layout of a website is very restrictive and making things look right on a flat surface when we are so akin to living in a three-dimensional world is often very frustrating, for me at least. Good post.


  2. I liked how you described the sitemap as a “visual and comprehensive blueprint ” because it really is the base/origin of what you will be developing in the following steps of a site and how you called the wireframes as the “skeleton” which I think works perfectly with what they do. Also, I got a clear understanding of each step because of how you divided the information into sections!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s