DETAILS | Project 5 Web Assignment | PDF
You will design a web site for a not-for-profit event which can build off the poster design you created for Project 2. You cannot use any aspect of an actual website that might already exist for your event. However, you can use logos and photos. All information should be factual. You can also take information provided by the organization in printed or electronic form and rework it, rewrite it, edit it to your own use.
You will create the home page and all the linked pages for your event. The number of pages should be based on your needs. In conceptualizing, first think of all the information that your event needs to have presented. Map it out on paper before you begin. You are learning the technical aspects of this project in lab.
If you think about this design as a series of “containers” it should help you to decide how to proceed. This should be something you map out on paper before building the site. You will build the site in Photoshop and you’ll produce print outs of both the home page and the linked page for submission.
Keep in mind that you must create all the links that your site would require. So decide what information your event needs for the reader before building your site. Your pages can especially use quick reads including bulleted lists, numbered lists, maps, etc. to provide information. This is not a news site.
All the rules about good design that you have learned and employed on previous projects will apply here: good typography, strong use of color; readability; hierarchy; accuracy; use of image; appropriateness of information.
You can create separate elements in any program such as Illustrator, and bring those into your document. You can Place pictures and graphics as in InDesign. You can scale, but make sure you aren’t stretching proportions.
Though in the real world, you would be limited to only those typefaces that are shared by Macs and Windows, in this project I will allow you to use any appropriate typefaces. If you did this in the real world you would have to save those type areas as jpgs or other formats so they would embed in your site.
Interface design is a non-linear process. So consider how you will move your reader around the site in a logical and appropriate way. Also consider how appropriate the design you create is for the event and or organization supporting it. Visual continuity should be present.
BEFORE you choose your design, go through a process of drawing a series of thumbnail sketches (do a minimum of five) in which you experiment with different aspects of the design, positioning, etc. This should help you when you go to the computer lab to begin working on the assignment. Include your five thumbnail sketches. I want to see a transition in the thinking.
A WRITTEN rationale (one page, typed) should be included in your envelope. As always, include a rough draft of your final design and a print out of each page.
OBJECTIVES
Grading Criteria
-
All required pages included in the design [Five is a common number]
-
Typography
-
Visual appeal
-
Readability
-
Design/use of space
-
internal/external margins
-
Information architecture
-
Story-telling ability of the layout
-
Use of pictures
-
.PSD/.PNG/.AI folder structure
RESOURCES
Web Design in Twelve “Nothing Worthwhile is Easy” Steps Keynote | PDF
10 Keys to Effective Non-Profit Organization Websites | URL
Design Inspiration: 25 Non-Profit Websites | URL
Photoshop Web Design Layout Tutorials from 2010 | URL
Web fonts installed on both Windows XP and Mac OS X | URL
PROFESSOR
Ken Harper
Newhouse I RM 500
kharpe01[at]syr.edu
315.443.6131
Office Hours: Mon-Thurs 1-2
Also available by appointment on
tungle.me/kenharper
LECTURE IA
GRA217.2 T/Th
Ashley Christiano
adchrist[at]syr.edu
Office Hours: Wednesday 3-4
Thursday 4-5, NH 1 RM 119
GRA217.5 M/W
Tim Olsen
trolsen[at]syr.edu
Office House: Monday & Wednesday 2-3:45
NH 1 RM 119
REQUIRED TEXT
Thinking with Type by Ellen Lupton
RECOMMENDED LAB TEXT
Visual Quickstart Guide, InDesign CS4
Graphic Design Basics by Amy Arnston
Lynda.com ($25 a month)
SOUL FOOD
“The Journey is the Destination:
The Journals of Dan Eldon”
CLASS FILE SERVERS AND SITES
Class Server:
GalaxyNH: You are required to submit electronic files for all major projects to this server.
Class Blog:
Assignment sheets, course documents and other topics will be posted on the class blog site at: establishareconnect.com/gra217/ You can register at establishareconnect.com/gra217/wp
SUPPLIES
Please purchase these supplies:
- Sketchbook, (9×12)
- Large Envelopes for Projects
- A few magazines & newspapers
COMPUTER LAB
You’ll need to save projects you work on in the labs, buy a thumb drive, CDs or external hard drive. You are strongly encouraged to back-up all your work and to save copies of it often. Many of you will lose projects, BACK UP!
CLASS RULES
There will be no use of cell phones during class, turn them off. Leaving in the middle of lecture is disruptive to your fellow students and to me. If you foresee a need to leaving early please let me know before class starts.
ATTENDANCE
Having more than three unexcused classes will result in a grade reduction. You are expected to attend all lectures and labs. If you can’t, let me know. Also notify your lab instructor if you cannot make a class. If you don’t show up you won’t succeed in this course.
Acceptable reasons for missing a class include personal emergencies and sickness, though I reserve the right to require verification of your illness or emergency.
Showing up late to class is a bad idea. Please speak with your lecture TA if you arrive late so you are not incorrectly marked absent. If your name is not on the attendance sheet you will be marked not present!
SAVE YOUR WORK
- Save and save often.
- The computers are machines and will inevitably have a problem when it is least convenient to you.
- Save you work often (again), multiple versions to multiple thumbdrives or email yourself a copy as a backup.
You will hand in electronic files for all projects along with final printed versions. The printers can be a bit fussy but I expect a reasonably nice print version of your project. However, your grade will be based on the electronic files you save to the GalaxyNH server.
HOW TO TURN THINGS IN
Server Turn-in
Projects folders should include the followin:
- Packaged InDesign (marked as final)
- PDF (of final Indesign file)
- Drafts/sketches (Indesign files/sketches)
Project folders need to be named as follows:
- lastname-firstname-projectname (i.e – harper-ken-resume-final)
All Project files need to be named as follows:
- lastname-firstname-projectname (i.e – harper-ken-resume-final.ind)
Blog Turn-in as follows:
- Rationale
- .jpg image of your final (960 x whatever, 12 quality)
- Link to PDF download
CRITIQUES & DISCUSSION
These will be a vital part of each class. No person is an island unto themselves, in the classroom we have a wealth of diverse ideas and experiences and we’ll be tapping into that strength during class as each of you share your work. Critiques will occur in class and online for each project, be prepared.
This is a subjective world and a subjective medium and this is also a class. Liking or not liking something is ok, but I expect you to use the vocabulary you are learning in our discussions.
Do not disrespect your fellow students in your discussions. You will find that any attempts to belittle, or humiliate another person will not be tolerated.
The fundamental thing to keep in mind is that the suggestions of others and those you make should be meant to show another side to an existing thought. Suggestions to make improvements to a design are encouraged and will help your fellow students a great deal.