Getting Started: Tools For Web Design



The growing phenomenon of the internet isn’t slowing down any time soon – there are over one billion websites in existence. What about you? Have you ever wanted to build a website yourself? Whether it’s your blog, your business, or the next big social network, you’ll need some tools to help you do just that! In this comprehensive guide you’ll learn about the tools for web design you’ll need and recommendations based on my experience.

I’ve tried my best to include both paid and free as well as Windows and Mac OS X options in every category. Being that this guide is very detailed, I’ve added a table of contents so you can skip around if you’d like. Everything in this guide is ranked in alphabetical order, not best-to-worst or worst-to-best.

Table of Contents

Code Editor

Yes you should learn how to code, but a code editor is more beneficial than just helping you code. Modern editors help by having syntax highlighting (makes code easier on your eyes), FTP, and preview abilities built-in to make your life easier.

Adobe Dreamweaver CC (Mac & Windows)

Any early 2000s developer can tell you how much time Dreamweaver saved. It has the bulk of features most code editors nowadays have like syntax highlighting, previews, and code repositories. It’s a great option, but a little overpriced on it’s own compared to alternative editors.
Cost: $20 Monthly | $50 Monthly (Included in CC Suite with other CC Apps)

Coda 2 (Mac)

This is my code editor of choice. It’s affordable, easy to use, and has so many features built-in. My favorite features include code folding, code completion, and the built-in FTP. It doesn’t hurt that it looks damn good too.
Cost: $74.99 (On Sale on Mac App Store)

Notepad++ (Windows)

I rarely ever code on my Windows build (usually just for gaming and cross-platform checking), but when I do need to make some edits this is what I use. Notepad++ has some cool features like code folding and syntax highlighting, which makes it a great tool for coding considering it’s completely free! Notepad++ is possibly the best bargain in Windows apps.
Cost: Free

TextWrangler (Mac)

It isn’t nearly as pretty as Coda 2, but it’s built off of BBEdit (another paid code editor, but not as good as Coda) and has some capable features like search & replace – in addition to code folding and syntax highlighting. TextWrangler might have ugly interface that’s missing a few premium features, but as far as free code editors for Mac this is the best you’re going to get.
Cost: Free

Designer Elements & Stock Images

These sorts of resources are crucial to becoming a web designer. They help add to your collection of resources, which will free up your time and spice up your designs in the long run.

Death to the Stock Photo & Unsplash

Death to the Stock Photo is a great monthly newsletter that will send you a pack of royalty-free stock photos for free. Unsplash puts out 10 new royalty-free stock photos every 10 days. Both resources are incredibly useful to any designer because stock photos work great as template fillers, blog images, or even in advertising elements.
Cost: Free

Envato Marketplaces

As both a seller and customer, I’m a huge fan of Envato’s marketplaces. On your web design and development journey you’ll find GraphicRiver, CodeCanyon, and PhotoDune particular useful for graphical elements (wireframes and such), code snippets, WordPress plugins, and stock photography respectively.
Cost: Various

MightyDeals

MightyDeals is a great source for web/graphic elements from fonts to ebooks. What makes them great is that they offer lots of bundles and elements at a steep discount. Sign up for their newsletter and wait for something that interests you. I hop on quite a few of these deals myself!
Cost: Various

Domain & Hosting

In order to have a website you need to have a domain and hosting. People always confuse domains, hosting, and files. To sum it up in an analogy; a domain is your real-estate/address (you pay yearly taxes), hosting is your house (you pay a monthly mortgage), and your files are the decor that fills your house (you create). Don’t worry the pricing isn’t near the same as the analogy, you can get away with $100 per year for both your domain and hosting combined.

Bluehost (Hosting)

I’ve never personally used Bluehost, but it comes recommended by so many designers and blogs that I’ll mention it. Their pricing is about the average, but their service is widely praised as one of the better shared hosting options.
Cost: $4.95 Monthly

GoDaddy (Domains)

They’re a bit controversial (for reasons that have nothing to do with web services) nor do they have the best customer service, but they’re affordable. Personally I have a few of my domains here. They do have hosting and I’ve used it 8 or so years ago and it was too slow for me. I don’t recommend them for hosting, but for domains why not if it’s the best deal I get.
Cost: .COM Starts at $12.99 ($8ish With Coupons!)

Media Temple (Hosting)

This is where I recommend all professionals to get hosting. Their customer service is top-notch and the quality of service is right up there too. Their service is fast and reliable, which is why it’s used by all the big designers. Media Temple is also great for when you need to scale to servers due to a project’s popularity. However, with top-notch service the price reflects compared to the alternatives. Completely worth it, but if you’re only just learning a cheaper option may be lighter on the wallet.
Cost: Plans Start at $20 Monthly

NameCheap (Domains)

They’re not as cheap on the renewals (by a buck or two), but they definitely have better customer service. I have some more domains hosted here and they’re great. I’ve never used their hosting so I can’t recommend it outright, but I haven’t heard anything bad either.
Cost: .COM Starts at $10.49

Education

Learning how to code is necessary. You can build a very basic site with a code editor, but your true potential is unlocked by learning at least some HTML & CSS. Luckily there are so many places you can learn to code nowadays. Plus it never hurts to keep learning even if you are already a professional!

CreativeLive

