Project Plan

Web sites are about presenting information. All the layout, formatting, whitespace, borders, colors, etc are used to organize, and present information to our audience. We will approach that organization and presentation differently to different audiences; i.e. a 5 yr old learning the A,B, Cs or a CEO learning the basics of web design. The Project Plan helps us plan out what the goals of the web are BEFORE we commit any of our time to coding. Coding is simply the medium we are using to implement our vision. We need the vision first.

Use the project plan that was supplied in the unitA.zip file as a template for yours. There is some information about timeline and budget. You won’t have that information now so include the headings but just put in a place-holder like TBD (To be determined).  The main information you need to think about is:

1. What is the purpose of the web site; i.e. it’s goal(s)? What do I want it to do for me?
2. Who is my audience?
3. What content will I have on the site? This gets back to the goals and the audience. What does my audience want? If I’m creating a portfolio, what does my audience (perspective buyer/employers) need to know about me, my work, my process, my fees, my availability, my turn-around time, i.e.. They want to see my work, yes. But they also want to know other information as well. What is it? Answering those quesitons will help you determine the content of the site. Once you know the content, you can start organizing it and presenting it.

Storyboards

The term storyboard means different things to different people. A storyboard for a web designer is different than a storyboard for a movie or animation. In film a storyboard tells the story visually. It demonstrates how the script (written descriptions) will appear on screen. A storyboard to a web designer lays out a rough interface and shows the organizational relationships between pages or screens. Again, it is a way of organizing your project visually.

At the top of page 5 (figure A-2) in your book, it shows a fundamental layout of a screen. Using boxes it simply is trying to indicate how the information will be organize on the screen. The author is using the term storyboard. Most designers would use the term “wireframe”. Here are some more examples

• http://webdesignledger.com/wp-content/uploads/2010/05/sketched_wireframes_5.jpg
• http://creately.com/blog/wp-content/uploads/2012/03/Wire-frame-example.png
• http://designmodo.com/wp-content/uploads/2011/09/Web-and-Mobile-Wireframe-Sketches-9.jpg

The figure underneathe that show the relationship of the different pages. This is important if you have more than one or two layers of heirarchical information. It helps you figure out how to set up navigation. Here’s another example: http://www.mrlee.it/U1O3/storyboard-example.gif. A storyboard for a web site mostly shows how pages relate to each other; it indicates how the information is unfolding. Here’s another one… http://www.boardofstudies.nsw.edu.au/syllabus_hsc/img-ipt/storyboard.png. Notice how some give more information. Some give less. All are starting points for design considerations. If you are the only one that is going to see it, the storyboard can be rough. It is  your way of thinking the project through. If you are part of a team, or are communication your ideas to a client, the storyboards need to be more polished. Why? Because you are communicating your vision and no one can see inside your head. Make it easy for them. The better you can help them visualize what you see (without a complete mockup), the better you will be. It’s always a trade-off of time vs utility.

I typically draw rough sketches to help myself think it through. Depending on how “rough” my initial sketch is, I may tighten it up before I show stakeholders. I can see what’s not on the page, most clients can’t. They see exactly what you have. Be careful about what you show your client.

File formats? I recommend uploading project plans, sketches and storyboards as pdfs. Why? they are easy to read on most devices. pdfs are also rendered pages, i.e. as if you sent them to a printer. You can’t assume I’m using the same word-processing software that you are. OpenOffice formats a little differently than Word, or Pages. By printing to a pdf file, you ensure that what I see is what you see. That’s the idea right? A share vision.