Randall Bruder & Intro to Web

(Normal and pressed states)

Code:

View the button here.

Also, here’s a slick metaphor about webfonts.

Typefaces are the tools a designer uses, the same way a builder uses tools to create a house; Verdana is a hammer, Helvetica is a table saw, Gotham, a tower crane. In the same way an construction team can build a better structure with better equipment, a designer can design better with well crafted typefaces. So asking a designer to create a webpage with only 7 basic fonts is like asking someone to build you a house using only a hammer.

So asking the importance of webfonts is about on par with asking a foremen the importance of a tower crane when building a skyscraper.

(On a side-note: it does seem the ability to use webfonts is like a Home Depot opening for the first time, there are all these new amazing powerful complicated tools available to use, but everyone runs for the free screwdrivers in the checkout lane. And ‘screwdrivers’ is a metaphor for the typeface “Museo.” But free is free.)

A comp for the homepage / live feed page:

The grid the site is built on:

A lightbox that would appear to first time visitors:

(Also, try opening this lightbox comp and the live feed comp in two tabs, side by side and switch back and forth between them.)

alistapart.com/articles/css-positioning-101

The article is pretty straight-foward, the only thing that surprised me was that you could set the size of a div by specifying all four positioning elements (top, bottom, left, and right). So, instead of a paragraph, I thought I’d try to represent the four properties with two fish:

(FYI: In the HTML, if it were to exist, the “fish2” div is a child of “fish1.”)

Steps 1-5 or steps 2-6 or whatever.

In this mock-up, the red represents “position: absolute;” content, while the blue area is free to scroll.

This way, the menu and text-area box for sharing are always visible. In this example below, notice the “live feed” area is scrolled down, and is starting to disappear behind the sharing box.

Here, an about page is based on the same structure as the main page. It’s a pretty boring looking page.

Sytlin’:

And it looks like:

Concept statment:

Some drawings and photographs:

Complete with AA chips too.

Some annotated books, too.