ARTM2210 Intro to Web Design

Just another Intro to… site

Single Page promo site

Read: Non Profit Website Design: Examples and Best Practices By Cameron Chapman

Design and lay out a single page website that promotes a social issue, for example: clean energy, freedom of speech, getting out the vote, gay marriage, global warming, smoking bans etc. Your single page site should use scrolling to the page’s advantage, and effectively utilize white-space between blocks of content. Use design principles and color theory to support your content and be prepared to defined your design decisions.

Assume this is for a client, a non-profit starting from the ground up, they will have minimal traffic in the beginning but will need to grow in the coming months as they are promoting the site on Facebook and Twitter. Their audience is tech savvy and between the ages of 24 and 44. The staff of 5 will each need an email address, they will also need one general info account that forwards to the office assistant and director. Research and find an available domain name that suits the social issue,* and a web host that meets the needs of the client. Once the domain-name and host is found write a short brief of the costs involved, and features that will be important to your client (server space, bandwidth). Further keep a record of your hours, note time spent researching the issue, finding a host and domain name, and creating your design comp. Whether freelancing or working for a firm most jobs will billed by the hour.

*You do not need to buy the domain but it should be one that is available.

Technical requirements

  • 5 to 8 panels that are 1366×768 pixels each
  • Valid HTML and CSS which will be checked by validator.w3.org
  • css :hover should be used for all links
  • Original graphics and photography (no stick figures)
  • the provided jQuery should be used

Process Requirements

  • Create 5 to 10 Sketches and 1 comp
  • Show Evidence of research (this will be your review and should be noted on your time sheet)
  • Suggest a domain name and host – this should be added to the time sheet
  • Time tracking – download the linked time sheet

Schedule

  • Brainstorm and sketch
  • Create working comps using Fireworks
  • Begin slicing with Fireworks and coding with Dreameaver
  • Add interactive elements (applying rollovers and jquery)
  • Add final touches and troubleshooting
  • Final critique

Grading

  • Sketches 10 points
  • Time sheet 20 points
  • Concept 20 points
  • Technical Execution 25 points, minus point 1 point for each validation error
  • Aesthetics 25 points

Examples of singe page sites: