Why Plan a Website?

In this course, you will design two websites. The first (your midterm project) will be a simplified site for an imaginary museum. The second (your final project) will be your professional portfolio.

For each, you will need to create a mockup in Photoshop or Illustrator. Then you will code the site in HTML and CSS.

But before you even begin to arrange text and images on the screen, you need to prepare.

As designers, we need to understand each project fully, beginning with: what are we trying to communicate, and who are we trying to communicate to?

Today we will look at a robust planning process that will help you maximize the results of every web project you do. I will give you some tools and methods that get you ready to do professional web design work.

When you prepare thoroughly, get all your ducks in a row, before doing what we casually refer to as “design”, you truly save time and headaches in the long run. Really.

Design Funnel

A road map of when to use which tools to stimulate better work.

Design Funnel PDF

  1. Define Values and Goals
    • Why does your museum even need a website?
    • What passion inspired the museum to exist in the first place?
    • What 3 key phrases identify how this museum is different from all the rest?
  2. Discover Moods and Metaphors through Association
    • Write your key phrases at the top of three columns on a sheet of paper.
    • Without allowing any negativity or filter on your thought process, write in each column other words, concepts, or phrases that the key phrase inspires. Seemingly random is okay; you can worry about weeding later. Pour out tons of words to fill the page.
    • Now go through your page and circle all the words or phrases that seem to capture the essence of your museum and its audience. Especially focus on words with emotional impact or that spring happy thoughts.
    • Finally, go review your answers to step 1. Do your circled concepts jibe with those needs and passions?
  3. Generate Ideas and Define a Concept
    Now that you have lots of words and phrases that form associations for your museum identity, define an overall concept for your site design.

    • Spend some time looking at a variety of designs from architecture to fine art to fashion.
    • Further contemplate your phrases by looking at examples of their opposites.
    • Look at websites for other museums and try to articulate what the design concept is being used.
    • Look for websites that use your phrases but in entirely different industries.
    • Jot down a number of ideas that capture a design concept/theme/visual metaphor for your site. Contemplate them before deciding on a single direction to go.
    • Try defining your design concept in a single sentence.
  4. Create a Visual Language
    Jot down some notes about the following design elements, prior to using tools such as Photoshop to put them into use in a mockup. Then loosely play with them a bit on the screen together.

    • Types of images
    • Color palette
    • Choice of font and style of typography
    • Page form/shape
    • Specific layout – wireframes
  5. “Design” It
    This is the part of the exercise you will actually do as the Museum Home Page mockup starting next week.

Preproduction: Wireframes

When planning your site, you must do a lot of research and then begin drawing some rough layouts. The research involves discovering as much as you can about the company, topic, or other entity the site is about, its intended audience, and the scope of the site (how big and complex it will be.) Then you can figure out how to break the web pages out into page content areas.  You did this last week in your Project Home Content assignment.

wireframe sample for a news site, gridless

Once you’ve decided upon all the content areas that are appropriate for your site, it’s time to draw up a few wireframes. A wireframe is an illustration of the layout of fundamental elements in the web page’s interface. Typically, wireframes are completed before any additional artwork is developed. Carefully planning your overall layout, before you create any graphics or even select color palette and typography, can eliminate a lot of headaches later on.

Wireframes can be created by hand or by using a variety of software programs. Visio is software that is ideally suited for wireframing, but it is expensive. Sometimes designers simply use Word, Excel, or Illustrator.

Wireframes need to achieve a balance between being too detailed and too general. A wireframe that is too precise may leave little creative room for the designer. A wireframe that is too loosely defined can be misinterpreted by designers and developers. The wireframe format used should be dependent upon the audience.

Student Work

Click through for a larger version of each image.

Wireframe1 Wireframe2 Wireframe3

How to create a wireframe:

  1. Decide on which page elements will be included (again, you did this last week in your Project Home Content assignment.)
  2. Use a ruler or draw carefully to indicate the placement of the various page elements within the browser. Take your time to show clean boundaries. Imagine that you will be submitting this work to a paying client. Some of the content may go below the bottom of the browser window; go ahead and show the entire page above and below “the fold.”
  3. Label each of the page elements.
  4. Each wireframe for a given project should include the same page elements, which were previously determined.
  5. Instead of drawing, you may use software instead—-but take care to include all of the page elements, and label each element. Don’t get too detailed! There should only be rectangles and labels.

Preproduction: Site Structure Diagram

Create a tree diagram showing all of the site’s files and folders in a hierarchical structure. Here’s how I want to you create yours:

  1. Decide what topics will be on each of your website pages (home page plus four more).
  2. Draw your root folder at the top: draw a wide/landscape-oriented rectangle and write its name underneath it.
  3. Draw a vertical relationship line down from the root folder and connect it with a long horizontal line.
  4. Draw short vertical lines down from the horizontal line, one for each file or folder within the root folder.
  5. Under these vertical lines, draw a rectangle for each file or folder within the root folder. Be sure to use the correct orientation: use wide/landscape-oriented rectangles for folders and tall/portrait-oriented rectangles for files.
  6. Label each folder with the actual folder name you intend to use, and each file with the actual file name you intend to use. Make sure your home page is named index.html, and that you include a styles.css stylesheet file and an images folder.
  7. Most designers will do many wireframes for the same page design, trying out alternatives for carving up the browser real estate, and ruling out the least optimal ones.

Remember our file and folder naming conventions:

  • No spaces.
  • No uppercase letters.
  • No special characters other than – or _.
  • No period except where it immediately precedes the file extension (e.g. index.html).
  • Use meaningful file and folder names, as they are “read” by search engines.

For Simple Sites

This diagram would be a good pattern upon which to build the diagram for your museum website. Remember to rename the root folder as well as the html files that are not index.html. This diagram will help you build your site structure as well as your menu navigation.

site map sample

For Complex Sites

For more complex sites with many categories of content, you may need to collect groups of pages within subfolders. Each of these subfolders should also contain an index.html to serve as the default page for that folder. This diagram is for a more complex site than the one you will complete in this class. Click for a larger version.

complexsite map sample