Getting started as a Web Designer, Part Two
To round out my education as web designer, I decided to program a website I had designed myself. I’ve been designing for 15 years, so I have confidence in my skills on the design side. I’ve worked with our programmers quite a bit, and have looked at enough code to have a decent understanding of HTML and web technologies. However, I didn’t have the slightest idea where to start when it comes to coding a site from scratch in order to make the “magic” happen on the “interwebs.”
The engineers at Loud Dog have always encouraged me to build my own site to get a better understanding of what challenges they face when programming a site. And although I’ve always agreed with them that this would help, it has always been so easy to depend on the experts that I work with, that I never got around to it. After all, most successful websites are built with teams of experts, and not by a single talent. Why should I learn to program when there are dozens of other experienced engineers out there to do it for me, right? Wrong. I wanted to see into their world. I thought to myself, if I could do this, maybe someday those guys would think design was as cool as the latest jQuery techniques.
We work as an integrated team at Loud Dog so that our designs and engineering deliverables are seamless. However, there is still an invisible cultural barrier that sometimes lies between designers and engineers. (i.e. we make fun of each other for certain quirks which we don’t understand about each other’s respective passion). I did a study abroad program years ago in college and learned that sometimes the best way to enrich your existing knowledge is to get outside of your comfort zone and experience some culture shock.
After putting myself through this exercise, I realize now that my designs can only improve with what I have learned. I won’t be programming the websites we create for our clients yet, but my understanding of what goes into them will improve our designs, as well as help my team communicate with our engineers. For those of you out there like myself, who like to design but don’t know how to program – there’s never a better time than now to pick it up and teach yourself some basics. You might be amazed what you learn about yourself as a designer.
Web design as craft
There are many ways to execute designs for the web. With the introduction of drag-and-drop programs like Adobe Go Live and Dreamweaver, and the constant development of popular content management systems (CMSs) like MoveableType and WordPress, designing and building a website has become a much less daunting task than it was for me in 1998, learning basic HTML in a text editor and testing it in Netscape. However, as my favorite Foundation Drawing teacher always used to say, you won’t be able to achieve the gestalt of Picasso in his cubist period until you learn to draw the figure as it appears in life. In other words, you must know the building blocks of your area of expertise in order to be a true craftsman.
I happen to be lucky enough to work with a small team of craftsmen that build websites the old fashioned way – or the “only way” as they might tell you – with a text editor and their keyboard – type, type, type. They hand code all of the sites we build. And they do it with an elegance and efficiency that no application ever could. This is a little intimidating to a designer like myself, but the team was very nice about helping me get started.
How I got started
I began this side of the process by becoming acquainted with the language – XHTML and CSS. I wanted to be able to answer the question: what does the code mean when I’m staring blankly at it in view source mode? So our Lead Engineer pointed me to HTMLdog.com, where I walked through the tutorials and created my very first web page. It was not pretty, but it was an .html file with embedded CSS styles and it worked in my browser! Learning the basic building blocks has helped me identify problems in our websites during the testing phase of our process and effectively communicate with engineering in a way that was clear to us both.
Then, I had an opportunity to design a small website for a close friend. I started in our usual way, by creating site mockups in Adobe Fireworks. Once I had a layered mockup complete that she liked, I wondered – what is the best practice for getting started? Literally, what do I do first to start coding? And so I sat down with our engineers and had them walk me through setting up my index.html file to get started. I was amazed at how quickly I was addicted to writing code and instantly seeing my changes in the browser. I love instant gratification!
I really only needed two resources and a few essential tools to get down to coding my own website. I hope you’ll find them as useful as I did.
My favorite resources and tools for learning how to code:
This site was instrumental to me in terms of learning the basics about HTML and CSS. It provided hands on tutorials and put the mystery into a context I could understand.
Learning Web Design
by Jennifer Niederst Robbins
Throughout the build of my first site, I used most of this book to understand the concepts of building a website from scratch. This book was extremely easy to understand – I could jump around in the book to things that were relevant to what I wanted to do. And it has great exercises and tutorials for you to practice as you are learning.
I used this Mac application to write my .html and .css files. It formats the code nicely for me and keeps it easy to read.
I used version 3.0.1 of this browser to review my initial code while working locally on my machine to see my progress with the website layout and styles. The beautiful thing about working in Firefox is that it has so many great plug-ins for web developers.
I can’t imagine how web development was done before the invention of Firebug – an essential tool in my mind – it allows you to inspect your code in your browser and modify it real-time to see how tweaks to bugs might perform… and that’s just the beginning of what it can do. Unfortunately, it can’t fix bugs in IE6 – arrgh!
Of course, I couldn’t have done things quite as easily without constant access to the well-trained minds we have in-house. I have been somewhat spoiled to work with a great development team that has supported my efforts to learn just the tip of what they know.
The biggest thing I learned from this experience is that you don’t have to do it right the first time, but you do have to do it. And I’m so glad I did!
When the website launches later this year, you’ll be the first to hear more details on how I did it, from design to deployment.
Hey! This wasn't written by a pride of lions! It was written by Jodi Wing, who does awesome work at Loud Dog, a digital branding firm in San Francisco that helps businesses express themselves authentically via identities, websites, and marketing collateral.
If you want us to do awesome work for you, if you have a question, or if you're just feeling lonely and want to chat, we want to hear from you!