Class on 11.21.13 Thursday

Class on 11.21.13

Today we are going to start the class on project documentation. Then go back to looking at CSS layouts with some of the files from last class.

Midterm Projects

I have graded all that were turned in. I had an error with my feedback file, so I have to redo some of that. I hope to have it corrected by tomorrow morning.

Project Documentation

Project Proposal

The normal process is that the client comes to you with a brief or a request for proposal that outlines what kind of site they like. This can range from very formal process to just someone telling you they want you to make a site, talking to you about it and shaking hands on doing the project.

In this class you have the project requirements instead. Because a lot of the requirements are technical and not too typical for a project, I’m going to outline a few of the major ones you should consider when planning what your project is going to be about.

  • Pages: At least 4 pages
  • Content must be about a person, place, thing or idea. And it should be something specific.
  • Content must be different than the midterm. It’s OK to have a similar subject as long as the content changes.
  • You must attribute all media used: text, images, audio, video. Even if you create that media yourself. So when choosing your topic, choose something where you can find media.
  • Must use at least one audio or video element. The element must have controls and not start playing automatically, and it must make sense to include. It should either be directly related to the topic or, in the case of music, help to set the atmosphere you want for the project.
  • The design of this project will be more heavily graded, with more emphasis on the visual design things like alignment, typography etc.

After knowing what your site is about you have to plan

  1. Who will the audience be? Why will they want to see the site?
  2. What pages will be on the site
  3. What content will be on each page
  4. What the design will be like including layout of content and the visual appeal/atmosphere

To document your ideas for the above you will create a proposal with

  • A written description that address
    1. The topic of your site
    2. Your audience, who they are and why they want to visit your site
    3. A description of what you want the design to look like
  • A Sitemap diagramp to show the pages
  • Wireframe diagrams for each page

Sitemaps

http://webdesign.blogs.peopleio.net/planning/sitemap/
These are diagrams where each box represents a page on the site. It allows you to quickly show what pages will be on the site

Tool:
http://slickplan.com/

Wireframes

http://webdesign.blogs.peopleio.net/planning/wireframe/
These are detailed diagrams. One for each page in the Sitemap.

Tools:
Photoshop

https://marvelapp.com/

- this lets you link images and psd you have in dropbox and then turn them into clickable mockups quickly
- free, need Dropbox account

https://moqups.com

https://wireframe.cc

Mockingbird: https://gomockingbird.com/
- web based, 1 free with 10 pages then monthly

Pencil

http://pencil.evolus.vn/

free and OS, both desktop and Firefox based versions

http://wireframe.talltree.us/default.asp

http://www.mockflow.com/

Plan for rest of the semester

I have a page up about that:

CSS Layout.

We will contiue work from last class

Leave a Reply