What’s in Your Web Design Toolkit?

Apr 23, 2011 1 Comment by

To kick off my new blog I thought I would start by sharing the tools that I use for web design and development on a daily basis with you. For those of you who don’t know I am a professional web designer stroke SEO type of geek, currently residing in an office for these translation folks and also run a couple of other sites such as this one (http://www.malcolmgibb.co.uk) and a freelance web design company in Dundee.

These are just some of the tools I use to get by when going through design & development work most of these tools are based on PC use, not much of a Mac person but there is a good post over on Noupe on 20 free mac apps for web designers toolkit. I would love to hear what other good tools and software web designers out there use!

Mock-Ups, Web Design

PhotoshopPhotoshop

Need I say more? Photoshop is a must for any serious web designer, sure you can get by on alternatives like GIMP or InkScape but Photoshop has pretty much become an industry standard tool in the design industry. Not only is it great for making quick design mock-ups for clients, but it integrates seamlessly into the whole Adobe package and it well… just works.

The ability to create layered .PSD’s is a crucial element in the design process, being able to easily change design elements per client request quickly is a key reason as to why Photoshop must be in your toolkit as a designer. I do also use Illustrator, but usually rather rarely unless I’m tasked with designing a new logo or some high resolution print designs.

Coding/Programming

Adobe Dreamweaver Dreamweaver

OK, so most web designers will probably be familiar with Dreamweaver as it is pretty much an industry-standard tool even though it is paid software. Although it is a WYSIWYG editor I tend to never hit that ‘Design’ button, although it can be a useful tool for non-coders to design sites quickly most WYSIWYG editors never create truly robust layouts. I use Dreamweaver solely for it’s coding features, FTP, File and Versioning functionality. With CS4+ Dreamweaver truly has become a much more pleasant tool to code in and is almost as good an IDE than many other leading IDE tools depending on what you need.

Microsoft Expression WebMicrosoft Expression Web

I expect many raised eyebrows with this one, a very similar piece of software to Dreamweaver but this time made by Microsoft. I’ve never really met another web designer that uses this, but after having tried it I have a liking for it. It has all the normal features you would expect from a web design IDE like FTP/local/remote versioning functionality and template management, but what I really like about this software is the find and replace feature. Being able to do a mass find and replace of 500 files in an unopen directory with multi-line text and HTML rules is awesome, I know Dreamweaver has this capability but I just find this tool a bit smarter. The only downsides? Made by Microsoft and it’s rather heavy on resources, a bit clunky.

Would really love to hear if anyone else is using this for coding/programming.

Notepad++Notepad++

Truly the best text editing software out there, syntax highlighting, function lists, double windows, multi-language support, the list goes on. It’s great for working on smaller sites or coding by hand and has great find and replace functionalities (especially using the extended find and replace /r/t/n). Although one of the main reasons I love Notepad++ is the multi-line select function by using the alt key which is especially useful when manipulating large lists, database data or MySQL queries. I know the hardcore amongst you will probably use standard Notepad, but that just makes my eyes bleed after 1 hour.

Version Control

TortoiseSVNTortoiseSVN

It’s amazing how many designers I’ve talked to that don’t know what SVN is! Well it’s simply a version control system for code, there are many tools out there for managing SVN files and repositories especially Git, but I won’t get too deep into SVN discussion. Simply put TortoiseSVN is a great little invisible tool that integrates directly into your desktop enabling you to check in, check out with a right click! It also has a neat repository viewer. I’ve used many more advanced CVS and SVN tools, but when working solo or in a small team you just need something simple that works and that’s why this is great!

File Upload/Administration

FilezillaFilezilla

No question that this is the best option when dealing with FTP, not much more to say about it! It’s free, it’s fast and you can manage multiple FTP accounts easily what more can you possibly need from an FTP client?

WinSCPWinSCP

When you need to SSH into your server or change some configuration WinSCP is great not only can you SSH, but also use it for FTP and SFTP.

 

 

So that’s just a small list of tools I use on a day to day basis for designing and developing. Got a great tool that’s not in this list? Let me know in the comments!

Web Design

About the author

Malcolm Gibb is a professional SEO in Scotland with a serial addiction to internet marketing, gaming, music and life! All views are my own and may or may not be worth reading :)

One Response to “What’s in Your Web Design Toolkit?”

  1. InT says:

    Hello ! Nice list you presented here. I’m just an occasional web designer/ VB+ASM programmer and a caring future husband and dentist :)
    I’ll tell you my list:

    PS – must-have. Like you said – it’s a standard.

    HTML Pad/Rapid PHP for the coding part. Also I’ve used lots of freeware stuff with syntax highlighting. And I’d like to mention HTML Kit here… Has a lot of features.

    TopStyle for those beautiful CSS stylesheets.

    1st JavaScript Editor – obviously for JS docs.

    Total Commander for FTP.

    Also WAMP for localhost website pentesting, etc.

    Best of wishes !

Leave a Reply