Getting Started With Web Design

A few people have asked me recently where to start with learning Web design, or re-learning standards based Web design. I figure this is a question I’ll have to answer on several occasions, so I thought I’d create a post about it. There are whole sites out there dedicated to Web design, but the purpose of this post is to point the direction to the starting line. So, here we go.

update 8.31.2007: I’m bringing this article up to date with my current set up and a few other links.

### Tools Of The Trade ###

Like any trade, you will need a few tools in order to be a successful Web developer. Here’s what you’ll need.

1. **A computer**. If you are reading this, you already have one. If you are serious about “this whole Web design thing” you’ll probably need a better one. I recommend an iMac or MacBook Pro with 2GB of RAM. If it is possible to own both a PC and a Mac (get a cheap PC or a Mac Mini) this will also help. Web development is not a processor intensive trade like print design or movie editting, but having a zippy computer will make your whole life easier. If you are a contractor, you can write it off on your taxes.
2. **An Internet connection**. If you are reading this, you have one.
3. **A good graphics program**. Use Fireworks, it’s the best. You will probably also eventually need to familiarize yourself with Illustrator and Photoshop as well, but this can wait. (Dear Photoshop kiddies. If one is just getting started, Photoshop is NOT the best app for the job. It is the industry standard because it was first out of the gates. Fireworks is better on so many levels for Web graphics.)
4. **A text editor**. You will spend most of your time here. For PC, use TopStyle, for Mac, I use Coda, and TextMate. There are a lot out there, and many people have many opinions. Everyone agrees on TopStyle for PC though.
5. **An FTP Program**. I use Filezilla for PC, and Transmit on Mac. Note that Coda comes with Transmit built in.
6. **A variety of Web browsers**. On PC get IE, FireFox, Opera, and Lynx. On Mac, get Safari, FireFox, Opera, and Lynx. You will be checking all of your sites in all of these. Make FireFox your default browser, use it for everything. If a site doesn’t work in it, complain to the site admin and don’t go back..
7. The Web Developer Toolbar and Firebug addons. Two extremely useful tools that will help you debug your code and explore other people’s code.
8. **A Web Host**. Use Dreamhost, they are the best value by a million years.

### Getting Educated ###

#### Books ####

Buy these books, read them, highlight them, and refer to them frequently.

1. **Don’t Make Me Think**. The usability bible. How to build a user-friendly Web site. A bit dated in its examples, but the concepts are timeless.
2. **Web Standards Solutions**. A very pragmatic, hands on, learn as you go type of book. Read it cover to cover once. Start building a site. Refer back to it as you go.
3. **CSS Mastery: Advanced Web Standards Solutions**. After you have done a project or two with CSS based layout, pick this book up and read it. It will help you clean up your act.
4. **HTML Mastery: Semantics, Standards, and Styling** – A great, fairly comprehensive book about all things HTML related.

#### Web Sites ####

**Articles**

1. A Dao of Web Design – Start here.
2. To Hell With Bad Browsers – A classic.

**Reference Sites** Get an RSS aggregator (Bloglines or such) and subscribe to these sites. Follow them closely.

1. W3Schools - Great tutorials to get you started with HTML and CSS (and other things actually…)
2. Web Design From Scratch – A great compilation of resources for nearly every facet of Web design.
3. Godbit – Has a great community of very knowledgable Web designers.
4. A List Apart
5. Digital Web
6. Vitamin

I subscribe to many other blogs of designers and developers in order to keep a finger on the pulse of what is happening in the very active Web developers community. This is a good thing to do, but you should find these people on your own. I can give you a list to get you started if you so desire.

### Any Questions? ###

