in web design by fyd on 14 Jan 2008
If you're just getting into web design, you've got to start somewhere. Before you start with the books and the tutorials you might want to pick up a few web design tools to use along your way. Well, actually you are definitely going to need a couple of these tools to get started.
There are a lot of tools to choose from. Some cost money, some are free, some color code, some don't - I'll list a few here, but really the best thing to do is just try them out. Find which one fits you best. If you don't like any of the ones I list just do a quick Google search.
HTML Editors
Notepad: The absolute basic HTML editor. Comes free with every Windows PC. It's where a lot of people start and some advanced users continue to use it. Notepad is the first program I used to create my first simple webpage.
WordPad: Pretty much like Notepad. Basic and free. I'm not a big fan of WordPad - just be sure when you save your files as .html change the 'Save as type' to Text Document not Rich Text Format.
NotePad++: A free HTML/source code editor that is a lot more advanced than regular old Notepad. It can be used for a lot more than just HTML. It includes colored syntax highlighting and folding. Which basically means that your HTML tags will show up in different colors than your plain text and you can contract and expand blocks of code so you don't have to scroll up and down as much. It also has a tabbed interface(like Firefox or IE7) that allows you to have multiple documents open and switch between them by clicking on the tabs. I have never actually used NotePad++, but it looks like a nice program and it is free. Checkout all the features at the Notepadd++ site.
Programmer's Notepad: Another free text editor similar to NotePad++. It has syntax highlighting, code folding, tabs, and all that good stuff. Check it out for yourself Programmer's Notepad.
Crimson Editor: A nice free text editor, again with similar features as the previous two. Syntax highlighting, tabs, macros, spell check, etc. I have used Crimson Editor quite a bit and it works nicely and is free. If you are looking for a free editor I recommend you give it a try. You can download it here Crimson Editor.
UltraEdit Studio: Not so free - looks like it will cost you about $50 to pickup the UltraEdit Text Editor - but their website claims it's 'The #1 Best Selling Text Editor in the World…' Looks like a lot of people use it and like it. It can be used for HTML, PHP, Java, and JavaScript and they offer a free trial, so you can try before you buy. You get all the features including a built in FTP client so you can transfer your files to your web server without switching programs. UltraEdit
Dreamweaver: A little more expensive - around $400 for CS3 - but you get more features. Dreamweaver is one of the more popular design applications out there. It has about every feature you could want. It has the ability to actually show the site you are working on in the program itself(though in my experience it is not always accurate). Dreamweaver can be used as a WYSIWYG editor(thats What You See Is What You Get). It gives the user the ability to basically drag and drop elements into a webpage. Honestly, I can't say I recommend doing this because it can add a lot of extra code and you don't really learn anything. You can get more customization coding things yourself. Speaking of coding - the coding environment in Dreamweaver is great. It not only has all the features like syntax highlighting and code folding, but it also has a 'code assist' feature. I'm not sure if that's the correct term for it, but it basically means that as you type the HTML tags a box pops up with a list of available tags you can use and if you spell it right you can just hit enter and it will complete the word for you. Dreamweaver is a little expensive, but it has a lot of extra features and is used by a lot of designers and developers. Dreamweaver
Image Editing
Photoshop: You've probably heard of it. It's got to be the most popular software out there for image editing. Unfortunately, it is pretty expensive - Adobe's site list CS3 at $649 - you can get a free trial and if you are a student you can probably get an education discount or there is Photoshop Elements for $99 which is slimmed down quite a bit. If you just want to edit your photos then it's really not worth your money, but if you really want to get deep into image editing and creating graphics for the web then Photoshop is the way to go. Photoshop
gimp: gimp is a free image editing program. It stands for GNU Image Manipulation Program. I really don't know much about gimp except that it's free and there seems to be a lot of support for it on the web - tutorials and such. gimp
Illustrator: Adobe Illustrator is great for vector design. Vectors are nice because they don't lose quality when you resize them. They aren't based on pixels but mathematical calculations. It's expensive $599. Illustrator
Fireworks: Another program from Adobe - $299 - used for creating images for the web and more. Fireworks
Flash: A vector image/animation program. Not really an image editing program, but Flash is used all over the web for creating anything from simple slide shows to complex animated clips. And no it's not free $699. Flash
Others: Here are a few others you can research on your own paint.net, Paint Shop Pro, fotoflexar, other online image editors.
Other Software
FTP Programs: You'll need a FTP program when you are ready to put your files online. They are used to connect to your web server and upload files to it so they can be seen on the Internet. Examples: FileZilla FlashFXP
Internet Browser: An obvious one! If you're reading this you've got one, but you should really have multiple browsers to test your sites in. I use Firefox - I design for Firefox and then test in IE7, IE6, and Safari.
Local Web Server: A local web server is really nice to have especially when your are using things like php and databases that are hard to test with out a web server. I would recommend getting WAMP it includes Windows versions of Apache web server, PHP5, and MySQL. I use it a lot when testing WordPress themes.
Like I mentioned earlier, there are a lot of options out there - you just have to try them out and see which on you like the best. I personally use Dreamweaver 8 for its coding environment, Photoshop CS2, Illustrator CS2, Flash 8, FileZilla, and I have the WAMP package installed on my computer. I haven't upgraded to the CS3 suite yet, but I'm pretty happy with what I have - it works well for me.
Popularity: 6% [?]

