Projects > Project 3
Project 3 -- Site design brief
See also:
In the final project you'll design a site for a 'client'. Your client (who might be you) might:
- Know a little, or a lot about what you can do with HTML,
- Have a fairly strong idea of what to do, or not,
- Work closely with you, or only review final drafts,
- Want a finished product, or might be more interested in having you teach them how things are done (they will likely be maintaining the site).
Your (project 5) website will consist of about 4-8 web pages (that is, roughly 4-8 'topics') in addition to a 'home' or 'core' page. It's important in this project that you work with navigational problems. Other assignments will deal with page creation--but this is your chance to work on organizing information with a realistically sized body of content.
Meet with your client
In your initial meeting, when you meet with your client over coffee*, you should communicate the deadlines and constraints that will limit the scope of the project, and gather as much information as possible about the content your client would like to include in the website.
*Lon Sherer asks, "Don't all design meetings take place over coffee?"
Initially it's important to find out all you can about the content of the site. We'll worry later about structuring the content. Does your client have photos or slides that will be need to be scanned? Word processing documents that need to be converted to HTML? Forms that they'd like on the site? Bibliographies, or web bibliographies (that is, collections of links) of related topics that they'd like to publish? Corporate logos? Wish lists of things that would be nice to have available?
It's also not a bad idea to have some discussions about what sort of websites your client likes or dislikes (if they've browsed much).
Eventually, your client will have to do the work of gathering the content and answering your questions about how it hangs together. Your job will be converting things to an appropriate and attractive web form, and organizing for easy browsing. It's an advantage that you do not have intimate familiarity with the content, since it puts you more in the position of the people that will likely be browsing to the site!
Write up a design brief
Begin a site design brief. This is a (web)page of notes about your website. Review the site design process. Your design brief should initially include the kind of information about goals for the website, the information architecture, and notes about available content. Eventually you should link to your Photoshop sketches (Project #3 and stage 3 of the design process). Your site design brief should contain:
- Your client's name and contact information (phone, e-mail),
- A brief description of the project, including a purpose or goal,
- A list of any sites that you or your client identify as similar, or having characteristics or features that you'd like to use.
- A list of graphical resources for the project--what is needed, where is it available from, what you'll have to do to get it in shape for the web.
- A similar list of text, or content resources.
- Who might end up at your site? Write up a "20-second drama" about how someone ends up at your website. Fill out the character a bit of the person viewing the content of your website.
- An outline or sketch of site organization. What will the main topic of each of the subsidiary pages on your site be? How will you link them?
- A list of keywords that you'd like to have lead searchers to your site.
- A brief description of how much maintenance your pages are likely to need, once your project is finished. How might this be arranged?
Create three 'sketches' of the home page
Create and link to three sketches of how the home page of your
website project might appear. Pick three rather different
design treatments based on our discussions of design.
Think of your sketches as "collages", where you try different arrangements,
and different visual treatments of your subject. Some of the content for your
sketches / collages might include:
- scans of pencil/paper
sketches of parts of your page, or items that you use for their visual design
characteristics,
- screenshots from existing websites that you crop down to one piece that
you want to use.
- digital images that you've received from your client or taken yourself.
- web graphics of lines, of text, of simple shapes that you can easily
make in Photoshop.
You can embed different pieces in layers that you can move
around, and try positioning in different ways, using probably one of these
technologies (one or the other, probably not both):
- In Photoshop you can embed different things in "layers". Save your
sketches for yourself as .psd files, but make a .gif, .jpg, or .png copy
of each sketch that you can link to from your design brief.
- In Dreamweaver you can embed images or text in "apDiv"s. If you
use Dreamweaver (instead of Photoshop) to "sketch", you do not need to worry
about the web pages being coded correctly or that you're using a well constructed
layout "container" correctly to position things: the point of this assignment
is to quickly sketch and be able to try out different visual design ideas,
not to worry about the details of the best way to code those.
Think about...
- Composition -- Do colors/line/other design elements on one part of your
page refer to anything else on your page?
- The visual hierarchy -- Does your site announce prominently what it's about,
and somewhere in the "prime-screen-real-estate"
above the fold?
- Not only what fonts you'll use in banners or for navigation, but what HTML
fonts/colors will be compatible with these choices. (Include a bit of mock
html text content).
- Typical things you put on home pages: contact information and a
"tag-line" to let folks know what your site/organization is all
about in a sentence or less. A logo. Some strong visual image? Links to the
different sections of the website....
Link your sketch images to your site design brief, and post the URL
to your site brief on
Moodle.