Please feel free to contribute or argue with any of the above. I’d love to hear what you think.

  • http://www.mandladventures.com Mithrill

    Nice post Matt. This would definetly be helpful to anyone wanting to get in to web design. I even learned a few things about what Mac programs to use. Mainly I do all my web work on my PC because I didn’t like any of the tools for Mac. I guess I didn’t look hard enough. Again, nice posts. I totally agree with you on the Dreamhost thing too.

    • Bestwebdesigningcompany

      Some specific and genuine information about web design is presented here, That would be great help for web designers.

  • http://www.spheredesigns.net/blog Brian

    I disagree with your graphic program. Photoshop owns.

    Oh, and to make web design easier for everyone, there is software out there to cut down your time- i.e. dreamweaver.

  • http://www.mattheerema.com Matt

    Brian – Photoshop is too heavy of a program for just Web design. It is far more expensive and the workflow of creating graphics for the Web is just plain more complicated. Fireworks is less expensive and streamlined for Web graphics. Photoshop is great for… photos. If you already have it and know how to use it, it works for Web design though. If you are starting from scratch though, learn Fireworks.

    I use Dreamweaver as well because some of my clients require Dreamweaver templates as deliverables. It is definitely nice. A good program, but a pricey, and unnecessary. You don’t NEED it to get started in Web design. If you are going to get Dreamweaver, just go ahead and get Studio 8 for a few bucks more and get several other nice apps while you’re at it.

    Thanks for the comments.

  • Pingback: Getting Started With Web Design at design2default.com

  • Pingback: AhmerHussain.com

  • http://www.adgoodness.com Freddy

    “A good graphics program. Use Fireworks, it’s the best.”

    Ehmmm… a big no on that one. Photoshop baby!

  • spamathon

    If you use DreamHost (which I do, and also recommend) you should check out WinSCP for your FTP needs. Not only does it work well (only with shell accounts though), but all the data is encrypted (not sending those config files in plain text), and it also supports custom commands such untar/gzip from the context menu – this is awesome for wget’ing the latest version of whatever software and having it unzip on the server (don’t need to upload anything!).

    I realise this is a little above beginner level, but it’s handy for future knowledge. And if you teach them the “right way” from the start…

  • http://www.dan-atkinson.com Dan Atkinson

    Your article is flawed in a number of ways…

    What is the point in buying something like TopStyle when a number of free editors exist, such as Programmers Notepad and Notepad++?

    ‘Fireworks is the best’??? That’s a laugh! You may as well say MS Paint is the best. At least it’s installed on more computers. How about The Gimp or Photoshop? I completely disagree with your comments about it only being for… photos. If it’s too heavy for you, you may wish to consider closing some of the windows, thus minimising the number of possible options to boggle your mind. If you’re going into web design, then you’ll want to edit photos at some time in the future. You may as well get people to use Photoshop. You can’t complain about the cost if you’re needlessly splashing out on things like TopStyle. That just doesn’t make sense.

    About validation… You’re better off checking with the W3C as the web dev toolbar (and Tidy) are not completely accurate). You should mention other things like accessibility.

    Your Dreamhost link is actually a referral. So straight off the bat, you’re simply trying to make money out of this. Fine. It’s your blog and you can do that. But a referral link in an article like this, makes you look cheap and needy. :(

  • spamathon

    Geez, the Fireworks haters are out in force. For simple graphics optimization and slicing, Fireworks is the only way to fly. Photoshop is a bloated graphics design giant. Another vote for Fireworks!

    And Web Developer toolbar, while I’m here for the second time. Although it already has an HTML Validator link in it…

  • http://www.omeuip.com omeuip

    Another vote goes to… Fireworks!

    Photoshop is a great tool. As Fireworks.
    Adobe is now the owner of Fireworks so it will come more closer to photoshop.

  • http://sniegas.net Jonas

    Nice article, but you should look around your own design.
    My yeys feels like hurted after reading this…

  • http://sniegas.net Jonas

    // edit my comment – yeys to eyes xD

  • http://www.ryanfaerman.com Ryan Faerman

    I feel that you might be a bit off base concerning the default browser. The default browser for any modern Tiger machine should be Safari. It works just about everywhere, and if it doesn’t go ahead and pop open Camino.

    Camino uses the same rendering engine as Firefox, is cocoa and it is very snappy.

  • umm

    Another vote for Photoshop! It’s true, it is expensive but it is the best… Tip: while in college, I was buying it at it’s educational price at a campus library. It is much-much cheaper.

    I second the comments about the hosting provider. I’ve been with Dreamhost for a while as well, and they are just great! [TIP: All of us being hosted with Dreamhost can give new registrants $95 coupons. I’m not gonna post a link to mine or provide you a coupon code as Matt posted this, so it would not be fair to him. But just ask him about it, I’m sure he’ll give it to you too :)

  • http://blog.dreamhosters.com/ Unofficial DreamHost Blog

    A Web Host. Use Dreamhost, they are the best value by a million years.

    Another reason for using DreamHost: All The Cool Kids Use DreamHost.

  • http://www.jorgennilsson.se Jorgen Nilsson

    You should definitly get Jeffery Zeldmans book Designing with Web Standards when starting out with web design and development.

    I think Safari is the better browser at the moment since it actually pass the Acid2 browser test and Firefox does not and I’m not just a big fan of Firefox. Opera has done a really nice comeback I think and is kicking Firefox ass in both speed and file size and usage of memory.

    When it comes to graphic tools, get what you are most comfortble with and can afford. When it comes to text editors I like Zend, TextMate and Dreamweaver. Three very different authoring tools, with various strengths and weakneses.

  • http://xpress.uni.cc Garrett

    I’m all for photoshop, because it has more tutorials, and it’s nice.

    For the html editor, i recommend Dreamweaver which can be major in the $$$ range. Or use PHPeditor2006 free!

    And for the ftp, Smartftp takes the win anytime!!!!!

    For the host, use a free place like ahplace.com, or you can use dreamhost.com, but i recommend midphase, http://www.midphase.com. 12gigs of space unmetered bandwidth. And a free domain 4 life! If you are a tech guru, host your own serve with that old computer sitting around your house. Check out DIYwebserver.com, or apache2triad.net i recommend apache2triad for anyone. *If you want to run a server, make sure you have port 80 open by your isp. Cox charges $50 a month to open it, but its fast!* And, I recommend installing apache2triad, to get to see what your sites look like before they get released to the web. It’s very handy when it comes to php! Another server program option is Wamp5 it is a very nice program, very similar to apache2triad, with not as many tools.

    Domain: go to http://www.uni.cc to get free domains! why pay?

    Thanks

    Garrett

    Radon.uni.cc

  • http://www.randomecho.com/ Reno

    No mention of the pen and paper? Simple, but can save a lot of time and headache before diving into mock-ups in the graphics program or code in the text editor.

  • http://lazymoon.org Lachlan

    I use Photoshop and Dreamweaver for my projects. I wouldn’t suggest Fireworks, its a helpful program, but if you have the money to invest in a program it’s not the most powerful or useful tool available.

    If you don’t have the money, The Gimp gets a lot of people by.

    I suggest avoiding Photoshop CS2 if your on a Mac because, despite public belief, it runs quite poorly unless your on one of the new Intel things.

  • Pingback: greencrab capsules » links for 2006-05-30

  • Pingback: links for 2006-05-30 — Constructictism Archive

  • Pingback: Blog Writes » Getting Started With Web Design

  • ameryan

    Photoshop Elements – the streamlined version of Photoshop is streamlined mainly in PRICE. It has all the features you need for web sites, including save for seb, batch processing, photo gallery, editing tools, many special effect filters……It takes less time to open and is snappier in processing time.

    BTW, in preferences of Dreamweaver, you can set which photo editing program you want to open from within Dreamweaver….

  • ameryan

    forgot to include the price – I believe the price is 69.00-89.00 for photoshop elements

  • http://www.skillzdesign.com Keith Ratner

    Dreamweaver is great for prototyping, but I can speak from experience when I say that learning server side scripting is crucial. Years ago, before I knew ASP or PHP, I collaborated with someone on a large web development project. We used Dreamweaver together, utilizing it’s cool automation features, primarily templates. After it was completed, the project got committed to a versioning system and buried under many layers of I.T. bureaucracy. What seemed like time saving features turned into a maintenance nightmare. All the extra code that Dreamweaver created now has to be edited by hand.

    For text editing, I use Crimson Editor for PC. It’s free, and has an FTP client built in so you can edit and save files directly to a server.

    Thankfully, the days of the Photoshop vs. Fireworks arguments should be coming to a close.

  • Pingback: catharsis » freaking miserable life.

  • http://www.mattheerema.com Matt

    Man, a lot of haters come out on Digg… a few points:

    - Text Editors: There are definitely many good free editors out there, and most of them will suffice. TopStyle makes my life easier though, so I find it worth the expense.

    - Fast computer: Sure you can get by with a slower computer and 512megs of RAM. But if you are going to be doing this full time, you don’t want to.

    - Photoshop vs. Fireworks. This is a semi-religious debate, and I find that most people who argue loudly for one or the other haven’t used the one they argue against.

  • Pingback: जुगाड़ी लिंक|Cool Links » Daily Links

  • http://www.richardquickdesign.com Richard Quick

    One of the best things you can do when you’re starting out is to look at other sites you like and try to emulate or even copy them.

  • Pingback: Donghai Ma » links for 2006-05-31

  • Pingback: Webforumz.com

  • Pingback: marque.com » Getting Started With Web Design

  • Pingback: otro blog ms » Unos cuantos de desarrollo web (XCVIII)

  • Pingback: otro blog más » Unos cuantos de desarrollo web (XCVIII)

  • http://thewisdomcu.be The Wisdom Cube

    Dreamhost may be a good value, but their service is horrible. Worst host I’ve ever used.

  • Mike

    FOR MAC – TextEdit (Super Important), Photoshop, Dreamweaver, Flash and the wonderful support network of scripts and tutorials you can find off of Google searches.

    FOR PC – Notepad (Super Important), Photoshop, Dreamweaver, Flash and the wonderful support network of scripts and tutorials you can find off of Google searches.

    Simple as that.

  • http://www.miraclestudios.in Miracle studios — web design company

    Nice article for beginners :

    Take a glimpse of our award winning website : http://www.miraclestudios.in

  • http://www.mbwebdesign.co.uk MB Web Design

    I’m glad to see someone pick Fireworks over Photoshop, I do get some funny looks from graphic designers when proudly proclaim to be FW over PS.

  • Kim

    This is a really useful article, although you make no mention of what programmes are best to use on a Linux based operating system for these same processes! Is one to presume that those mentioned above are compatible with Linux or not?

  • http://www.thisismyurl.com web design

    FOR MAC – TextEdit (Super Important), Photoshop, Dreamweaver, Flash and the wonderful support network of scripts and tutorials you can find off of Google searches.

  • http://www.tonicfusion.com Alec

    I design sites on paper and then translate to screen using Fireworks. Fireworks was originally built for the job where as Photoshop’s names gives its origins away. Fireworks gives much better pixels control of vector information, text and various other key tools for web design. That said if I want the best filter effects I hop into Photoshop create and then throw the elements into Fireworks to finalise and slice.

    I have written this having used CS4 for a while. Watch out for Fireworks quitting on you! Adobe have released an auto save for Fireworks, it’s a separate download and instal but invaluable.

  • Mark G.

    thanks to Matt and everyone else for your input! I'm super new, and super dumb yet. Now i'm just a little smarter!
    p.s. I'm a tech, so i know how to work on 'em, not so much how to use 'em !

  • http://www.raycreationsindia.com Ray Creations – Web Designer

    Wow! You surely have a lot of info on web design here. Initially I thought you spoke only on elementary stuff. But as I read on, I saw that you also also discuss advanced stuff too. Good site.

  • Keneth Senkungu

    Thanx Matt, I have great passion but i have not started. Hoping to be a star some time. Continue helping me. 

    • zubair

      hi friend how are you. im a new user for ithis site and as well as a bigner for web designing please contact me you are like my class ffellow

  • zubair

    HI, im glade to vist ur site, i sthink it will b useful for me . i am totaly a new student with no any concept that how to design a web, i hope u ll always help me. zubair17@yahoo.com