Mark Bult Design: San Francisco, CA, Established 1988

Web design and development for small and large business, e-commerce, b2b, b2c, SAAS, and community websites. User experience design and usability testing.


Saturday, October 31, 2009

A spooky story for Halloween

I was young, maybe 11 or 12, and spending the day with my cousins and aunt. She was taking us for a drive around the lake, maybe to get ice cream or something, when one of my older cousins suggested she drive by “the witch’s house.” I had no idea whether he was serious, but when we approached the old rickety thing and slowed down, I definitely began to wonder at the sight of it.

Shutters falling off, paint long faded and chipped away to bare wood, dead and droopy trees all around, and dust and cobwebs everywhere. It looked every bit like a kid’s worst nightmare image of a real haunted house. It didn’t look inhabited, but it was hard to tell. Then one my cousins screamed “There she is! I saw her in the window!” and we all freaked out as my aunt drove off in a hurry.

But that wasn’t even the scary part. That just served to put my childhood heart in an appropriate spooky mood.

A short way down the road, right by the side of the lake, was a tiny cemetery overgrown completely with weeds and shrubs. It must’ve been at least a hundred years old. There certainly hadn’t been any recent activity in many, many years. We stopped to look around, and my cousins and I bravely trudged around, pushing aside grass that was taller than we were, when suddenly I fell! Left leg swallowed up by a grave! Panic swept over me in an instant and I’m certain I started screaming for help.

Visions of rotting hands grasping at my leg and arms emerging from the hole were swirling into my mind just as my cousins arrived at my side to help pull me to my feet again, all limbs safe above ground. When we looked down we saw we were standing on the flat stone top of some sort of below-ground mausoleum or a grave that simply had a massive lid, and the lid had been moved partially away, leaving a hole just big enough to swallow up a kid, or at least one of his legs.

We were too freaked out — me especially — to investigate any further, so we made a hasty retreat from that tiny, overgrown spooky graveyard, and I never went back.

Labels: , ,

Sunday, December 28, 2008

A 2008 holiday gift for our friends and family



Velma and I decided to do something a little different this year. Happy holidays to you and yours.

This mini-site took me about 2.5 days for design, about 2 days for coding. I hope you enjoy it.

Labels: , , , , , ,

Sunday, September 23, 2007

Ozark Handspun featured in a book



The in-law peeps, Dave and Terri, have been featured in a cool new book for hip knitters: KnitKnit: Profiles + Projects from Knitting's New Wave, along with our buddy Sarah Kohl, who makes ultra-cool handbags out of Ozark Handspun.

I'm still their "webmaster" (man, that term sounds so outdated), making occasional updates, especially to the ever-growing list of stores where you can get the yarn (now in four countries!).

Labels: , ,

Sunday, July 01, 2007

Heading to Missouri for a week

Velma and I leave Sunday morning for seven days in Missouri. We'll spend a bunch of time with her family in and near the capitol Jefferson City, including the 4th of July, and we'll also go to St. Louis to visit friends and the awesome City Museum.

Then I'll head to Kansas City for the Heinlein Centennial on 07/07/07. I've been looking forward to this event celebrating the 100th birth year of one of the most influential authors of the 20th Century, and certainly the most influential on me personally. Yes, I'm a dork.

Our friends Carmen and Teg, Olya, and Laura will be looking after our problem child Orson. May the Force be with them.

Labels: , , ,

Saturday, November 04, 2006

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: , , , , , , , , , , , , , ,

Thursday, April 28, 2005

Invasion of the little people

There were all these little people at work today.

Am I being politically correct? What's the correct term? Age-challenged individuals. Rugrats. Kids.

It was Bring Your Daughters and Sons to Work Day (their emphasis) at CNET, so a slew of kidlets were being ushered around my floor, where all the funtime activities were happening. Pizza lunch and a screening of The Incredibles (I would've gone, but I possibly would've felt slightly out of place).

Interestingly, most employees who brought their kids brought very small children. It seemed to be a lot of toddlers, a few tweens, and one girl who was maybe 11.

I remember when I was a kid and I used to go to my mom's work when there was a school holiday like Parent-Teacher Conference Day or whatever. Or spring and winter breaks.

I used to look forward to it so much. I'd help around the office, filing and stapling and doing lots and lots of copying. I always loved doing the copying, maybe because I got to use this big ol' machine, and whenever it jammed or refused to work, the adults seemed amazed that I could actually unjam it.

When I was a bit older I had an ulterior motive. By the 7th grade I had started my first publication, an Ozzy fanzine called "The Fellowship of the Blizzard." I hadn't even read The Fellowship of the Ring, but my friend Rocky Mullin suggested the name, and I thought it was awesome.

I was collecting scads of Ozzy ephemera. Clipping photos and stuff out of magazines like Circus and Hit Parader, and writing everything for the newsletter myself, and "typesetting" it (it would be years before I'd hear that term, though) on a typewriter at the public library after school, where you had to put quarters into a timer to rent the IBM Selectric.

I'd take the magazine pictures and the cut-into-columns articles and paste (well, sellotape*) all of them together on a sheet of letter-sized of paper. I had no clue what a halftone was, and no idea about any other production techniques (like not using tape, for example) until much later in my "career."

After a couple months, I'd have enough pages put together and I'd be anxiously awaiting my next school holiday, when I could go to work with mom. I'd spend half the day photocopying my little newsletters, collating, and stapling, and at the end of the day I'd head home with mom, my backpack bursting at the seams.

[image to come]

I did this from 7th grade through the middle of high school, and I think I made about 40 issues. I actually had a few subscribers, and I had a couple of stores that actually sold them. "Rock shops," as we used to call them. Not where you buy crystals. That craze came (and went, thankfully) later. A rock shop was where you got your Def Leppard T-shirts and your Whitesnake bumperstickers. Don't laugh. I was 14.

Anyway, The Fellowship of the Blizzard was the precursor to my eventual four-year career as an indie newspaper publisher of Western Front News. But more on that some other day.

All I can say is, I seriously doubt that my mom's places of employ ever knew how instrumental they were, being patrons to my burgeoning career as a self-styled newspaperman/boy. But they definitely foot the bill for a decent amount of paper and copier toner over four or so years. And for that, I thank them.

(* So disappointed that my xPad spellchecker doesn't recognize the word "sellotape". Not to mention "bumperstickers"!)

Labels: , , , , , , ,