Each folder contains bare basic HTML, CSS, and images to get started. These templates are in HTML5.

The following describes what is in each layout:

1. Top banner image area with side bar on left, content in middle, footer at bottom and centered on page.
2. Top banner image area with side bar on right, content in middle, footer at bottom and centered on page.
3. Top banner image area with side bar on left, content in middle, side bar on right footer at bottom and centered on page.
4. Top banner image area with navigation bar below, content in middle, footer at bottom and centered on page. Additional css code is available to create side bar on the left if the main content div is made smaller to accommodate a new div.

Then understand how the position property works here: http://www.alistapart.com/articles/css-positioning-101/

After that, read up on how to use the float property with layout: http://coding.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/

Good layouts will use a combination of positioning values and floats.

Now if you want to use a css framework to help speed up the layout process, I recommend 960.gs. I would only do this after you understand the things mentioned above. There are other alternatives out there too that fit different resolutions.

Also for hover effects to menu items, I strongly recommend using sprites for menus–here is a tutorial here: http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites.

http://www.kenwilles.com/files/web-questionnaire.doc

Download it here: http://www.kenwilles.com/files/form-validation.zip

Double click on the index.html page to get started.

In this document:

• Hierarchy Modeling
• Understanding the Grid
• Divine Proportions
• Why We Need to Make Hierarchy Models
• Screen Size Requirements

Hierarchy Models

Let’s take a look at what a hierarchy model looks like before getting into more details. The picture below shows 4 hierarchy models for a website that showcases the internet’s history.

Figure 1. Hierarchy Model Example

In the first example, the hierarchy model indicates that a title will go at the top of the page. The image is placed on the left with text and an in-line scroll bar on the right. At the bottom, the sub-navigation and search bar; and the very bottom layer contains the timeline.

Look at the rest of the examples and notice where the elements of the page are placed as well as their dominance in the overall layout.

In the 3rd example (top right), the picture next to the text is the smallest out of all the other layouts but the timeline is also much bigger. This change indicates that the timeline is at the top of the hierarchy in terms of size and gray-scale color.

Also note that simple labels are used to make the diagram clear.

After a layout was selected, the details were added and this is a picture of what the finished website looks like. Notice that hierarchy model #2 was selected for the layout.

Figure 2., Finished Website for Internet Timeline

Another Example, Outdoor Leadership

Let’s look at another example along with the finished website. The picture below shows hierarchy models for SAU’s Outdoor Leadership website.

Figure 3., Outdoor Leadership Website Hierarchy Models, options a-c.

After discussing the different layout options, Outdoor Leadership decided to go with a layout. The chosen layout influenced what we see today (reference fig. 4 below). Which hierarchy model do you think was applied to the design of this website?

Figure 4. The finished website that was based on hierarchy models.

The hierarchy models are an abstracted level of design. The models provide just enough details to show where things fit. Later on in the creative development of the website, the design details like color, texture, photos and illustration are added. In like manner, you will follow the same process for the design of your portfolio website.

Understanding the Grid

Within these Hierarchy Models, there is also an underlying grid that is being defined. This grid helps the designer to align objects and text and is fundamental to achieving a consistent user-experience throughout the website.

It would good good to read the book titled Making and Breaking the Grid: a Layout Design Workshop.

Divine Proportions

As you start designing your hierarchy models, you will also want to apply the “divine proportion” to it. The following article from Smashing Magazine explains how to do this for websites.

Challenge: Find a website on styleboost.com that you like and expose the underlying divine proportion by drawing transparent boxes on top of the screen capture.

Why We Need to Make Hierarchy Models

You know about Hierarchy Models now, but it may not be evident as to why you need to make them for this project. Does it seem like a needless, extra step? I don’t think so. Let me explain why I think it’s vital to the success of your project.

The hierarchy models are like thumbnail sketches that lead you to great ideas. Remember in design class, when you had to sketch almost endless thumbnails by hand? What was the purpose of that? It was to help you generate good visual design solutions for your design project. Without a good concept, your project will turn out looking terrible. In the same way, your hierarchy models will help you generate good concepts upon which you can design with. The hierarchy models, therefore, are a replacement for thumbnail sketches. You welcome to create thumbnail sketches before working with the design of the hierarchy models, but for the purposes of this project, that won’t be necessary.

The hierarchy models help you generate layout concepts quickly. It’s much faster to arrange abstract objects around on screen than it is to confront yourself with color matching solutions, the right photo to use along with the accompanying text.

The hierarchy models force you to think about the underlying structure and its importance. Sometimes, as designers, we can spend lots of time just picking a texture we like when we haven’t even considered the other items that will be in the design space. Texture is important as it draws attention to certain areas and adds variety to the overall design, but if the overall picture has not been considered first, the design element may not fit anymore. In like manner, the hierarchy models helps you focus on arriving at a fundamental solution to the design of your portfolio.

Another way to think about the underlying structures is in architecture. If you ever plan the design of your future house, you will look at different house shapes from a top down view. This allows you to adjust the layout of the different floors. By doing this, you’ll be able to figure out where the kitchen goes and then the dining room, etc. With the architect, you can move these objects around to see how different items affect the space. Once the layout is in place, you start deciding on the decor and other details that come later. Think of the hierarchy models, therefore, as deciding factors for the best floor plan.

Screen Size Considerations

The most common screen size is 1024 pixels wide by 768 pixels tall–an overwhelming majority of internet users already view things on their computer at this size of an area or higher.

Summary

• Creating hierarchy models is a quick way to arrive at good layout solutions.
• Sticking to a grid makes your website’s design more unified across the pages.
• Applying the divine proportion to the hierarchy models will make your design more pleasing to the eye.

It is now your turn to design your own hierarchy models for your website. Incorporate the things you’ve learned here into your future website designs.

There’s a lot of information that you’d like to communicate to your potential employer and so you’ll need to organize it in a way that makes the most sense. Not only that, but organizing your information will also result in a project plan or checklist of things you will need to integrate into your website.

What you’ll read about in this post:

• Sitemap Examples
• How to Create Your Sitemap (Using Mindjet Mindmanager)
• How to use the sitemap to communicate progress with to your client

Sitemap Examples

You’ve probably seen a website with a sitemap link that, when clicked on, sends you to a page with a bunch of headings and page links under those headings. Check out Wired.com for an example of a website sitemap (the link is at the bottom of the page). This style of a sitemap provides an easy way to browse for things as you would in a directory in a phone book or mall. You will be making a sitemap similar to Wired, but the style is going to be more detailed and specific for the development process of your digital portfolio and will be in the format of a chart instead of headings and sub-headings.

Let’s take a look at an example of a sitemap for Southern Adventist University’s School of Visual Art and Design’s website. Click on the image below for a detailed view of the map.

Note that the main node in the center reads "Art Sitemap." All the top-tier sections of the website like "About Us" and "News + Events" descend from that node. Compare this sitemap to the finished website. Do you notice any similarities of the sitemap to the navigation of the website? In the "About Us" section, for example, you will find pages under it titled "History of the School" and "School Philosophy."

This style of node-based charting is called an organizational-chart –it shows hierarchy and categorizations clearly. This is the kind of organizational-chart style you will need to make for your website except it won’t be as complicated as the one above (unless you wanted to make it that complicated!).

Using a node-based chart also creates a project plan document. If you look carefully at the larger image example, you’ll find that there are checkmarks and labels with people’s names in them. The checkmarks indicate that a section of the website is done, the person’s name next to the node represents who is responsible for getting it done. In your sitemap, you will be the one getting everything done, so you don’t need to use this label, but you will want to use the checkmarks as you go along.

Here’s another example.

The "(1) Creating Your Strategy" section is the only thing that is checked off on this view and "(2) Designing Information" is a quarter done.

The example above is known as a tree style chart. It’s good for information that has a sequence to them which is why I used it for this course –I’m taking things step by step.

How to Create Your Sitemap

Mindjet MindManager is the best software on the market for creating sitemaps and in this section I will show you how to use it. There are also other alternatives like mind-meister, google drawings (free), lucid chart.

In the previous unit, you created a categorized list of portfolio items in a program like Microsoft Word. You will want to use that information to create this sitemap. I’m going to use a fictitious, short list of portfolio items.

#1. Create a New File

Open Mindjet Mindmanager and create a new file by clicking on the new page icon at the top left of the screen.

#2. Rename the Central Node

Click once on the central node and type the name of your website.

Press enter to commit the text.

#3. Create new nodes

With the center node selected press the enter key to create new nodes.

Press the enter key again to create a few more nodes around the central one.

#4. Use the Organizational Chart Format

So far we’ve created nodes around the central topic, but it doesn’t look like the top-down organizational example from the art website. You can move the nodes around by clicking and dragging them, but they stay constrained to this right map node structure.

Changing the chart style is easy. With the central node still selected, go to the format tab and select the growth direction of org-chart.

Your layout should look similar to this:

If your map didn’t automatically adjust to a layout like this, make sure the central node is selected first before clicking on the Format > Growth Direction menu.

#5. Enter Category Names

Rename the new nodes by clicking on them once and type in the names.

If you need to create more nodes just press the enter key. If you need to delete any of the nodes press the delete key (this is different than the backspace key). Or you can remove a node by right-clicking on a node and select "Remove Topic."

#6. Create Nested-Nodes or Sub-Categories

Inside the work category, you’ll have sub-categories and specific portfolio examples within those sub-categories. To create these subnodes click on the work node (yours may be different) and press insert (or shift + enter).

You can easily create more sub-nodes by pressing the enter key.

Following this process of inserting child nodes and making more nodes will enable you to flesh out your portfolio structure.

#7. Organize Nodes

You can always click and drag nodes into other nodes.

And the result here:

How to use the sitemap to communicate progress with your client

Once you start getting to the content gathering milestones and onwards, you will want to supply completion checkmarks on your sitemap to communicate with me, the teacher.

It’s easy to add this information, just right click on a node and select icon markers in the list.

And this is what it looks like when the check-mark is added.

This indicates that the "Living Simply Logo" is finished. If you click on the checkmark it will change to different percent completion pie-chart indicators.

You can also add other markers to nodes like Notes, Callout Topics, and Text Markers. These additional markers will enable you to add more information to a particular node.

Summary

Please keep the following pointers in mind when using the sitemap

• Sitemaps organize information in a clear fashion.
• Sitemaps evolve over time.
• Sitemaps are a good communication tool.
• Sitemaps help determine a plan of action.

So here is an ultra bare bones starter package to get going with: http://kenwilles.com/files/different-base-layouts.zip

1. Absolute positioning layout–this layout allows for placing the content exactly where you want it.
2. Centered page layout–sets the context in a “container” from which everything is centered in the browser view-port.
3. Centered page with absolute positioning layout–this centers the page and also allows for absolute positioning items. Note that for this one, you’ll have to specify the height of the container because absolute positioned items are removed from document flow.

http://rocketlinkmobile.com/