I’ve been super busy since I last updated the site. Here are all the projects I’ve been working on. There’s more too, but it was just code work – not much to show there
Web Design
Illustration and UI
I’ve been super busy since I last updated the site. Here are all the projects I’ve been working on. There’s more too, but it was just code work – not much to show there
Back in December I submitted my story to Freelancers Union and promptly forgot about it. I just checked in and discovered that they published it at the end of December.
Here it is for your reading enjoyment, please keep in mind that I am a designer, not a writer
First is a political web site for Alicia Aguirre. Next, we have Bassnite.com, a site for partying New Yorkers. After that, Live Local Card for those San Franciscans who like to support local businesses. Third is still a work in progress, Wecision. Then we have SWAle, a non-profit that needed a facelift. And last is another SF non-profit, Blue Greenway. Enjoy!
A friend of mine recently used 99 Designs to get a web site design and was extremely disappointed. While a site like that may work well for logos, it does not work well for web sites. He was under the impression that if he paid between $1,000 and $5,000 he would have a variety of professional site designs to choose from and that they would blow him away.
Not the case. For his project he needed three pages designed. Only two artists submitted three pages and a couple others submitted one page. It makes sense that they would only submit one page because there’s no guarantee they will win the job. So why put it in a ton of effort for no pay? His options were limited.
In the end he settled for one of the two who put in more effort, but he still wasn’t that happy with what he got. The designs were somewhat amateur and the code was pathetic. He could have hired me for the same price, had three top notch (and different) designs to choose from, and would have had pristine code delivered to him.
This probably goes without saying, but I think he will be hiring me next time!
Yikes, I haven’t updated the Portfolio since November! And here’s why…
A local company in the Mission District, San Francisco. They make laser-cut cardboard stands for laptops.
Located in Houston, Texas, these guys make some fantastic cupcakes! I know because they sent me some as a thank you gift
Making t-shirts for ladies who ride motorcycles, because someone had to finally do it!
An eco-friendly residential cleaning service in the Bay Area. Super friendly too!
Ads promoting Zinch to high school students trying to decide on which college to attend.
A party invite for the Golden Gate YPO.
In much the same way that an interior decorator might redecorate her house often, I have decided to redesign this web site. I’m not too fickle though because the original design lasted a whole two years. As I continue to create web sites (over 13 years now!) my design skills mature and grow, and this web site needs to reflect that. I’d like to share my process with you.
I begin with thumbnail sketches. In my head I look at these tiny pencil drawings and see color and texture. As I lay things out I think about what I want to focus on, what the viewer should focus on when they see the site.

Then I create a more fleshed-out color sketch. I play around with a color palette and continue thinking about the focus and the content. Part of the goal in this redesign was to focus what I offer as well as the visual elements. I was really happy with the colors of this sketch.

After that I move on to Photoshop. The first attempt was quite a bit too dark and unfriendly. I reassessed the situation and lightened it up significantly, settling on the design you see now.

Then it was just a matter of creating a new WordPress theme and turning it on. Viola! I should also note that I was excited to upgrade the code
Recently one of my clients asked me to talk to their developers about good practices and common problems for CSS. Here are some quick notes that I presented on the topic.
Check First and Reuse Before creating a new set of attributes and rules for a new item, its a good idea to look around the site and see if something similar already exists. There’s a chance you can just use it or add on if you need to make a small change. Making the CSS reusable will help cut down on file size and save time. Here’s an example of building on something that already existed:
button, a.button {
background: url("/images/buttons/basic-forms.jpg") center center repeat-x;
border: 1px solid #c5881e;
color: #000;
padding: 3px 12px;
margin: 0;
border-radius: 4px;
-moz-border-radius: 4px;
}
button.light, a.button.light {
background-image: url("/images/buttons/basic-forms-grey.png");
border: 1px solid #aaa;
}
button.green, a.button.green {
background-image: url("/images/buttons/basic-forms-green.png");
border: 1px solid #666;
color: #fff;
font-weight: bold;
}
a.button.green:hover {
background-image: url("/images/buttons/basic-forms-green-over.png");
color: #000;
}
IDs vs Classes IDs should only be used once on a page, they are a unique identifier, hence the “ID”. Classes can be used many times on a page.
Names IDs and classes should follow a consistent naming convention. For example, make them lowercase with a hyphen between words: .page-with-sidebar. Names should also be semantic to give more meaning to those folks following in your path.
Absolute vs Relative In general its a good idea not to use absolute positioning because it can cause problems across browsers and if elements around the absolutely positioned item are changed. Relative positioning will more likely adjust to changes without extra attention. There are some occasions though where absolute works best. For example, text inside of a starburst. The starburst div can be self-contained, so the absolute text inside will just go along with the ride.
Font Sizes Fonts should be set using ems, that way if the user has a larger font set for the browser all the fonts will adjust appropriately. The only time you want to use pts is if the font is restricted inside of a graphic (like the starburst mentioned above). Though most current browsers these days just increase the entire site, not the font alone.
Individual CSS Files When building out a new section or page that requires a lot of CSS you should create a new CSS file. If it has items that would potentially be used in other sections, then it should go in the main CSS, otherwise the individual file is best.
IE Hacks Not recommended, but unfortunately necessary. There are several types of IE hacks, but these are the best because they validate:
.testimonial .quote {
font-size: 3em;
}
* html .testimonial .quote { /* ie 6*/
font-size: 1.4em;
}
*+html .testimonial .quote { /* ie 7 */
line-height: 1em;
}
In the past I would put hacks and rules in a separate ie.css file, but overtime it seems to be more appropriate to put them right next to the items they affect. That way if changes need to be made the IE rules are right there to see.
Tables Should not be used except for tabular data.
Width Most of the problems in IE 6 and 7 have to do with widths and floats. Older IE browsers, for whatever crazy reason, don’t determine width the same way that other browsers do. To troubleshoot this problem I usually put red borders on the items involved, so I can see where they sit (you might want to create a class for this, like “debug”). To solve this problem usually means to adjust the width and make it smaller all around, or for that version of IE specifically using a validated hack (see above).
Empty Divs A couple of times I’ve come across empty divs around things. These cause problems because they don’t have any attributes assigned to them, so the divs inside that are supposed to be doing things don’t know how to behave. In many instances divs need to depend on their parents in order to work properly. In these cases removing the empty div often fixes the problem.
IE Ignoring Changes Remember how I mentioned a separate ie.css file above? Sometimes making changes to the regular CSS files don’t seem to affect things in IE. That could be because the IE CSS files are overwriting them. A quick look in those files will help eliminate a potential problem.
And there you have it. What have I left out? What kind of problems have you come across?
It’s been quite a while since I updated the old portfolio with new designs. So here we have a whole slew of new web design, logo design, user interface, business cards and print collateral. Phew, what an update!

In the spring I was approached by a client to tackle a Drupal 5 to WordPress 3 migration. I had never done this before, but I was willing to take on the challenge — and boy was it a challenge!
I’m not a database expert, so my first step was to do a search for some type of script that would assist me in this daunting task. I found several helpful resources, but they were all just a little off (they were for earlier versions of WordPress). To solve this issue, I just installed an earlier version of WordPress, made the migration and then updated WordPress. (This is the script I used)
It wasn’t really that simple and straightforward though, I had to make quite a few changes to the scripts (with the help of my husband) and after many passes and many hours looking at the two databases, I was able to move the Drupal content into WordPress.
Even after moving everything over there were still a lot of things missing, or misplaced. I had to massage some of the items in the WordPress database to fit properly. The client was using an events module in Drupal, and that didn’t transfer over at all. In the end, the client had to move the events over manually.
This was not an easy project, but given the chance I would probably do it again. Here is the new web site using WordPress, which the client loves by the way!

In part one of “Spreading the Word” I talked about how to optimize your site for search. Now I’m going to give you some suggestions on how to reach out to the people you know (and the ones you don’t) to let them know about your fantastic new web site.
When I began freelancing I sent http://smackhappydesign.com/wp-admin/edit.phplinks to friends and family asking them to promote my site on Delicious, Digg, Reddit and Technorati. I went to each site and created the appropriate links to include the email, which made it easy for them to help out (my original links are listed below). Here’s the message I sent:
I’m trying to generate a little buzz for my new company. If you have an account with any of these sites, please bookmark, fan or digg me, I can use all the help I can get!
Another somewhat easy thing to do is write a press release. I’m not the best writer in the world, so I hired this copywriter. Once we finished the press release, I submitted it to a distribution service. Here is the one I used, plus the others I considered:
If you don’t already have one for your business or web site, create a twitter account and tweet about your content or field as often as you can, but make it personal — don’t just try to sell to your audience or it will sound spammy. Read this article (and the ones it links to) about finding freelance work. Even though it is geared towards a specific industry, I think the overall message still applies.
Add a signature to your email that includes a link to your site, along with your tagline or a brief description of your business. That way every time you communicate with someone they’ll see that you have a web site and they might even forward it on.
I mentioned doing a “Link Exchange” in part one, but I think its worth reiterating here. Look for blogs or forums that are related to your industry. Try to comment on them and include a link to your site. Set aside some time to do this at least once every week. Try to answer questions, or post questions and get your name (web site) out there. As you write on these other sites, you build yourself up as an expert in your field, and consequently, you also build up a great link network that will help you with SEO.