On Weddings and Websites

I've been engaged for over 8 years—and in 24 days, I'll finally be tying the proverbial knot with a woman that has truly given me way more than I could ever return.

Throughout the last year, we've been planning said wedding. Honestly I don't know how people can do it any sooner than a year out, but that's only because making decisions about something that could clearly change a year or two years down the road isn't something I'm comfortable doing.

But I digress. This is supposed to be about design, of course, and ren.ai, our newly launched wedding site.

As Jen puts it:

(Still in shock that we were able to get it.)

Ever since our first conversation about invitations, I've been debating blogging the whole experience in my head. But to do it in the one true post manner like Cabel did was a bit.. daunting to say the least. If you've been following me for any length of time, you'll know that I'm a bit long winded and I actually want you to survive until the end of this. That said, this'll focus on one portion of my wedding design process with the other ones following as the inspiration does.

I'll be Tarentinoing this entire thing, since by the time I finally started on the site, the design for the invitations had already taken shape, and the design of the final product was highly influenced by the invitations. So please humor me a bit and work with me on this. :)

How's that for an introduction? (It's good to be back.)

You ready for this? Are you SURE?

I've started to tell close friends of mine the following:

So, I obviously didn't do that. 24 days to my wedding, right? Consider my feet bleeding.

Weddings are a challenge. Designing for yourself is a challenge. Designing your wedding is the ultimate challenge. Let nobody tell you otherwise.

In addition, unlike any other personal website you'll ever design, you have one shot. Redesigns of blogs and portfolios come and go, but (hopefully) you'll only ever have one wedding site. "So make it count!" as they say.

Not only that, but then there's the subject of your spouse-to-be. You simply can't enter the project with a mindset that "this'll be like every other site you've ever done." For instance, if you're a person with a distinct design style like that of MetaLab, you shouldn't assume that your wedding site will hold the same aesthetic, because this isn't about you. It's about the entity that encompasses the both you and your future spouse.

Personally and as an aside, it's something I think is lacking from a lot of wedding designs. There's too much focus on trend and not on story. One should be able to look at a wedding website and see it exude the style—and more importantly, the connection—of two people, not just one. This'll come up again a bit later.

So once you sit down, ready to rock, it's quite amusing how often the set of processes you set for yourself when designing for a client or your place of employment get completely torn asunder when you start designing for yourself.

In all seriousness, when I'm working on a site that holds as much personal significance as ren.ai did (not to mention the shrinking timeline), I ultimately search for the first spark that'll put me in my zone. Said sparks came in phases and the first one struck while working in Harmony.

How do I shot web?

This was a hard question to answer. Hate spec work? Door's over there and one more thing, you're fiancé's on the other side.

Ah, you're back. ;)

Much to my chagrin, there wasn't much to go off of. Through Dribbble, there were a handful of website shots, but no links (and 120,000 square pixels of mild discouragement per shot). Through Google, there were hundreds of the "we'll host your wedding site" ads, but no examples.

It scared me more than a blank canvas in Photoshop usually does. So, coding in Harmony, with a simple grid from griddle.it and no design allowed me to play around with the basics:

• "How many sections do I need?"
• "Are we telling any sort of story?"
• "Just how much story are we telling?"
• "God, I hate Tumblr's JSON API."

Wedding websites are, by nature, very informational. But in the examples I did find, they were almost too much so. In select cases, it felt like an online copy of the inserts you'd find inside an invitation. In others, there was a hint of heart and playfulness, but it didn't go far enough.

The story of your wedding isn't just in the proposal or just in the day of, but everything that happens in between. TLC's making a killing showing off the tear-jerking moments around the process of buying bridesmaids' dresses, why aren't couple's websites doing the same thing?

Hey hun, let's tell them a story.

Thankfully, this came easily for us. Because we had so much fun chronicling our trips to Japan, it only felt natural for Jen to start doing the same thing with the wedding process. It just so happened that the moment the website was initially brought up, she started using Tumblr to elaborate on Instagrams she had taken. Problem was, as the last aforementioned bullet point states, I had let her go Tumblr herself silly without realizing that I had:

1. Wanted more than just a tumblelog.
2. Wanted to run the site off of Harmony.
3. Completely expected Tumblr to do something that they obviously couldn't do in the end. (JSON assigned to a variable? HELLO?!)

In hindsight, a site like Virb would have been a better choice if the Tumblr took a more central role, but I say this with little education with regards to Virb. But once again, I digress.

We included as much as made sense when it came to demonstrating how connected the two of us were to the web. We included our quirks, because quite frankly, we're quite quirky. For instance, our love for Japanese pop is legendary, so that was going to make it in come hell or high water.

All-in-all, it augmented the invitations sent to the guests we were inviting, but it also provided a fuller experience for anybody strolling in. You could go to ren.ai and leave knowing that you had learned something special about us—and at the very least—participate in our journey.

Ooo, I like that purple.

After completely ditching Tumblr, fetching instagrams and importing tweets, there was still a lot of design to be had. Quite frankly, I still had a grid and a hint of a basic layout.

Maybe I'm part of the old guard, but my way of thinking when it comes to envisioning a site still revolves around Photoshop. Give me a blank canvas and I'll work with what's given to me. Concepts of more enriched layouts leveraging JavaScript and CSS animation unfortunately served to confuse me further by providing a bit too much choice at too early a stage.

I listened to my gut, eagerly awaiting to see what it wanted to divulge. It told me that there needed to be a large picture at the top of Jen and I and the emblem from our invitations needed to make an appearance as well. So I did just that, I put a few photos of us up, as well as the phoenix and the lotus and let that bake. After that, I painted the top half of the background a similar plum/eggplant purple that we had been using as one of our wedding colors and instantly got a thumbs up from Jen. That alone provided a spark. After adding texture, it started to look somewhat like a wall.

My style is one that expects elements to sit on a given layout as they would in real life, to a point. For example, if an element is to be sunken in using an inner drop shadow, then it needs the accompanying details to make it look sunken—leaving it at just the former wouldn't cut it for me. It's a blessing and a curse. On one hand, it has established the foundation of a style that is almost expected of me. On the other hand, seeing things done half-way is hard to bear and it takes a lot to satisfy the need to quench that thirst, per se.

Going back to the purple swath of color, since it looked like a wall, then the picture needed to be in a frame. While playing around with how exactly to go about that, I ran further with the wall idea, adding a pinstripe effect to simulate wallpaper and a piece of wooden moulding to provide separation. But what about that frame?

As if he was an angel sent from on high, Edward Scherf, a very talented iconographer and graphic artist signed onto AIM (yes, I still use that). Not usually one to ask for advice, I worked up the courage to ask him how he would make a frame and proceeded to learn from his experience. Needless to say it paid off.

Designing yourself out of designer's bankruptcy.

I had a header.

Great, I'm pretty good at making nice headers. But I'm not so great at laying down content. This was a weakness I've had since the beginning of my web design career as if I was required to suck at anything below 300 pixels from the top of the page. Text layers representing <div>s sat there, flat. I managed to change gears between the different sections more times than I could count, trying to find another spark.

At the time, I had abandoned the honeyfund section, since coming up with an idea to graphically reinforce the two countries we would be traveling to was proving to be a lot more difficult than I had predicted. I switched gears to the blog and decided since I already had elements on that page imported from Tumblr, I'd try my hand at that.

I took more time to ponder about what this site stood for. Instagrams carry a sort of informality about them, and their square shape lends itself well to a consistent design. So while it was nothing novel, I felt that having the pictures stuck to the paper-textured content area felt natural and the idea of lined paper for the description clicked quickly afterwards.

When something clicks like that did, it feels like you just parted the Red Sea. So the blog was the first page I managed to finish. I applied that same mentality to the story section. In that case, the desire to not have one piece of lined paper stretch the entire height of the page led to driving the content to be more of a series of short stories rather than one large monolithic one. It ultimately served to compliment the videos we had recorded for our invitation's DVD rather than be exclusive.

The venue section followed suit as I made my way back to the honeyfund. The original idea behind the honeyfund was to have the two countries be simple headers. That's easy right? But easy never felt right.

I struggled with elements like flags, silhouette of the countries themselves—but of course, nothing felt right. By this time in the process, Jen was almost urging me to compromise with myself, rightfully so. I was running out of time and I was beginning to spend every waking hour I was not working on items for GitHub trying to figure out these design elements.

Then I took a breather. When you're working with something for so long, there are times where you read text on the screen for what it says, rather than what it means. I took that and thought about the word "Ireland." What immediately came to mind was "celtic" and I started educating myself. I ultimately found the whimsical designs of the celtic cross appealing and decided that instead of being so literal with my depiction of each country, I would use elements from their cultures to be that graphical tie I was looking for.

For Japan, I wanted to be a bit more creative than just throwing a gigantic red dot in the header. Sakura or the cherry blossom was something I had already used in an earlier version our of Japan blog, Konokoi. Then I remembered there was another flower that was important to the Japanese, the chrysanthemum. It stands as a symbol of the serving emperor of Japan in addition to the imperial family and the highest order in Japanese society, the Order of the Chrysanthemum.

After finally solving that riddle of a section, I took what I already had with the lined paper and added that in as well. As for 800-pound elephant in the room: the reasoning behind the honeyfund as well as how it was built, that's something I'll get to soon, but in another post. Talking about it now would just make this one way too lengthy. Next up? The home page.

I usually save home pages for last, and this particular home page left me a special challenge before reaching the end the process: the masthead.

From the beginning I knew it would say the following:

At first, it just sat like that as text on the home page. Again, I fell into the trap of designing what was in front of me and not what it should be. I spent a lot of time doing that, going through about 12 or 13 iterations of different ways to style the text. 1 line, 3 lines, text enclosed in circles, you name it.

Then I drew three boxes, randomly. By that point I had pretty much completely bought into the fact that I was enjoying using the lined paper idea and that it should carry on here in some fashion to get me out of this slump. Honestly I had declared design bankruptcy on my current situation. But the random boxes helped, go figure!

I then proceeded to split up the above text into four sections: the title, the date, the venue and the time. But I kept the order, so technically you could still read it from left-to-right in the order I had originally intended. Each element was a small experience gain for me, as I had never attempted drawing any of them before. :)

Look sir, fonts.

This was a project of a couple firsts. The first of these was that was my first time completely leveraging @font-face custom fonts through TypeKit. My tendency to design live, especially when a service like Harmony gives you a development mode weened me off of the need to have the exact fonts in Photoshop. Consequently, it was the first site I had built in years that didn't use a single character of Helvetica Neue. It was definitely refreshing and I plan to leverage both @font-face and TypeKit a lot more in future projects (including the eventual and inevitable upheaval of Avalonstar).

Next, although I had a good amount of experience working with SASS and Compass, this was the first site I had launched where the CSS was supported by these two wonderful technologies. When you simply don't have to worry about all the browser prefixes and tweaks and leave it to people who have dedicated themselves to do a great job for you, it allows you to focus on the sheer awesomeness of the feature itself.

Internal wishes, internal struggles.

When we launched the site two days ago and throughout the process, I've had this quiet insecurity about myself. I mentioned earlier in this piece that you only have one chance to get a wedding site "right." I realized this full well and with the growing number of designers—many of them infinitely more talented than I—getting creative with their websites, it was in my nature to put myself under a lot of pressure. It's no surprise to me that I don't have the clout or the pull my more talented peers do. But like every piece that was designed for this wedding, I wanted as many eyes to see it and go, "Man, they put their hearts and souls into this." You can't avoid these thoughts with something as personal as this, because I would have simply been delighted if the people I cared most about saw it and respected what we put into it. It's a very "heat of the moment" type thought that I don't think a lot of people are willing to admit they have.

Internal struggles aside, this whole experience now becomes part of the larger one that has spanned over the last year and even the 9 years that Jen and I have known each other. Building ren.ai was the both the most rewarding site I've ever built and one part of the hardest design project of my career. Nothing will be harder than this and I can take that energy and hopefully apply it to other things after the wedding passes.

With all the stresses that have come with the entire journey, there's a part of me that'll miss building the foundation for a celebration of unity using design.

When your moment ultimately comes, welcome it and be prepared. Enjoy it, for it'll be your only chance. And above all, when you're in the trenches designing your wedding website at the last minute, take a look at your future spouse and realize why all this energy has always been worth it.