To begin comparing and contrasting wireframes, website schematics, style tiles and site maps, it is important to define each term.
A wireframe is a guide or layout that details the basic structure of a website without the imagery or text decoration inside. The importance of a wireframe is to tell the web developer the hierarchy of content, placement of information and what the purpose and functionality of the website will be. There are three elements incorporated into a wireframe: Information, Navigation, and Interface design. When placed together, these elements enable the user or developer to see how the information is organized on the screen, how a person will move from page to page on a website, and how different facets of the website will operate, including buttons drop down menus, etc.
A website schematic is similar to a wireframe in that they are essential blueprints of where information and elements of a site will be placed. As stated on smallbusiness.chron.com, “A website schematic, or wireframe, presents the nuts and bolts of page functionality without incorporating the design elements, color schemes, type styles or interactive elements themselves.” From the definition, the use of the term wireframe or the term website schematic are almost interchangeable. A schematic, however, includes instructions on how different elements operate and include icons for elements such as social media and partner websites.
A site map can be described as a cascading navigation chart that show how someone will navigate from the home page through to other pages included in the site. It is similar to a tree diagram where each site branches off the main page. The site map is usually a tool created for assistance in creating the website, but it can also be a web page that shows the different types of web pages stemming from the index. Site maps are great beginning tools as they keep webpages organized and easy to follow for the developer or user.
Style tiles are sample webpage designs that showcase fonts, images, and other design elements usually placed in a package with previously created wireframes and site maps. Style tiles reveal the message trying to be communicated through the site along with showing how information is organized and how much importance is placed on each element. Style tiles could be accurately called mockups as they are fully colored and detailed designs that can be transferred to functional html files. In projects we have submitted in the ADVE 253 class, we have always had to include photoshop comp files alongside the html’s. These can be classified as Style tiles as they detailed where our imagery, information, and designs would be placed into our respective websites.
Ultimately, each element should be explored when creating a website as each element has their importance in the design process. When beginning, a person should brainstorm the different pages going into a site and how they stem from the main page, leading them to create a site map. Then, they should understand how the information should be organized and create a page that sets information boxes in a hierarchy, leading them to create either wireframes or a website schematic. Once all the information is organized, then a developer can move to create the designs, font styles, imagery, etc. This leads them to create style tiles which can then be easily coded and be transferred into html files that are interactive and functional online. Other than the similarities between wireframes and schematics, each element discussed here are very different in the design process.
Another way I can describe how each element works in its own way and differs from each other is through the process of advertising and graphic design. As an ad major, I have gone through this process many times in an educational environment. When beginning a design, I tend to try and research information about the subject and create a creative brief, which tells me what the goal is and how I can target different people. This layout is the site map stage of creation, as I have a way to see how I’m getting from the main point to everything branching off. Then, an advertiser moves into a process of deciding how to organize the creative information in an ad. By setting up text boxes and sketching out how the images will be placed, I am creating a physical wireframe and schematic. Once I have the images ready to be placed and information typed out, I can place them within the framework I have set up to see how the elements work together and information is organized. Finally, I have my style tile.
Each of these elements are different when it comes to web design, but each has a very important place in the creation of a website. Without these steps and design comps, a developer can get lost and unorganized, which is a borderline sin in the web design world.
Chris Sallas / ADVE 253 / Blog Post #5