Designing in Code

I went to art school. I was trained as a designer, an animator, an illustrator. The last thing in the world that I ever thought was that I would fall in love with code. No, code is a bunch of numbers and letters and symbols and it doesn’t look pretty and it doesn’t make any sense and it’s complicated. Code is for nerds. For geeks. For those freaks sitting in their grandmother’s basement, eating chips and drinking over caffeinated sugar bombs. Code is for BOYS.

So imagine my surprise when I woke up one day and realized that I no longer need a graphic program to make art. I no longer need images to create beautiful things on the web. Nope, I can design in code! It just happened. It’s not like the ability hasn’t been there, but to me it’s surprising that it’s suddenly possible for me to use numbers and letters to create visually stimulating design pieces.

Zythepsary was designed in code. Sure, I made the blue lined background image in a graphics program. And obviously that wicked awesome picture of me is a graphic, but the layout, the logo, the flames behind the headers – it was all done in code. It wasn’t clinked out in Photoshop first. I sat around playing with degrees of blur and shadow and colors until the image on the webpage looked like the image in my head.

I don’t see the color wheel in a graphics program anymore, I see hexidecimals. I know that if I want to lighten a color, I have to throw in an “F” or an “FF”. I know that if I want to create a rounded rectangle, I’m going to need a -moz-border-radius (and a webkit-border-radius and a border-radius). I know that if I forget a semicolon my spacing might be off, and I know that if I want to create a neon effect I can add shadow after shadow after shadow with the x and y positioning moving in segmented steps.

And it gets even better. I know that
$(document).ready(function() {
$(“.class”).click(function(){
$(this).can(“do”).anyThing(“and”).will
(“be:awesome”).and(“snazzy”);
});
});
I know that the good folks at Google are constantly adding new webfonts to their libraries and that my friends at Mozilla are constantly improving the best browser in the world so that I can keep mixing and shaping and remixing the web. The new Firefox 4 is so wickedly awesome my eyes burn from not leaving my computer since it was released in beta! Those wonderful Mozillians are improving and creating the tools that make designing in code possible. Firebug is absolutely priceless! And have you seen Butter! Or Web XRay Goggles from the Hackasaurus project!? Or Open Attribute?

I am empowered, and you can be too. Become a webist! Sure, it might take a little effort to get to a point where you can get the image in your head out into the world using code, but it’s just something to learn. It’s not hard, and there are plenty of resources.

Get intimate with the web. Learn about how you can build it, change it, contribute to it. The web, my friend, is an open book.

Related articles

• Enter The Hackasaurus (toolness.com)