Monday, February 22, 2010

Elisa's video pick

Different ways of building slideshows

Here are some links showing different approaches to slideshows:

Simpleviewer (it's free, uses flash elements, the thumbnails are somewhat large):

Slideshow Pro (flash component that costs about $30, transitions are elegant, you can include video in the slideshows, can go full screen):

Flickr Slideshow (free, easy to adjust content thru Flickr interface, can include video but the limits is 90 seconds per clip, it's obviously branded as a Flickr tool, can go full screen):

Lightbox (free, darkens the rest of the web page so that focus is on each image, can't scale to full screen):

Tutorial download

Here's a link to a tutorial we'll be going over in class:

Sunday, February 21, 2010

Wednesday, February 17, 2010

Due Monday's Class: wireframe for your proposed site

Next class, please come with a wireframe for first and second level pages of the site that you'll be creating as your main project for this class.

Kath's world wide web find....

DISCLOSURE!!! If you find profane language disconcerting and offensive then this is not for you.

Wednesday, February 10, 2010

Assignment for Wednesday (2/17)

By next class, have:

1. A website wireframe prepared for one of the sites you picked that is in the same "genre" of the site you'd like to make, their first and second level pages. A wireframe example (click to enlarge):

2. Make a website flowchart as well (you can do a google image search for "website wrireframe" and "website flowchart" to see examples).

 A flowchart example (click to enlarge):

Be ready to talk about the sites you analyzed (via drawing up the wireframe and flowchart) with your fellow classmates next class. Draw up a list: what were the elements you liked about the site? What are the elements you disliked about the site? What elements would you like to incorporate into your own site?

As I said in class, I usually use illustrator for doing up wireframes and flowcharts -- if you have any familiarity with Illustrator, it's a good tool for dealing with text, lines, and boxes. There's a tutorial here that has some good time on wireframing in Illustrator.

Photoshop would be fine too -- though if you're unfamiliar with both Photoshop and Illustrator, I'd recommend just drawing these out by hand. Just make sure the names for all the navigation and content are legible. It might help to use graph paper.

As a recap (and for those who weren't in class): the wireframe is to give an idea of all the pieces of content you need on a particular page. There might be some layout information in it, but it's far more about content than design. And since most sites have homepages that function differently than their interior pages, it's necessary two have at least two wireframes (for first and second tier page functionality) to give an idea of what's going on.

A flowchart, on the other hand, doesn't give an idea of everything that's on a page, but rather gives an idea of how the site as a whole is organized -- how the menu breaks the site into various sections, that may or may not have subsections. You don't need to draw out every single page, but you do need to draw out each section or subsection of your site.

The reasoning behind this exercise is to get you to dig deeply into the site architecture of a site that is trying to solve the same sorts of problems you'll want to solve for your own website. It will hopefully give you some ideas on how to organize your own site (or how not to organize it, as the case may be).
So I want to either design a web site for my friends project Gangstaraid
A semi-serious snowboard filming project
Or a my own company, which I plan to start soon

They would be similar sites like:
So I want to either design a web site for my friends project Gangstaraid
A semi-serious snowboard filming project
Or a my own company, which I plan to start soon

They would be similar sites like:

rubio's web site

lets see here ive already have a site up and im happy with it.  BUT! there are still some fixing and learning to do. :) My site show my photography work and what i will be working on soon, a link to my blog.

here are some sites that i enjoy looking at.

Shawn's Web Site

I have a website for my father's business that I need to do some work one. I want to make the front page flash and have better overall design and page flow.
Similar websites:
I want the front page to be like:

Red's Website

I would like to begin to build a website that is dedicated to my future production company that will include all things Hip-Hop, from music to a dictionary for slang (haha) to a clothing line. Here are a few websites I think I will be following:

Young Money
Makaveli Branded

Daniele's video

Kath's thoughts on a website

I want to design a portfolio website that is basic, clean, slick, professional- something that anyone can look at to get an idea of my aesthetic and work.
Some basic websites that are examples of this are Megan Sullivan, Aimee Lee and Meghan O'Connor. Daniele also had a good example of this with Nicoletti Ceccoli. These are pretty cookie cutter but 'nice' and cover all the necessities for a portfolio.
One that I love that is kinetic and bold with lots of personality, but really easy and intuitive to navigate through is Julie Perini!
I also love this 'bio' page on David Shrigley's and think the minimalist approach that Jason Polan takes is stark, but interesting.
It's obvious, I don't like clutter!

Keith's website

Since I'm dedicating this semester to getting my drawing skills up to snuff, I was thinking that I may practice creating a somewhat sophisticaed portfolio site.

A couple of examples:

Hyperboy Studios

Ken Wong
Yuko Shimizu
Michelle Hoefener
Andie DeRoux (Best example of what I had in mind)

Tuesday, February 9, 2010

Daniele's website

I'd like to make a personal website where i can put all my work, such as assignments, projects, images and give a description of them. I think people who are going to visit my site, if somebody will ever do, will be interested in art or digital images.

Elisa's site

My plan is to make a personal website with a blog section inside, and some info about me.
I like these websites:
Brian Hoff well done homepage
Sushi&Robots This is my favorite
RainbeaumarsI like the colors and the navigation
SimpleBits I like the navigation in this one
Mutt Ink The navigation menu should be bigger but I like this site

Tyler Baron's Website

I'd like to remake my portfolio website. I threw it together really fast and I'd like it to be nicer looking. Right now, it only needs to have a home page about me and then branch off to individual pages for the games I've made. Each of those has a description for the game from a game design point of view and a link to download the game to try out. I'm not really looking to change the function of my site, just its rather shotty presentation. The audience will be Grad schools and potential employers.

Alexarts - A rather quirky, but slow loading, portfolio page.

Hello Monday - Just plain crazy sauce.

Magnetic Network - Possibly the most interactive interface... ever.

Beakable - Not sure how I feel about this one...

All Day - Scares the crap outta me, but oddly convincing.

CSS resources

Some resources for class:

CSS lessons at w3schools

CSS syntax (w3schools)

CSS: id & class

The box model (from

CSS Positioning (from

Monday, February 8, 2010

Wednesday assignment -- what kind of site would you like to make?

Your assignment for Wednesday's class:

On the blog, post a one or two paragraph description of the website you'd like to make for the first major "website project" for this class, and provide at least five links to websites that are in the same "genre" of the website you'd like to make -- make sure at least two of the links are sites you think are designed particularly well. In your paragraph, be sure to include who you think the audience for your website will be.

ALSO: please bring the dreamweaver book to class. We'll be using it for an in-class exercise.

Shawn's Youtube Pick

Wednesday, February 3, 2010

Some links for today's class

HTML: tables.

HTML: the iframe tag.

Monday, February 1, 2010

Due on Wednesday

For next class, a reading assignment and brief response:

1. Read the below article, which uses the story we discussed in class as a jumping-off point:

2. Write a short paper answering these questions (in response to the story and the linked reading):

a. List three ways in which reading on the internet is different than reading from a book.

b. How is the web-reading experience "non-linear"? And how does linear thinking differ from non-linear thinking?

c. In what way does non-linear reading invite us to be the "author" of texts that we read, even if we didn't in fact write those texts?

Borges' "Garden of Forking Paths"

Here's a paragraph from a story we'll be talking about today -- and creating some hyperlinks with as well:

I said out loud: I must flee. I sat up noiselessly, in a useless perfection of silence, as if Madden were already lying in wait for me. Something--perhaps the mere vain ostentation of proving my resources were nil--made me look through my pockets. I found what I knew I would find. The American watch, the nickel chain and the square coin, the key ring with the incriminating useless keys to Runeberg's apartment, the notebook, a letter which I resolved to destroy immediately (and which I did not destroy), a crown, two shillings and a few pence, the red and blue pencil, the handkerchief, the revolver with one bullet. Absurdly, I took it in my hand and weighed it in order to inspire courage within myself. Vaguely I thought that a pistol report can be heard at a great distance. In ten minutes my plan was perfected. The telephone book listed the name of the only person capable of transmitting the message; he lived in a suburb of Fenton, less than a half hour's train ride away.

Here's the wikipedia page for the story, which contains a link to the full text of it.