Web and user interface design
In Progress | VividLit
Oh boy, is this going to be great! It's still all in my head and so I can't say too much about it yet, but this is what got me going.
This one was a joy. Who doesn't love the look of field manuals? And Katie Lee's drawings are beautiful.
In Progress | Science Fair
First Stab:
Woo-hoo, Science Fair! Less of a woo-hoo: we need a Web site by tomorrow but we can't tell you what the content will be. Probably lots of forms to download.
Lots of forms? How many is "lots?" A hundred?
Maybe, um, five.
No content, though? Do you know how many pages or sections you'll want?
Not yet!
Gah! We've all been there, though, and what you lack in data and details can be finessed with the old gut instinct. First off, we'd better make it look like science! and engineering!
Secondly, given the mention of forms it seems likely that this site will be utilized for said forms and not much else, despite the teasing, tantalizing RULE BOOK and TEACHER SPOTLIGHT links we invented. So we might as well get the forms out there on the main page. But how?
A sidebar with a snappy green rollover? |
 |
Have you ever had so much fun downloading forms, kids?!?
|
 |
So we'll see....
Some time later:
I've lightened it up a bit so I won't get blamed if (when) a science fair kid turns goth.
I am really liking the prominence of the FORM DOWNLOAD sidebar - that's prime real estate and it's actually going to get some use. I'm not convinced that there will be enough final content to justify a nav bar, though...that'll end up in the bin, more than likely. Oh - and no one was particularly crazy about the original "Science and Engineering Fair" font
which was based on New Alphabet. That went through a few iterations before it was roundly pronounced legible. (I still think the kids would have been fine with it.)
And now?
Our prime piece of real estate sits empty, a victim of "Make the (sponsor's) logo bigger!" And the sidebar has been demoted to regular sidebar heirarchy. Darn! I really liked that sidebar! You can see the current working version here.
In Progress | Schach Musik
There's barely enough completed on this one to denote "in progress," but if I post it here I might be more apt to finish it!
The background, in short: I'm writing a book in which the main characters, two brothers, are (respectively) a musician and a professional chess player. The musician brother has plans to compose a piece of music in honor of his sibling's attainment of FIDE World Champion (should it ever happen), and the piece itself is intended to be an audio representation of the moves in the final game of the tournament.
So why not try it in real life? But as an RIA instead of a singular composition?
Why not, indeed!
Step one: calculating the tonal "map" of the chess board. The standard chess record is algebraic notation,which identifies each of the 64 chessboard squares with a letter-number combination. Files are the vertical measure, and they are labeled a through h. Ranks are the horizontal measure and are labeled 1 through 8.
My accumulated thoughts so far are 1) there is no way I can do this without using German musical notation (which uses the note H) and 2) if I also use scientific pitch notation, I might actually be able to make a tidy map without thoroughly confusing myself!
What now? Should every piece have its own distinct instrument, a la Peter and the Wolf? And what about castling? What about a piece taking a piece? Should there be an alto and tenor version of the doubled pieces (to represent King's Knight, for example)?
But first things first - if it sounds awful, there's not much point in continuing down the current path, right?
Bolstered by the beauty of the plan so far, I decided to knock out the first ten moves of the Game of the Century, Donald Byrne vs. Bobby Fischer. Notes only, mind you - no separate instrumentation...not even an f clef!
It looked something like this
which is a translation (mostly) of this:
1.Nf3 Nf6 2.c4 g6 3.Nc3 Bg7 4.d4 0-0 5.Bf4 d5 6.Qb3 dxc4 7.Qxc4 c6 8.e4 Nbd7 9.Rd1 Nb6 10.Qc5 Bg4
And it sounded something like this: byrne-fischer
Good enough for me - with proper instruments it might actually turn into something! And so the work continues....
Psst - what does a pawn sound like?
In Progress | Remix-o-Matic
The Remix-o-Matic links song lyrics to their sung notes (e.g., the word FOR-GIVE plays C E). The song is played when the user mouses over the word "magnets" (thus controlling the tempo).
It is highly likely the user will experience a hiccup in the song flow when moving from the end of one line to the beginning of another. No problem - the user may choose to rearrange the magnets by dragging into an "S" shape, for example...
...or even a spiral.
The user can also rearrange the words and notes into an entirely new, entirely playable piece of their own.
The possibility exists for the user to add several words to the original lyrics (blank magnets have a preassigned note), as well as to upload the remix into a library.
The Web and Me
A long time ago I was tasked with building Georgia Tech Savannah's first Web site. Exciting but yikes, as I didn't know HTML from a hole in the ground and I didn't know (or even have) this Dreamweaver thing that everyone was talking about - I was an Illustrator/Photoshop/PageMaker gal. (Yes, PageMaker. I told you it was a long, long time ago.)
Clearly, I could not even wait for Amazon delivery times and so it was off to Books-a-Million. Tell me more about this HTML, Books-a-Million. Tell me more.
So I got a book, curled up in the attic with a bushel of apples...and then heard that Adobe was coming to my rescue with GoLive.
Laugh all you want, it was Adobe and it was familiar and it worked. Thank you, GoLive. Thank you.
I can't even show you the Web sites from then as they seem dated and silly. (No, no flashing nonsense or animated GIFs, but still...cartoons? did I really post hand-drawn cartoons?!? Oh, I sure hope that was the style at the time.)
For my benefit and for my detriment, it's been almost two years since I've had to code in any serious way, thanks to the greatest developer I know. He is brilliant and fun, but sadly he loves the color gray perhaps a bit too much.
Here are some sites I created before David came along:
Natural Disasters | Tsunami Research and Hurricane Katrina
Main GTS Site
The last Georgia Tech Savannah site that I made on my own. Pretty on the outside, wildly inefficient on the inside! They only gave me four days to design and build it, though. Was it a couple hundred pages? Probably...I can't remember anymore. What I do know is that I owe the on-time completion of this project to Coca-Cola, coffee and The Flaming Stars.
It was becoming apparent that we needed a Web developer. Stat! ASAP! SOS! Fortune smiled on us, though, as we found David. Here are a few sites we have created together: my design and his code..
Various Web Designs
NEESR: Seismic Risk Management for Port Systems
Center for Reliable Engineering Computing
National Conference on the Advancement of Research, 61
Characterization and Behavior of Interfaces, 2008
Center for Signals, Sensors and Systems
Georgia Tech Savannah Bulletin Board
This is very much a personal endeavor, as administration doesn't see the point of having a blog/photo/virtual bulletin board site. But the students love it and I love it and against all odds I've kept it running since late 2004. It's our #2 most-viewed page!
CAPTOR
CAPTOR is a concept management/study tool for students, and is being developed by Georgia Tech faculty as part of a larger pedagogical research project.
We were tasked with cleaning up some non-working demos and we liked the idea behind the tool so much that we took it and ran with it. Really ran with it - we scrapped the original architecture and UI and increased CAPTOR's proposed functionality along the way. (Wouldn't it be cool to create an AIR component so students can have this on the desktop, too?)
If only I had more projects like this one!
Course Scheduler
We got so excited with CAPTOR that we began designing a course scheduler for faculty and students (to be built on AIR). Here are some of the early sketches...
Interval Calculator
The Center for Reliable Engineering Computing developed an on-line calculator for interval mathematics. This is the skin I designed for the project. (The calculator is currently off-line as the programming is being updated.)
Movies, Random Flash Work
I thought faculty and staff might be more apt to adhere to our image and style guide if I made a snappy Flash movie of it.
I know! I was so silly. Image and Style Guide, 2003
This one is from 2002...it started out as a mild hey, could you help us with our Web site? It's in frames and needs some better design..
And ended with this.
This one is more recent: a Flash-based wireframe demo for a media-rich promotional piece.
These are two examples of those needless projects you start to play with during some down time and never seem to finish.
And a few more random ones...
Georgia Tech Savannah animated header
