Site Exmples

Public Awareness

  • Interactive
  • Personal Journey
  • Offline to Online

Conversion

  • Show Support
  • Donate Money
  • Join A Group

The design decisions behind the design

Informational

  • video based learning
Advertisements

jquery

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 (http://jquery.com/) or link to a version of jquery from googles web cloud library (https://developers.google.com/speed/libraries/devguide).

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
http://foundation.zurb.com/download.php

Slimbox: Modal/lightbox
http://www.digitalia.be/software/slimbox

Caroufredsel: Image Carousel
http://caroufredsel.dev7studios.com/

CDrops: Smooth scroll horizontal
http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/

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
https://developers.google.com/fonts/docs/getting_started

http://www.google.com/fonts/

Type Kit
https://typekit.com/

Font Squirrel (web font generator)
http://www.fontsquirrel.com/tools/webfont-generator

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.
http://guideguide.me/

How to install and use Guide Guide.