Mark Bult Design: San Francisco, CA, Established 1988

Gettin' hitched, part 1: branding your wedding

After Velma and I decided to get hitched, I started thinking about some of the cool things we'd get to make as part of the process, like invitations. I also harkened back to a post I'd seen a year ago on a blog by a designer whose work I admire, Jason Santa Maria, who had made a website for his wedding and had posted similarly about "branding" his wedding and the associated collateral material he'd made.

I googled it to find the post again, and was duly re-inspired. Jason's an excellent designer with an extremely good sense of how typography works on the web and in print. He's responsible, among other things, for last year's excellent redesign of A List Apart.

Over the ensuing months, I had lots of ideas about what we could do, and kept notes in the little Moleskine notebook I carry everywhere.



From the very beginning we called it a "hitchin'." I'll get into the choice of wording a little more in a later post about the whole process of deciding to get married, but suffice it to say: it wasn't odd to us at all to call it "Mark & Velma's Hitchin' Party," since we'd already been asking each other for months if we really wanted to get hitched.

The save-the-date

Being the excellent event planner that she is, Velma had worked back from our October 7 hitchin' day to select a date to send out the save-the-date announcement.

Usually for a design project I have at least a few days to sketch ideas and browse through some magazines or something for inspiration. But it turned out that I had about a day to plan and execute the save-the-date design, and Velma starts getting antsy (read: annoying) when I let a deadline slide by much.

So, since I had a reasonably good idea of the design style I wanted to project (a little quirky, a little pop-art, and somewhat organic in texture), I just threw something together in about an hour and a half.

The save-the-date postcard was never actually a printed postcard, since we emailed it to everyone, and called the small handful of people who we couldn't email. This has several benefits, such as: postage savings (none), faster delivery, cheaper to produce (free), and the ability to use a totally custom design.



So, while it was never actually physically printed, the postcard intentionally looked like a printed piece. I used real paper for a textured background, and made the type look like it was actually printed on the paper. The stamps look real, down to the authentic postmark, but in reality every single item on the card was composited in Photoshop. I thought it'd be clever to use the "I love you" stamp, and then threw in a twist by using a postmark from Estonia instead of a U.S. one.

The save-the-date not only introduced the M&V circle monogram I used as the mainstay of the brand, but was for some people the first time they heard we'd decided to get hitched!

The website



This was going to be my favorite part, but also the most time-consuming. I'd originally planned to create the entire site as a Movable Type blog so Velma and I could both administer posts, and so visitors could comment right on the site. However, it was already going to be a massive undertaking to just design and build the entire site in a little over two weeks, plus I wanted to do it as an entirely CSS-based layout. So I shelved the MT blog idea and decided I could revisit it when it was all done to see if I had time to convert the static pages into dynamic MT templates. It turned out I didn't.

After the save-the-date postcard's somewhat rushed beginnings, this would be the first item to have a full-blown design, and it would serve as a visual touchstone for the rest of the collateral items to follow, such as the all-important invitations. So, as with any design project, I needed to do some sketches, consider typefaces and styles and colors, and seek inspiration from other people's designs. I also needed to collect and create visual assets like the M&V monogram, the type-based logo and its shield, the green wallpaper pattern background, and the little print-inspired flourishes.



At the same time, Velma was outlining and writing most of the content. When she handed it over to me it was about 85% done. I reorganized a few things to make them work better in a website environment, edited some things and injected a little more strange humor here and there, and started styling some of it for coding it into xHTML. I usually begin in xPad or TextEdit, inserting a few tags here and there, mostly for styling the fonts, and inserting HREFs if I have URIs already or by looking them up in the browser on the fly.

I iterated a few designs before I settled on one that I really liked. And it was a good thing, because I was beginning to run short on time. Luckily, I'd decided to take a week off from work because I was seriously exhausted from the pace at work during the Webshots redesign process, so I had a week I could dedicate to designing, building, and testing the website.



