All articles in Design

Supposed to fire my imagination

Posted January 8, 2010 in Design

I am happy to announce that my new design is up and running fairly well. This morning, I made a dynamic menu/title (the former, thanks to this article, the latter a result of some very basic programming — but I’m not here to brag). I’ve been working on this for about a month, maybe a little longer, and the final result is a great deal more polished than my original mockup — but it’s not that different either.

My process

Most of the mockups I’ve ever made in Photoshop are unfinished in some critcal way. Maybe the color aren’t quite right — that always takes a lot of tweaking once you have to see them all over the screen — or maybe that logo isn’t all it’s cracked up to be. Maybe it’s not your logo at all, it’s a logo that was swapped for yours at birth, and now it’s a hunchback with tentacles, and you don’t know where you’ve gone wrong as a parent, but it’s happened, and now those angst-ridden teenage years are coming on fast and—

That was not the metaphor I had in mind. Moving on…

Mockups and markup

A lot of people have probably already read Meagan Fisher’s article on mockups vs. markup, and if you haven’t, do it right now. Photoshop mockups are extremely inflexible. While I think it’s important to play around in Photoshop just to get your bearings, know that 90% of the work you will be doing will be with markup. Every now and then after I exported the images for my design, I’d return to Photoshop to grab a color (although Colourlovers helped out a lot), or refine an icon, but that was it. When you know what you want to do, Photoshop is pretty much useless.

So as soon as I got out of the whirlwind of possibility that is Photoshop with a decent design, I churned out Version One, which will never be seen by human eyes; then, Version Two, which is similar, but better; Version Three was nearly there. I broke away from the vertical menu to tabs, which I hadn’t done in a while. At any rate, it seemed to suit the theme, and left the sidebar open for content — delicious, delicious content.

Trial and error

I initially tried to get pointed tabs at the top of the page, but the varying widths of my tabs made that a bit more trouble than it was worth. I compensated by…using -moz-border-radius around the place. Because those things totally go hand in hand.

I hadn’t tried rgba before this design, and I wasn’t sure if it was worth it. Within seconds of applying it on the navigation (I thought it would be unwieldy and superfluous everywhere else), I changed my mind. It is extremely easy to use, and very pretty if you use it right.

I also tried out Cufón and @font-face for the first time. I stuck with @font-face, because it was the easiest to manipulate. I could change weights and fonts without having to upload a new Javascript file every time. But I have to say, Cufón is very neat. If you’re using sIFR, Cufón is infinitely easier to use. I mean, for chrissakes, there’s a generator. And it renders very smooth. @font-face renders a bit choppily (this might be caused by other things as well), but unlike with Cufón, I won’t have to worry about selecting text or :hover (this is apparently supported, but I couldn’t get it to work).

Then, I thought about upgrading from Movable Type 4.1 to Movable Type 5, which was released a couple days ago. After a few minutes of playing with my installation, I decided not to. The interface is gray and boring, the navigation is a bit confusing. I’m not sure why they got rid of MT 4’s UI, because it seems infinitely better.

So that’s a wrap! I have a few more things to clean up about this design, but I’m pretty happy with it. Let me know what you think! :)

All the forward thoughts

Posted March 6, 2009 in Design

After weeks of hating on Stephen Fowler and women who have litters of children because the only thing that can cure the wretched emptiness that is being absolutely crazy is to fill yourself to the brim with babies and bankrupt the state of California, I decided that everyone’s heard quite enough about them. Thus there’s no point in writing an entry about them, which actually makes me very sad, but here are the cold, hard facts: I find them both detestable. Like feta cheese, but without the edible quality. So really, just like feta cheese.

My batshit meter has gone through the roof on a regular basis in the past few weeks, which is actually a terrible thing because the force of pounding through four floors of concrete, wood, and asbestos tends to break glass, and batshit is not a pleasant substance to tumble out of things. No, I really do suggest colored alcohol for any and all measuring devices. Much cleaner. I’ve reached another useless period in writing both on this site and on my novel. But a lot of good things have been happening. I won one of two Joynes Fellowships for creative writing, which is just the boost I need to get back to work. I have chorus roles/small parts in two musicals, Chicago and Into The Woods.My house in Friendswood is practically inhabitable again — it’s like a brand new house on the inside. And the carpet feels like awesome. Fuzzy, white awesome.

So, instead of spending words and words that stuff, here’s a better idea: I thought now would be a good time to feature some of the stuff I’ve worked on recently, recently being in the past few months rather than, say, recently. Enjoy! And I hope to come back with some quality thoughts, rants, and writings very soon!

Calliope Mango Hefeweizen (label)

Calliope label for my brother.

If you like this, I also made a label for my brother’s brown ale, Bouncing Betty

The Portrait of Marie (logo and website)

Logo for my roommate's faboo short film

Toxic Mega Colon (logo — they are an evil folk band)

Toxic Mega Colon

Also for my brother. Do you sense a trend?

Beware of soft shoe shufflers

Posted February 11, 2009 in Design

I think this is a giant load of crap. I’ve heard people say “We gave up and used tables instead of CSS” quite a few times in the last month alone. The real argument is: <div>s or <table>s for layout? And honestly? The right choice should be obvious.

The fact of the matter is once your industry sets a precedent, you should follow it. Except in rare situations, all of the layouts someone could successfully launch using tables can be emulated with divs. Divs load faster, are easier to fiddle with, and aside from the small difficulties of floating them and aligning them (which get easier with practice), are infinitely better building blocks. The best thing about using divs is you only really need one tag. Tables require nested levels of <tr>s and <td>s, which makes the code slower and harder to edit. With divs, you eliminate ambiguous structure and purpose.

And the argument that you have to use hacks and conditional comments in order to make a pure layout work is ridiculous. My design is a pretty basic layout, but look! No hacks! I can say this for a lot of other sites as well. Hacks are, by definition, tweaks, not structural elements.

I Am El Gringo makes the argument that sites like MSN and MySpace have mostly pure CSS layouts because they are overcompensating for years of criticism, and sites like Amazon, Google, and Ebay that use tabular layouts don’t … have to worry about how the web design community sees them.

Yeah, it couldn’t just be that some sites take advantage of tableless layouts to decrease load times and increase ease of maintenance. And all that stuff about them meeting design standards and surpassing them? It’s just them showing off. On the other hand, since when has Ebay EVER been a shining example of good design? Who wakes up in a cold sweat and raises their finger to the sky and says, “You know what? I want my site to look just like Ebay!” Google really has no excuse. Most of Google’s content is textual in nature. But, as in Amazon’s case as well, do we have an alternative? Yes, we deal with bad design on a daily basis, but that does not mean that we should excuse it in situations where the alternative is very easily implemented. I think it’s ridiculous for someone to say, “You’re setting the bar too high for me. I can’t handle your elevated expectations!” and then argue that the standards he is fighting against are created by haughty designers and imposed by people who don’t have any idea of how real people make websites.

You know what? Real designers appreciate standards and stick with them. Real designers use divs. And if I could learn how to use tableless layouts at fourteen, you have to have a better excuse than “it’s too hard.”

And if you’re curious, just take the time to ask yourself whether you should use tables. The answer should not surprise you.