Homepage

Overview | Design Models | Final Reqs

The goal here is to devise a homepage that will help readers discover your Final Project (all of it!). Since you'll be previewing your project's finished look, we ask you to draft the Midterm Prototype Site Plans Memo as you begin building your homepage.

As with previous pages we've built, you're required to use CSS (and, of course, that will facilitate both revising your design later and applying it to new pages). In most cases, your homepage design will serve as the template for all pages, so keep that in mind: construct your site navigation and overall layout in ways that will work well with other content your site will include. Also keep in mind that you can design the basic look for a design that you're not yet ready to build technically — e.g., if you want mouseover image-swaps, you could construct the space where they'll appear and the initial page-look, and then add the complicated parts later in the term.

back to top

Design Models

Spotlighting tailored content for a specialized audience is usually our aim in this course, so the navigation-heavy designs that are most prominent online aren't good models (that is, classic newspaper-style or institutional-style sites like NYTimes or RU English, which index tons of content and let users browse). Unless you're doing a CASE project for a large organization, you're just not going to have that much content for users to browse!

Try instead for clean designs that make it easy for you to establish a few key connections with your intended audience, as in the following schemes that use simple graphics to set a distinctive tone and lure users to featured content:

• Focal-image sites like Infomine, Rutgers AAUP, or Flickr feature a central graphic — or a few as with Extreme Oil, Rutgers, or the Writing Program — to grab users' attention and relay that attention onto written content. That's the key: deploy graphics strategically to help advertize your writing. Many students have tried this approach successfully, as in Bassosophy.
• Focal-box or blog-style sites like MUG or TPM Cafe confine users' attention within a small, few-frills space, usually with some simple gimmick meant to make users feel "This is the spot for you." The key is avoiding anything shoddy or out of place — maintain the perfect simplicity that says "no BS" rather than "hurriedly thrown together."
• Downstyle-classic sites like Creative Commons or Slate work to soften the "We are important and trustworthy — browse as you wish" look of classic newspaper or institutional style: they use softer colors and lines and user-friendly text and imagery, while still maintaining the sense of rectangular, conventional reliability.

back to top

Final Requirements

1. Save to your "mid" folder and bring a screenshot for peer-review comments.

2. Include some sort of "branding" component such as a logo, banner, or title font that helps establish the site's purpose and tone at a glance!

3. Follow our design priniciples:

• HTML 4.0 layout — just basic elements such as <p>, <h1>, <table>, etc; no excessive markup; and external style sheet.
• Design Baseline (pdf) — essential content fits 800x600, clear focal point & secondary focus identify site content, CRAP, etc.

4. Include brief, user-friendly cues/descriptions so that users immediately understand your site purpose and the content available on important subpages.

5. Include navigation for all (future) subpages: make nav links for all pages that may appear on your finished Final Project (probably 3-4 more than you've made so far) — and don't name pages "Feature" or "Tutorial." Make up your own concise titles.

6. Double-check permissions, paths, and so on: view your page online through Eden and make sure everything looks right.

back to top