Projects
Design 117
Project 1
An Information Site - Teach or inform us about a design related technology, past, present or future.
The objective of this project is to incorporate all the skills we’ve learned to create a 5 page website that explores a design related technology you're interested in. Think of your site as part of an online exhibit where a viewing audience from very young to old could come to better understand a technological invention or innovation. At a minimum, I expect you to incorporate external style sheets with validated css and html code. Be sure you tell a “story” about your technology. The who, what, why and when!
You are telling a story in a visual medium. Your tools are type, images and animation.
Project Requirements
Your index.html page should introduce the technology, techinque or skill you are teaching. We will have individual conferences to review the topic, three preliminary sketches of the index and mock-up of final index.html page done in Photoshop or Illustrator. (see scheudle)
Minimum of 5 linking pages
No minimum or maximum number of graphics but all but must be original
(illustrations, sketches, photos done by YOU The only exception is a picture of the inventor, if that fits your technolgy!
I expect a strong graphic style that communicates clearly.
Navigation system must be intuitive and insure viewer's situational awareness
Upload all pages onto your web site on the design server
Technical Requirements
5-6 pages
External Styles or combination of external and embedded as needed.
At least one animation
Original Art (The exception would be a picture of the inventor, if there is one available)
Timeline-show approximate dates of its evolution...could be future too.
Small icon that represents your technology-Submit in icon folder on critique day. 72 x 72 px
index page: Introduces your technology in a way that is engaging and encourages viewers to click to learn more.
Follow-on pages:
Explain who invented it or how the technology evolved.
What problem did it solve?
How does it work?
Incorporate a timeline that shows the evolution of your technology.
Turn-in
72 x 72 px icon-Class Folder (Drop Off)
Two-pocket Folder
Left Side
Original sketches and mock-up (photoshop/illustrator) of index page
Screenshot of final index page(B/W)
Right Side
Gradesheet-print and complete in class
Student Site Eval-You will evaluate the clarity, effectiveness and learning value of another student's site. (site will be assigned and form provided)
Examples
| Suicide Notes | ||||
 |
 |
 |
 |
 |
Design 117
Project 2 -Explore-it! (iPad/Mobile Friendly Design)
Design Brief
You will be creating a site that guides viewers on a virtual tour of a unique or exciting physical feature of UD Davis. What makes this campus a compelling place to visi? An example would be "The Art Of UC Davis". You'll research the topic; what is it's history or how has it evolved? I expect you to take original pictures of your subject. You must use
external style sheets with hand coded XHTML and CSS exclusively. Do not use tables or other
XHTML code that does not meet the symantic standards. Remember, we're learning
how to separate presentation from content. The site will be iPad compatible so that viewers could use a mobile device, such as a tablet as a "tour guide" for your Explore-It feature.
Create a minimum Five Pages (index plus four other pages that you determine based on your research. You will create the intro page (index.html) with navigation links to all "second-level" pages. Style, color, typography and user experience must be considered in your design. Incorporate a slide show into one of your pages.
Upload your site and link it to your Project 3 Explore-It link in your portal. We will design an Interactive Map of the campus that has links to each of your explor-it features or destination!
PS-I will consider "explorations" of areas adjacent to the UC Campus (such as downtown Davis) on a case-by-case basis but it must somehow relate to the campus.
Here are a couple examples of "virtual tours":
Virtual Tour of UC Davis (this is a Flash Site but you'll get the idea)
Technical Requirements
Pages will be 960 pixels wide and approx 1200 pixels long
Your magazine will have a minimum of 5 linking pages
No minimum or maximum number of graphics-shoot for <100k page size.
Design your magazine based on the 960 wide x 1200 high pixel window size of the iPad. You can check how your project looks (after it's uploaded on our server) by going to http://ipadpeek.com/ and typing in your url. Note: it comes up in a landscape mode...go the magazine view (portrait) by clicking on the thin silver border of the ipad. Isn't this cool?
Individual Conference Requirements:(see schedule)
Staging Site (Be Sure To Read!)
Create A Staging Site that links from an additional link on your portal (under Explore_It on your project list). A staging website is used to assemble, test and review the site before it is moved into production.
Your staging site will be one page. It can be as long as you wish.
CREATIVE BRIEF (Title and five questions to answer about your design concept)
--Title
--Project Summary
--Audience Profile (Well, who's going to use your virtual tour?)
--Perception and Tone (what do you expect your viewer's to "feel")
--Communication Strategy (How are you going to do it?)
--Target Message (What do you want them to take away from your "site"?)
DIGITAL MOCK-UP (A digitial mock-up of index before coding-may be different from final)
COLOR PALETTE (show is color samples with hex codes=#FF0000
TYPOGRAPHY (What type styles and are you using for headline and body type?) You might show samples. Are you going to link or embed any type fonts?
Examples: Staging Site for Napa Style | Staging Site Explore-It Project
Turn-in
Just Turn-In the Completed Gradesheet and a b/w screeenshot of your opening page.
Ipod dimensions 960 x 1200 in portrait mode as shown above.
Resources To Check-Out
•40 Online (E-Zines) For Designers
•Here's a link to handheld device design considerations-take a look!
•Design considerations for the iPad
Des 117-Final Project-Redesign Your Design Matters Site (based on feedback or your choice of changes) and incorporate content management into one Events page.
Understanding content management will be an important part of your web designer "bag of tricks". Your final project will be to apply all the new skills you've learned in class to redo your first project and add content management so that a "client" could have administrative control over some designated elements of the site. You will use Cushy CMS as your CMS server.
There are several "objectives" to this final project:
1. Sign-up for personal web hosting (free or paid-we'll go over options in class)
2. Redesign your Design Matters Site to fix critique items or any other coding or design issues you would like to improve.
3. Modify an existing page or create a new page in your site that highlights 5 other student's Design Matters sites. This could be called Current Online Exhibits or Events. You pick 5 icons from our Design Online Gallery and create links from them to the original student sites. Each image should have an accompaning caption that briefly describes the presentation:
4. Finally-You will open a free account with cushycms.com. This is a content management service. Content management allows non-web designers administrative access to certain parts of a website. In this case you will give yourself and me administrative access to the images and descriptions for 5 different exhibits. If correctly applied, the administrator could go into cushy cms, log into the editable areas of the site and make changes. all this can be done without any knowledge of web design, coding or ftp. This is the type of capabiltiy that many clients are asking for. Cushy CMS is a basic free option. Most sophisticated CMS systems use Joomla, Drupal and the very popular Wordpress, which is in itself a CMS system.
Design Online-Current Events
This is a typical story of a office manager who's got no skills. Learn more!
This is a typical story of a office manager who's got no skills. Learn more!
This is a typical story of a office manager who's got no skills. Learn more!
Submission Requirements
Student Critique Sheet-Provided
Make Sure I am an adminsistrator on your site: