Project: Framework for your eMe

Where are we?

We’ve talked about setting goals for a site, and creating a framework that includes information architecture, page layout, and look-and-feel.

This lesson’s goals

Decide on your eMe’s:

  • Information architecture
  • Page layout
  • Look-and-feel descriptors

Then find a design that works.

Information architecture

Decide on the main sections of your site. Each section is one page, or a few related pages. What the sections are depend on how you want to present yourself. For example, if “artist” is an eMe keyword, you might have a section (or just one page) to show artwork you’ve made

For myself, I might have the keywords “educator,” “researcher,” “Web builder,” “business dog.” I’d have a section for each of those. I might also have a page about my personal history, and a Kieran quiz, with questions about where I was born, why I had to drop out of obedience school, etc.

Each section of the site might have a button in a nav bar. So my nav bar might be:

  • Educator
  • Researcher
  • Weber
  • Business
  • Personal

List the sections and pages in each section, so you have a tree like we’ve seen before:

Web site structure

Figure 1. Web site structure

You can make the outline in text, too. That’s what I normally do:

  • Home
    • The basics
      • Puppies
      • Older
      • Ill
    • Articles
    • Products
      • Food
      • Treats
      • Supplements
      • Other
    • Blog
      • Archive

Should my site have that many pages?


No. It’s best to start with a few good pages, and then build up. Five or so pages is a good number to start with.

What about your home page? That’s for your elevator speech. A one-minute summary of why someone would want to hire you. This is your basic value proposition. It can’t be longer than a few sentences. Oh, and the best picture of yourself you have.

Other random things:

  • Write down the goal of every page in every section. Write a brief description. Do this before you build anything.
  • Don’t have anything on your site that you don’t want employers to see. They will look.
  • Scan in recommendation letters, and link to the images.

Don’t forget to promote your Web skills. They’ll come in handy in most jobs. Accounting, sales, teaching, engineering, administration, human resources, police, government, military, banking, medicine, legal, retail, ...

Remind people that you made your own eMe site, and host it on your own server, with your own domain name. They want evidence of your Web skills? It’s right in front of them.

Exercise: eMe information architecture

Create the information architecture for your eMe. Make a diagram, or just a list of pages. If you want, write a sentence or two for each page, explaining what’s on it.

Remember the keywords you wrote down earlier? Write them down next to the page they apply to.

Your eMe should be simple, maybe five or so pages. If there are keywords you don’t use, that’s OK. Just write them down, with a note that you haven’t used them yet.

Make an HTML page. Enter the URL below.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Layout and look-and-feel

Draw a wireframe for your page layout, like CC did:



Figure 2. Wireframes

If you have more than one layout (e.g., you might have a slideshow with a special layout), draw a wireframe for each one.

Exercise: eMe layout(s)

Draw a wireframe for each layout.

Create an HTML page with a picture of your wireframe(s). To capture the picture, you can:

  • Draw the wireframe on paper, and scan it.
  • Draw the wireframe on paper, and take a photo of it with your cell phone.
  • Use a graphics program.

Enter the URL of your page.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Write down some look-and-feel descriptors, like “fun,” “smart,” or “serious.” They should be consistent with the image you want you eMe to project. You’ll use the look-and-feel descriptors to help you choose a design.

Exercise: eMe look-and-feel descriptors

Type in your eMe look-and-feel descriptors.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?

Sites like Open Web Design, TemplateMonster, and Free Templates Online have about a bazillion free designs. Look for designs that have the layout you want, and match the look-and-feel descriptors.

You might not find exactly what you want. For example, you might find a template that you like, but has a graphic of an owl you don’t want. That’s OK. You can edit the template, and remove the owl. H00t!

Exercise: Find a design for your eMe

Browse some of the free design sites. Choose a design for your eMe.

Enter the URL of the design you want to use. Each design will have a demo page. Use that URL.

If you find a few designs you like, enter them all. But just a few.

(Log in to enter your solution to this exercise.)

Can't find the 'comment' module! Was it selected?


In this lesson, you created your eMe’s framework. You created an information architecture, made layouts, and chose look-and-feel descriptors. Then you found a design. W00f!

What now?

Now let’s see how you create a site based on that framework.