Site Exmples

Public Awareness

  • Interactive
  • Personal Journey
  • Offline to Online


  • Show Support
  • Donate Money
  • Join A Group

The design decisions behind the design


  • video based learning


When you see a website that upon clicking a button, link or image and a modal displays on top of the page, this is most likely jquery. jquery is a Javascript library (a javascript file). Any jquery code you write or use on your site will need to be on top of the jquery library. To start using jquery you must either download the latest verion of jquery ( or link to a version of jquery from googles web cloud library (

Once you point your web page to the jquery library you can start to write jquery code. So what is jquery? It is a script language that allows interaction, functionality as well as manipulate html and css. So you can use jquery to add or remove classes or html elements or change attributes about either.

There are many jquery plugin that you can install into your web page. So this is jquery and sometimes html/css that is written and bundled and all you need to do is put the files in the right place in your root directory and integrate the plugin code with your own.

Here are a couple of good jquery plugins:

Foundation: Modal, Carousel

Slimbox: Modal/lightbox

Caroufredsel: Image Carousel

CDrops: Smooth scroll horizontal

Web Fonts

Designing for the web introduces new challenges for designers. Lets talk about type, for type to display on a persons browser the font either needs to be installed on their computer, or the font is installed on your server and you call to it with a relative path or lastly you use a web font service, like google fonts typekit and serve up your font with an absolute path.

Google Fonts

Type Kit

Font Squirrel (web font generator)

Reading Assignment: Response is due on Tuesday April 30th

Type design is a craft that requires training and practice. Some newcomers choose to grow up in public, sharing their half-baked first attempts with the entire internet. Others do it differently: they develop their skills away from the public forums, then impress with a series of mature, quality fonts — which in the long run may be more rewarding. Our interviewee this month has followed such a path.

Read the rest of the interview here

Then post a response to your blog by Tuesday April 30th.

How to Create your Screen Comps for Project 3B

Working on screen comps in-class this Thursday. Come prepared with a screen comp that is at least 25% designed.

Your screen comps will be based off your sketches and wire-frames. Your screen comp defines exactly how your web site will look. You will design your screen comp in Photoshop. Photoshop will allow you to design in the web’s native units (pixels), color mode (rgb/hexadecimal) and image type (raster as opposed to vector).

Steps to start your Photoshop file:

  1. Create a new Photoshop file
  2. Set width to : 1024 pixels (height can be any value over 768 pixels)
  3. Resolution: 72
  4. Color Mode: rbg
  5. Create a 12 column grid with 20px margins
  6. start designing your web page(s)

To create a 12 column grid with 20px margins, download guideguide, a Photoshop plugin.  And follow the instructions on how to install the plugin.

How to install and use Guide Guide.