When I was 11 years old, my mom showed me how to use my first HTML editor. It was the WYSIYWG sort; where you just typed in a glorified text document and linked to other glorified text documents. I was hooked. I kept my first blog at 13– although at the time (mid-90’s), such a thing didn’t exist yet. I got a domain and put a journal online for my friends, and I had to manually figure out how to add comments. I distinctly remember being the “weirdo who shared all her private thoughts”. Every adult I knew didn’t get it, or think it would catch on. (What now, Older Generation.) I spent a lot of time perfecting my craft, and reading up on new developments in Javascript.
Earning My Keep.
By fifteen, I had a small portfolio of personal sites put together, and my parents offered my services to their friends. I made sites for small businesses, hockey teams, school libraries, you name it. It was pretty low-paying stuff, and usually took me a matter of days. By the time I was eighteen, my scope increased. The scripting was harder, the sites were interactive, the products used more time-consuming. My clients became professionals like psychiatrists and authors. I was really lucky that I eased into my career before I was even out of high school.
Web design is still one of my joys in life. Like most things technology-related, the field changes rapidly. I love the evolution of the web experience. I love the art of it– the opportunity to represent a company or a person in images and words. I love the challenge. Coming up with a concept on paper and making it work on a screen makes me feel like a magician. I wake up with a thought– a way of arranging a post, maybe, that no one has ever done before– and I’ll stay up days on end trying to make the code work. But when it does– and when you unveil it to the Internet– it’s beyond awesome. You get the collective gasp of your audience. You get emails asking how you DID that. It’s a trick, really. That’s really what all of it is; a beautiful illusion. And all of us, all of the web designers, go to each other’s sites as magicians would go to other’s shows, and wonder how an effect was achieved. We revel in a new feat. We want to copy it. We want to better it.
This all sounds good, but how exactly do you make a website?
So glad you asked! Heh.
I’m a jack-of-all trades designer. Some web designers specialize in graphics, and some lean towards programming, but I fall squarely in the middle. Often– particularly in a large company full of specialized experts– a project will change hands during the creation process, but I see my own projects through from beginning to completion.
When I’m hired for a job, I usually meet with the client– or email them– and we’ll go over what their vision is. I’ve learned over the years that most people already know what they want– they need help explaining/achieving it, not determining it. I’ll try to have them describe what they’re looking for, sketch it out if they can, and/or show me sites that they like the style of. Sometimes you have to talk it over like a therapist: “What about this site speaks to you? What does it make you feel? Is it the colors? Do you like the arrangement? Do you like the sidebar on the right? Do you like this particular font?” This is the BEST THING you can do as a designer, because it will save you so much heartache and frustration. You need to pinpoint what exactly they enjoy so you can duplicate it. I can’t tell you how many times a client thought they liked the style of the site when what they really liked is the way the menu changed colors when you rolled your mouse over. And I don’t blame the clients, either; because often, until they talk it through, they haven’t THOUGHT about what they like. As a web designer, you’re dissecting portions of a greater scheme, but to the average observer, it’s a gut yes or no. When we’ve agreed on a layout for their site, I get to coding it exactly as I would my own.
For my own personal designs, inspiration comes from everywhere— and doesn’t always pan out to an actual concept. Oftentimes, I’ll have a few false starts before I hit on The Idea.
Here’s how my latest theme came to be. (PS: If you go to my site, you’ll notice it looks nothing like this. That’s because my server got a virus, and I’m still cleaning it off.)
So, I started in May. This came from star-gazing one night. It was close, but not quite what I was looking for. I liked the visual, but it would be hard to work entries around it; both in text color and without obscuring it. And if I didn’t work the skies into the theme, then it was just a header with a black page. Scrapped.
I saw orange and gray used in a flier a couple days later, and I thought it was a really pretty, unusual color combination. By this point, I decided I liked the organic look of the skies in the first layout, so I tried to duplicate it by watercolor here. Within a day, though, I decided I didn’t like how boring the actual layout of this was: header, menu, two columns, blah. Scrapped.
About a week later, I was taking an afternoon run and was listening to ‘Horchata’ on my iTouch. It made me think of winter, of ice, and then I thought of blue, and then the blue skies around me. Blue blue blue. A pretty, natural shade. I glanced down at the cement sidewalk, and the chalk drawings children had left there.
I came home, and opened Photoshop.
The other big influence here was a Wired magazine I was reading. I love how unlimited print seems in its design, and I thought I’d like to do each entry as an article; complete with little pull quotes, a differently styled first sentence, a drop-cap at the beginning.
Here are a few closer shots so you can see the page details.
(I really believe it’s the tiny things that make a design spectacular: texture, font choice, depth, embossing, shadows. It’s details that people don’t even realize they’re appreciating.)
So now I have this file in Photoshop, and I love it, and I want to turn it into a theme. I’ll give you a non-boring version of events: I chop it up. I make a diagram, usually, of how I’m going to disassemble it. Cutting up a design is like taking apart a puzzle. Almost everything needs to be done in layers, which are positioned on top of each other. Here’s of a visual of that, if each color represents a different layer:
Then I use something called divs to organize portions of the site. Think of divs as an invisible box. You wrap your invisible box code around something– text, an image, a number of things– and then you move the box and everything inside it. Positioning things to line up correctly is much easier in groups than individually.
This can take hours, or days, or even weeks. Then you have to actually code the theme to make the entries appear, and all your widgets work. I’ll spare you that, too. Heh. It takes a lot of head-banging against keyboards– even a single character missing in a thousand lines of code can break your site. It really is all worth it, though. In the end, when you can turn just a fragment of imagination– a fleeting thought while running– into something that can be shared, used and respected by thousands of people… It’s such a wonderful feeling.
So that’s pretty much it from me today! I actually have some design work to get to. Heh. If you have any questions, or if there’s anything you want me to expound on, just leave me a comment and I’d be happy to get back to you. I’m thrilled that so many of you seemed interested in the design process– thanks for letting me share. If you’re looking for some more beautiful sites to get creative juices flowing, Smashing Magazine’s Inspiration corner is probably the best place to start. I’m always humbled by what I find there.
Michelle says
This was definitely an interesting article! I don’t think I could ever get to the level of webmastery that you’re at- but I love hearing about the creative process! Honestly all of your designs look amazing to me. I loved the night sky too. I know what you mean about the font disappearing into the background though or having to just relegate it to a header. But visually, that one was stunning to me, and definitely felt like summer.
Carol says
Wow so interesting! I absolutely love your designs. I can’t wait to click through to your website.
Ali says
I LOVE seeing how it comes together…and how all of this comes just…like…from NOWHERE. It’s amazing.
One day I will make you teach me 🙂
Gesine says
I really miss webdesign..! Even though I was not as good as you are!