Fundamentals of Web Design (Blog 5)

When building a website there are certain terms that help you organize and create it well. The first term is a sitemap. A sitemap is a list of all the web pages that will be accessible by the user. A site map is designed with a hierarchy look. This makes it easier to understand and maneuver through. A program that I recently used that has a great sitemap function is Adobe Muse. When you begin the program this is one of the first things you’ll see.

financial_website_sitemap

The pages are added as you develop more of the components. So once you have the sitemap completed you can move onto the page schematic. This is where you create the graphic diagram for the website. The schematic will not have the actual images just representations of them. It will be very simple to be understandable. It even includes instructions on how each icon and frame will function.

Wirefame-diagram

The next step is very similar and that is the website wireframe. This is the framework for the website. The wire frame is sort of like the floor plan of your website. This process helps you focus on where the information will be, how you will display certain items, the effects you may use on your site, and the general design. This step is also important because it lets you know how the user will interact with the interface.

CNN-International-Original-vs-Wirify-wireframe1

Soon after you have created a sitemap, page schematic, and the web wireframe you can move on to the style tiles. Style tiles are the visual representations to the website. The usually include typefaces, color pallets, and style choices. The style tile is the detailed visual aspect of the page where the wire frame was the fictional aspect. With these mock ups you could easily create the webpage. In reference to this class we have made many style tiles that have allowed us to understand visually what we wanted and make decisions early on before we began to code and create the finished product.

Style-Tile

As you move along the website creating process you will see how each step relates to the other and works together. Without any of these steps your page will not run as smoothly nor will your ideas. It is important to follow the rules and guidelines. They exist to help you maneuver through this phenomenon we call the web.

Advertisements

Published by

wakeupmomo

I'm just a person tired of standard. The everyday required. Society expectations. So I'm going against it...... or at least writing about it

One thought on “Fundamentals of Web Design (Blog 5)”

  1. I think you did a good job explaining the difference between a page schematic and a website wireframe. While both are essentially the same in nature and almost in appearance you picked out the minor details and expanded upon them. Like how the page schematic includes some type of written or drawn instructions that go more in-depth in the explanation of the page more-so than just wireframes.

    Like

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