Blog Week 5

Site maps are a visual or textual organized model of a websites content. This model allows the user to understand how to navigate the site and find what they are looking for. It could also be compared to a table of contents because it tells everything that you will find when visiting the site. Site maps are typically organized hierarchically breaking down the information into specific areas. There are different types of site maps. The first ones are organizational charts are similar to table of contents that could look like a three dimensional model with individual pages upright linked by lines. The second one is Structured Graph Format (SGF) that use an XML format language to describe Web site content, and java to interact with the data.


Schematic diagrams are representations of elements of a system using abstract graphic symbols instead of realistic pictures. Schematic usually omits details that are not relevant to the information that its conveying. It could also unrealistic elements to to add comprehension.


Wireframes are very important in any screen design process. It allows to define the information hierarchy of the design. It makes it easier to plan the layout according to how the user its supposed to process the information. Wireframes are like architectural blueprint; its supposed to be seen it in two-dimensional black and white diagrams. Similarly for a screen design, its impossible to start coding before know where the information is going to go. At a deeper level, a wireframe is useful in determining how the user interacts with the interface. For example, wireframes can contain various states of button or menu behaviors.

Wireframing is important because it allows the designer to plan the layout and interaction of an interface without being distracted by colors, typeface choices or even copy. All this can be decided after there is a complete understanding of the site in black and white.


Style Tiles are a visual reference to the design language of a website (or other design deliverable). They help tell the story through typefaces, color choices and style collections. A successful style tile should contain sample user interface elements, define a color scheme, show how the principles of typographical design will be used and demonstrate the relationship between the brand and the proposed visual solution. Style tiles are the connection between the designer and the clients and they should translate what the client is and define it in a very creative and cohesive way. Style tiles offer a starting point to help define what a website will look like, in an accessible way that clients can understand. They could be defined as a mix of a mockup and a mood board. They help to define the way the styles are gonna be used throughout the website.


Sitemaps, schematic, wireframes and style tiles are very important when creating a website. They are basically steps that we as designers need to follow in order to create a successful solution for the client. Sitemaps should be the first thing that we need to do because they would give us a better understanding of what the map is going to be and how it is supposed to be navigated. This process its important because its here where we can play and determine the journey we want the user to have. Schematic even tho i have never use them seem important to determine whats important and whats not relevant in the site that we are designing. In the next step that would be the wireframes are really important to have a better understanding of how the site is going to be arranged. I have done many of these and the most important thing is having a variety of option because thats how we are gonna be able to choose the right one for the client. Several times i would just combined different wireframes in order to create the most appropriate one. The site must be understood in black and white in order to work with colors and that kind of visual elements. All this steps allow the designer to edit all kinds of information. In the last step which are the Style tiles is where the designer is going to start exploring the visual solutions to the website. Its important to keep in mind that every visual element should represent the client. From the type choice to the use of colors. The imagery is also a big deal because those are the elements that are going to stay in the users mind. Like the previous steps, the designer has to present different solutions to the client because thats how the client would know that the designer actually understands the essence of the brand. By the end of the thinking process the designer would have to have a clear understanding of how the website is going to work and the only step missing would be actually putting into the web.


One thought on “Blog Week 5”

  1. You gave great picture examples for this week and really went into detail about the definition for each step to take before creating the actual website.


Leave a Reply

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

You are commenting using your 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