< 318 Home

This project will arc across many important lessons over the next four weeks.

In a subfolder of your domain, we are going to make a mock website. By mock website I mean the following: This should be website that upon the outward appearance looks legitimate. To the lay eye it should be completely believable. That means the design elements, the written copy, the images and the overall presentation establishes the “design of creditability” that lends a presentation the authority that the people who made it know what they’re doing. It is a graphic design project, but you’re going to learn immense amounts about web design in the process. But, the person, company, product, organization, group or movement for whom this website is supposed to exist must be absolutely absurd. For example, previous student projects have included an activist site for Bear Suffrage, one was a political campaign for a person who was obviously insane (but knew how to run a campaign), and one was for a security company that helped protect shark attacks on your home. Other ideas to consider: a government website for a fake country, a really bad band or musician, a tutor for a skill that no one needs (ahem), or maybe a fund-raising campaign to help Walmart (or similar company).

Check out Havidol for a good example.

Technically your mock website should prove the following technical competencies:
(We’ll be going over these individually each day in the next several classes)

  • a thorough understanding of the file structure required for functional websites
  • html5 structure/standards
  • cascading style sheets: for layout, typography, interactivity
  • successful and standards-compliant use of various multimedia
  • interface design and usability and accessibility
  • functional, logical and intuitive navigation
  • cross-browser functionality
  • a responsive layout that automatically adjusts to desktop, tablet and phone-size computer screens

Plan on your project unfolding in the following order:

  • Week 1: Establish/research an idea, build Photoshop mockup/logo (25 points)
  • Week 2: Begin converting mockup: build php templates, build style sheets (25 points)
  • Week 3: Finish front page design/layout/styles, begin building inside pages and content (25 points)
  • Week 4: Finish design, fix bugs, present project (25 points)

Final Crit: March 5 at the start of class.
Project value: 100 points

Training:
Mockup to HTML from Tutorial from class part 1

Part 2:

Lists: http://www.alistapart.com/articles/taminglists/
HTML5 Video and Audio: http://www.lynda.com/HTML-5-tutorials/HTML5-Video-and-Audio-in-Depth/80781-2.html
CSS Fundamentals: http://www.lynda.com/Web-Interactive-CSS-tutorials/CSS-Fundamentals/80436-2.html
CSs Transitions: http://www.alistapart.com/articles/understanding-css3-transitions/
CSS3 Bling: http://www.alistapart.com/articles/css3-bling-in-the-real-world/

website-mockup

Bears Citizenship website by Stephanie Lloyd

Bears Suffrage website by Stephanie Lloyd