I chose a lively color scheme of bright greens and light yellow to invoke our nature-inspired theme and to emphasize our somewhat nontraditional take on the concept of a wedding. I counterbalanced that with black and red as more traditional print and ink colors, and chose old-style wood type fonts to give a somewhat retro old-timey feel. I used Georgia for all the HTML text, which is a gorgeous serif font even on the web (most serif fonts are atrocious on screen), and I used several gothics and slab serif fonts to invoke a feel of artisan printing techniques. Last but not least, the tiny flourishes and the minute lines and dashed lines are in orange, as a nod to my bride's hair color and to throw in a fall color for our autumn wedding. The orange thread we used to stitch the invitations later was not just a coincidence.

After finalizing a design template that would be generally unchanged for most pages, I created some header variations for the content area in the center. Some of the pages needed simple headers and some needed headers with sub-headers. I used HTML text for the headers in keeping with good web-standards techniques, and spruced them up by bookending them with graphic flourishes.



After the basic page template was designed in Photoshop, I created the Photos, For Out-of-Towners, and Gifts pages next, since their content would vary most from the other pages, which are largely just text pages with nice styles and spacing applied. I knew I wanted to make something special for the Photos page, but that it had to be pretty fast and easy to implement, and needed to be updatable later with wedding and honeymoon photos. I liked what Jason did on his site but I didn't want to mess about in Flash and didn't know what he'd used.

I decided to experiment with Lightbox, a fairly new and very cool JavaScript library that seemed like it would be fairly pretty easy to implement. I hoped, anyway. Turned out it was easy, and I had our photo gallery up and running in an afternoon once I started building out the xHTML pages.



I spent most of the weekdays on my week off building the xHTML framework for all the pages and the CSS to make it all look good. I use Dreamweaver to do all this stuff, since it just goes about a million times faster than hand coding used to. During the process of making a fairly complex three-column CSS-based layout without tables, I relied heavily on Dan Cederholm's excellent book Bulletproof Web Design, which I can't endorse highly enough.

Most astonishingly, I was able to build a site for the first time that validates for xHTML 1.0 Strict instead of just Transitional. I rather surprised myself by being able to do it.

Later I'd enlist the help of Jason Ables, who gave me his handy little PHP script for the RSVP page. And while I spent an hour or two looking into Perl- and PHP-based scripts to create an interactive poll for our Surname Survey page, I simply ran out of time and had to use a simple "email us your suggestion" link.



I spent a lot of time and effort on the website, and I'm very happy with how it came out. Being the perfectionist that I am, there are of course a few minor things I would have done differently or better, given more time, but all in all it came out about 98% perfect, which is more than I can say about almost any client project. So I'm very pleased with it.

The site was recognized by a number of CSS galleries, sites that serve to inspire other designers and to showcase exemplary use of design and web-standards coding.



The invitations

I'm a pro at doing invitations, I've been designing them for all kinds of events and parties for over 15 years. But this was actually the first time I'd designed a wedding invitation. Designers love to show off how clever they are when making their own wedding invites, and I'm no different in this regard.

Given more time and money I would have made them exceptionally elaborate, with letterpress printing, tipped-in sheets, and other fancy printing techniques. But it was actually more important to make them by hand for two reasons: I wanted to show the personal care and effort we were making with each one. Also, it was important to us to plan and execute a wedding that was fun but not incredibly expensive. It would be against our principles to spend $50,000 so frivolously when you can have a wonderful, memorable time for a fraction of that cost.

So I turned to long experience with designing great-looking collateral materials for nonprofits who never have any budget for printing. I've become somewhat of an expert at this, and I called on all that experience to create a design that was totally professional looking but also totally unique. To top it off, we assembled the entire thing ourselves and probably made and mailed them all for less than $300.



I used a ream of paper I'd had left over from a client project about eight years ago. I used another ream of paper we'd picked up at a surplus store for about $2 (retails usually for about $30). I bought a matching ream of cover stock for the CD inserts and the RSVP postcards, and a box of envelopes.

Velma carved the block designs for the front leaf pattern from oak leaves she'd collected. Velma and I did the block printing in one evening, and by morning they were all dry. I designed the cards in Adobe Illustrator and intentionally made them fit two-up on a normal sheet of letter paper, so we could print everything in-house. The only exception was the RSVP cards, since I couldn't get the heavy card stock to feed through the printer. Instead, I took those to Kinko's and they were copied and cut in about ten minutes.



I hand-cut and folded all the other pieces and then our friend April assembled them while Velma sewed the orange stitch in the spine using her sewing machine.

We stuffed the 70 or so invites ourselves and Velma hand-addressed them, and affixed the special stamps I'd ordered from Stamps.com a few weeks earlier. The stamps turned out to be the most costly part of the whole invite, probably around $150 or so — one on the outer envelope and one on the RSVP postcard inside. The rest of the invite's printing cost nothing since we did it all in-house. Needless to say, the design was free : )



I'm extremely happy with the way they came out. They're very distinctive and definitely match our personalities, and they were a collaborative effort through and through (even if Velma felt for a while like I was hogging all the work).

The rings

I don't know where Velma came up with the idea of getting tattoo rings, but I liked the idea instantly. I've been considering a tattoo for a couple years now, and I was pretty close to getting one last winter, but never really got around to it. Actually, until two years ago, I'd never really considered it at all. I didn't dislike tattoos, but was never that interested in them either. At least not having one permanently on me.

But that's one of the reasons I liked the idea of tattooed wedding rings. Its permanence. After all, it would be a strong statement of our commitment to say to each other that we'd permanently wear our wedding rings.

We made sketches of patterns over several weeks, trying to come up with a design that would be personally meaningful and also simple enough to do in such a small space. We played around mostly with ways to try to entwine the letters M and V, but never came up with one we were both enthusiastic about.

Nearing the hitchin' date and needing to decide on something, I took a black felt tip pen out of my drawer and sketched a simple leaf on my finger — just three lines — and showed it to Velma. We had our ring design. The leaf is a significant symbol for both of us as environmentalists and lovers of nature, and the design also happened to be aligned with the design of the invitations and website too.



The other benefits, by the way, are that you never have to worry about losing your ring, and tattoos are a lot cheaper than diamonds ; )



The favors

I had all sorts of ideas for wedding favors I wanted to make, and was probably being way too ambitious considering we didn't have months and months to plan and execute them all, and some of them would've taken a considerable amount of time (like mini photo books).

At some point Velma remembered a post I made in January about a website where you could print custom messages on MMs. She'd also come across a similar site where you could personalize the printing on Sharpie pens. We'd half-jokingly discussed filling in the ring tattoos with a Sharpie at the ceremony, since we'd have to get the tattoo a week before so it'd have enough time to heal.

We were running low on time, and the Sharpie website didn't have anything saying how long it took to fill and ship orders, so we decided to just get the MMs, which we could get with time to spare.



We'd made a huge playlist of awesome songs to play on an amplified iPod at the park, and I wanted to make DVDs with several hundred songs for everyone, but Velma was concerned that some people would want a normal audio CD to play in their cars. That, and the fact that we had less than a week to go at this point, limited us to a playlist of 22 songs on about 75 audio and MP3 CDs we burned over the next few days.



I made two special insert cards that showed which was an audio CD and which was an MP3 CD, and had the song titles and artists on the back. For any guest who didn't get one, we have some extras and I can mail you one, or you can stream Volume 1, a bunch of extra songs we played during the day that didn't fit on the CDs, using this handy little player I found. And if you're savvy enough, I bet you can figger out how to download the ones you like.

The photo & recipe book

This part's yet to come, so I'll update the post when it's actually finished : )

Update: Regarding the oak-leaf motif used throughout the design of our Hitchin' website and invitations:

I recently learned (from a post by J.K. Rowling, interestingly) that the Oak is the Celtic tree associated with the birthdays of both Velma and myself (June 10 through July 7). I'd like to say that I'd pre-planned this symbolism in the design stage, but I didn't. The use of oak leaves was connected to our selection of the Oak Grove picnic area in Huddart Park, and was symbolic to our overall love of nature and fondness for oaks in particular.

But the Celtic birthday association is a pleasant bonus.

tags: hitchin', Velma, personal, friends, music, design, web design

Labels: art, branding, design, DIY, environment, family, hitchin, how-to, logos, Mark Bult Design, misc. personal, typography, Velma, web design, webdev

Posted by espd at 11:49 PM | 
Share and enjoy:  | Email this: