Michael Michael

We talked wireframes the other day, and below are a few examples of how to start with the basic architecture of your sites.

This may seem overkill as you think that you can easily wrap your mind around what your portfolio site will include and how it will come together.

This is good practice though, especially if you work on integrated Web packages in the future that include audio, video, images and text.

At that time you’ll have to consider what content goes where, and how users get to that content (i.e., how they’ll click around to get from point A to point D).

Remember that wireframes are like blueprints. They show organization, not design. You can view the relationship between the two here.

You can use paper for this, or Photoshop if you want to continue learning how to use it before we meet again. In our next class we’ll flesh these out and begin to add the design layer on top of it.

For more complex projects, design architects often use Microsoft’s Visio (PC) or Omnigraffle (Mac) among others.

Remember as you do this, especially as you create navigation, that you might have future categories that you’ll want to add. This means that you’ll have to think ahead and allow for space to let your site grow.

Examples

Home Page 01 — Absolutely stripped down to a bare minimum. (View)

Home Page 02 — A variation on the Home Page, but now fleshing out where content is actually going to go, and what the content might actually be. (View)

Category (or Index) Page — An example of a category home page (commonly referred to as an index page, e.g., what does the Print index page look like). This shows how articles could be listed. (View)

Content Page — How are you going to actually present your clips? And if someone is reading one clip, how do they get to another in the fewest number of clicks? (View)