I'm going to spend a few blog posts talking about our wedding website :-)
The deeper I got into wedding planning, the more I realized that we are really, unashamedly, building a shrine to ourselves, that this will all culminate in an incredibly elaborate (and expensive!) scrapbook. Even more important than what actually happens on the big day are the things we leave behind -- the photos, the videos, our save-the-date video, and yes, the website -- all things that we can look back on and remember our wedding day by, when our own memories have failed.
So we didn't want to use
WeddingWire or
MyWedding to build a customized but ultimately cookie-cutter website. We wanted our website to be, well, an awesome and special entry in the ultimate scrapbook.
For its theme, we decided to continue what we started with our
save-the-date video, not just in its use of origami, but in its tone as well. No, we didn't want a modern, restrained, or "sophisticated" website. Instead, we wanted something that's bursting with the creative energy of a little kid frantically working on his arts and crafts project on the dinner table. Something that reflects how we felt when we were making our save-the-date video. Something fun.
Mel was a little worried about our time budget, though. "How much longer do you think it'll take to build our own website, versus using WeddingWire?", she had asked. "Oh, you know", I responded non-chalantly, with that air of I'm-an-engineer-and-this-is-what-I-do-so-you-shouldn't-worry-about-it-ness. "It'll probably just take, like, four hours more."
Riiiight.
The first thing I knew I wanted was an animated paper crane flying randomly around on the page. I know, I know, it's so "the web circa 1990" with its cheesy, over-the-top, and distracting effects (at least I didn't use the
<blink> tag!). But there's something about it that was just so irresistable. I actually wanted two cranes, but Mel (correctly) declared them too distracting. Also, have you tried hovering your mouse over the crane?
The next thing I wanted was a beach that's made from construction paper, just as we did in our save-the-date video. That was easier than I thought -- a few hours with the path tool in Gimp and we had one.
The hard part was deciding how to present the content. Mel at first wanted the body to be a big
cootie-catcher with an animation opening up each page, like in the opening sequence of
Community. But I convinced her that I did not have the necessary skills, artistic or technical, for fancy animations. We also toyed with having a physical scrapbook with pages that turn, but that would pretty much mean a scroll bar on each page -- which I hated.
Eventually, we decided to have content on sheets of origami paper that slide into and out of view. The animation would be simplistic but still lively enough to feel special, and the physical real-objectness of it fits well with our theme. The first design we tried had papers with their titles written on the corner of the page. When a page is hidden, the bulk of the paper is off-screen except for that corner, and when a page is shown, the paper swings out into its normal up-right position.
This was kind of cool, but the swinging motion turned out to be too jarring, and made me nauseous after a while. We expect our guests to feel nauseous while visiting our website, but not from motion sickness! The animation was also too sluggish on computers that didn't hardware-accelerate some CSS transforms (more on that in another post!).
Next, we tried a more straightforward design, which you see today, with papers simply sliding horizontally from the edge of the table into view. But there's another problem -- most of the papers on the side will only be showing the title, with their bodies covered by the next sheet of paper. But what should we do with the last sheet of paper? We wouldn't want its body to run all the way down the side of the screen! Mel then devised the clever idea to randomly generate many more sheets of paper after the last, to both cover up the body and to make it feel even more like a messy desktop.
We were pretty happy with the end result! That's all for now -- more next time!
