Dustin Bramlett / Blog Post 5 /

It is crucial that you follow a few guidelines and rules to help guide your thought process and ideation in order for your website to be successful. A site map is a visual or textually organized model or representation of a website’s content that is used to describe the navigation one takes through the site to find each page of content. Think of it like a geographical map like the one on your smart phone. It is used to help people find a specific location they are looking for and it gives you steps in order to make it easier for you to get there. As you can see in the examples, a site maps is a very brief, simple, and straightforward diagram of the navigational steps one takes to get through each page of a website. Think of it like a shopping mall. Most shopping malls have a visual diagram that are centrally located all around to help you find the stores you are interested in going to. Usually you have a “You Are Here” image, think of this as your home/landing page of a site. But say you want to go to Dicks Sporting Goods on the other side of the mall, well you look at the simple diagram and it shows you how to easily navigate your way there. That’s what your site map should do. However sometimes site maps can be unnecessary. Like how smaller malls with three stores may not have a diagram because it is self explanatory. This is always the starting point when designing a multiple page website. You must know the direction in which you have to travel before hand so you will not have to double back because you made a wrong turn.

example_sitemap_large 3960540_orig

After creating your site map you can move onto the schematic or wireframe of your site. These terms often getting confused with one another, because both represents the nuts, bolts, and functionality of each webpage without incorporating design(CSS) elements. The main difference I believe is that schematics or schematic design represents more of what exactly the website is supposed to accomplish. So whether you’re creating this website for a client or for personal use, after you define how many pages you want it to have, and complete the site map based on the specs including budget and content; you need to then decide on how you are going to go about accomplishing this. Think about how many levels you’re going to have within each page, think about what content is going on what page. Get your game plan in order. Then comes your wireframes. You begin to start designing out more of the finer details within each page. Like placement and arrangement of content, and where everything should be placed to be the most successful. You start asking all the placement questions and try multiple variations or your ideas for the framework. However, this is still not the phase where you begin to question color schemes, actual content wording, and type styles. Schematics and wireframes are only used to establish how the each webpage is organized, operated, and functioned. Look at the examples I included to get a better sense of what this phase is supposed to look like. Think of it like you would architecture. You start by sketching, designing the blue print, then you move into the more detailed schematic design which include: floor plans, square feet, and accessibility. Rather than focusing on wall colors, buying/arranging of furniture, floor type, and all the other aesthetic decisions. Wire-framing is where you plan your online space using boxes and placeholders that establish functionality. You would never start designing the interior of a house before the exterior walls are built and you can get a feel for the created space.

wireframe1 3345425396_cdc4576dbc_o

After all of the ground work is done, then comes the fun part. Now you start playing around with style tiles. These are the visual references to the design language of the website. They help you tell the story! You do this by deciding on fonts, define a color scheme, and how typographical design will be used to convey the message you’re designing for. Most style tiles include style collections of all the different finishing touches that are arranged together so it can all be easily represented. You see this in the examples I included for you. If I could explain style tiles in one sentence it would be; style tiles offer a flexible starting point to help convey to the client in a accessible way what the website will look and feel like. You don’t have to include every image, every roll over, every sentence, every headline, and every link. When pitching websites to clients usually you will want to pitch three or more different style tiles for them to view, so they have options. It also gives you the opportunity to have a higher probability to be chosen over the other guy.

end1           end3end2

As you can see, each of these terms has a unique ability and function when creating a website and are very different. Without one you risk the successfulness of your website design. Hope this explanation helps! I defiantly learned from this research.

Dustin Bramlett | Blog Post 5 / Week 5 | 2/7/15


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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s