CreativeLive is something I’ve been put onto within the last 6 months, but they’re amazing. CreativeLive actually streams webinars everyday on various topics – many which are of web design, graphic design, and marketing based. The webinars are free if you catch them live or on a live rebroadcast and provide a huge wealth of knowledge.
Cost: Free for Live Broadcasts/Rebroadcasts | On-demand: Varies

KelbyOne

While I prefer the other two resources in this category better, KelbyOne is also a good resource to learn. Not only do they have a strong content line-up similar to TutsPlus (below), but they have a working relationship with Adobe. This means they have access to software updates and are able to train and making tutorials for CreativeCloud very fast. Still a great option, especially if you work with Adobe products.
Cost: $25 Monthly | $249 Yearly (Save 10% with ThinkDope Coupon: KOCJ14)

TutsPlus

Not only do they have courses on coding HTML & CSS but also PHP, jQuery, WordPress, graphic design, mobile app development, photography, and much more. They also have an ebook program which allows you to download books by Smashing Books and Rockable Press. I aim to go through a course every two weeks minimum. I’ve been a member with TutsPlus for a few years now!
Cost: $25 Each Course (Some Free Tutorials) | $180 Yearly Unlimited Courses

FTP Client

An FTP client connects you to your hosting so that you can upload your files. Most modern FTP clients are very similar and it’s just a matter of appearance, although some offer more advanced connections that I won’t discuss here because it’s inapplicable for beginners. Also be sure to pick your code editor first, as some come with FTP clients already built-in.

Cyberduck (Windows & Mac)

Cyberduck is the most attractive free option I’ve ever seen. With Cyberduck having the same functionality as the big FTP clients my only complaint is I wish I knew about it back in the day.
Cost: Free

FileZilla (Mac, Windows, Linux)

FileZilla is a very capable open source FTP client with the same features as any paid option. It’s certainly not visually appealing to work in, but it’s only for transferring files and it’s free, so why not?
Cost: Free

Transmit 4 (Mac)

Before there were plenty of useable free options, Transmit reigned supreme on Mac OS X. I can’t attribute much that makes it different functionality-wise nowadays, but it is damn beautiful. I’ve had this since I switched to Mac many years ago when it was the only option (at least that I knew about), but if you can careless about cosmetics you should probably go for a free option – as functionality is the same for our purposes.
Cost: $33.99 (Mac App Store) | 7 Day Trial Available

Graphics Editor

You’ll need something to edit graphics for website elements and/or mockups. Mockups and concepts don’t necessarily have to be done on computers, but it’s so much easier to visualize. You might not need to use it everyday, but you’ll definitely need one if you plan on making awesome sites!

Adobe Photoshop CC (Windows/Mac)

There are several graphics programs in the Adobe suite, but Photoshop is more than enough to get the job done. I think everyone in the 21st century knows about Photoshop’s capabilities. The new Creative Cloud version allows you to export shapes and styles in CSS3 and even import color schemes from stylesheets. We actually have a post on the new Photoshop CC 2014 features.
Cost: As low as $10 Monthly | $50 Monthly (Included in CC Suite with other CC Apps)

GIMP (Windows, Mac, & Linux)

I’ll be honest, I’m not as big of a fan of GIMP as I am other options. I think it’s hideous and not as strong as it’s alternatives, but it’s useable. However what sets it apart from any other (useable) graphics editor is that it’s free. If you can’t afford anything else this is the only option left, but it’ll surface.
Cost: Free

Pixelmator (Mac)

Pixelmator isn’t yet as advanced as Photoshop, but it’s the closest you can get and for only $30. Adding layer support to Pixelmator has made it a serious Photoshop competitor. It’s actually a great program to use if you don’t need to work with specific Photoshop features.
Cost: $29.99 (Mac App Store)

Note: There are web alternatives as well, but most of them aren’t beyond basic functionality and wouldn’t be suitable for working on a website, unfortunately. I will look more into this in the near future so that I can recommend more options.

Other Useful Tools

These are hardware tools I don’t find necessary, but rather extremely useful in saving time and increasing productivity.

External Hard Drives

Photoshop files and website backups are big and add up over time. Clogging up your computer’s primary hard drive will slow the system down. Get an external hard drive and keep your system drive free. There are many of them to choose from – perhaps too many. In the future I will write a post on how to choose the right external hard drive for you. In the mean time look for whatever is light on your pocket with at least 1TB of space and running at 7200RPM.
Cost: Various

Wacom Drawing Tablet

Like hard drives there are many of these to choose from too. However I would recommend going for something cost effective yet powerful, Wacom makes the best I’ve ever used so I’ll recommend them. There’s still a lot of Wacom tablets to be had, but I use a Wacom Intuos (CTH480S2). I’m not the best pen & paper drawer by a long-shot, but it does come in handy to add elements and retouch photographs.
Cost: Various

This is only a basic guide of tools for web design. There are many more types of tools and alternatives so let me know your favorites in the comments below. I might just add them to keep this list and keep it growing!

Share This Post

About Garett Southerton

Garett Southerton works as a web & graphic designer, audio engineer, writer, and brand consultant with clients from all over the world. He runs a design & recording studio based in New York and has a passion for all things art in addition to helping others learn how to create.

Visit Garett Online:
Garett Southerton on Facebook Garett Southerton on Twitter Garett Southerton's Website

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>