In this weeks post, Dan talks about how you can design and build websites on a budget, by using some of the many free (or very cheap!) design and development tools out there.
For this post I thought I would look at writing something for the web design community itself. This was actually inspired by a few emails we’ve had from graduate developers looking for work, and advice on getting into the industry, as well as our own budgeting concerns we’ve had whilst setting up Ionic Media.
After graduating university a few years ago, I spent several months looking for work and building up a portfolio. Money was always a big factor during this time, so came into play when choosing software and tools to use for web design and development.
There are some great commercial products out there, one package instantly springing to mind being the adobe creative suite. This comes with a range of graphics programmes (such as Photoshop and Fireworks), development software (Dreamweaver) and flash animation software. This suite is fantastic quality, and used worldwide by designers and developers, however at my last check, the CS6 Design and Web Premium package cost around £1,200, with the full CS6 Master Suite costing £2,600. Understandably this is quite an outlay for a first time or graduate designer/developer.
So what I thought I’d do was go through some cheaper, and often free, alternatives which you can download and begin using today even
Design:
Gimp
The GNU Image Manipulation Programme (or GIMP for short!) is an open source (free) graphics software, that I regularly recommend to designers looking for something a ‘bit cheaper than Photoshop’.
It isn’t quite as sleek or fast as Photoshop, and doesn’t come with as many tools, options, or support, but there are still a huge range of tools on offer here that can easily be used to create website mock-ups and layouts, and can also used for other tasks such as photo editing.
They’ve released a major update this year too, which has added some great extra functionality, such as being able to group layers, and also extra options for how the screen lays out when using the software.
As I say, it’s not quite ‘photoshop for free’ but for a free programme, it’s certainly a great place to start.
Development Tools
After several years of using various incarnations of Adobe Dreamweaver as my go-to code editor, I realised that a good 98% of the time, the only real features I was using were the text-editor which usefully marks up code in colour, and the FTP function, so that I could browse files on a server live within Dreamweaver, allowing me to save/upload any changes to these files instantly.
There are now however, much cheaper options for this level of functionality in a code/text editor
Notepad++ & TextWrangler – Free Editors
Whether you are working on a Windows computer, or a Mac, there are some great free text editors out there. Notepad++ for Windows and TextWrangler for Mac OS, both work great for editing HTML, CSS, PHP and Javascript files, and both come with FTP support, allowing for fast editing of files whether on a live or local server.
Sublime Text 2 – A step up
Sublime Text 2 provides similar functionality to both Notepad++ and TextWrangler, but comes with more professional features, plugins and a huge level of community support. Unlike Notepad & TextWrangler, Sublime Text does come with a price tag, but at only $59.99 (that’s around £37 for us Brits) it’s not going to break the bank. What’s more, there’s actually an unlimited-time demo version you can download, so you can take a look and see if it’s worthwhile before parting with any money.
Online Learning Resources:
The web industry is a fast moving one, and it’s important to keep on top of all the latest developments and trends. Text books are a great way to do this, but can be expensive, especially if you’re buying them on a regular basis (I know, I’ve gone through a few dozen in my time). However, there are now some great websites out there, run by developers, for developers, which can certainly help you to stay on top of your game.
Here are some fantastic free resources online that I’d recommend taking full advantage of:
http://www.smashingmagazine.com
As well as producing some fantastic books and e-books, the smashing magazine website also produces regular articles and tutorials for web design and development.
This site has literally hundreds of articles on HTML, CSS, Javascript, PHP, and Wordpress. It’s a great resource and reference tool that I use on a regular basis.
Stuck on a problem? Wish you had a whole community of developers to turn to for help? Don’t worry, as stack overflow has you covered. Simply sign up for a free profile, post your question (don’t forget to see if anyone else has asked the same thing already!), and you’ll get replies back in no time (often several in the same day).
Some more open source goodies
Thunderbird
From the same people that brought you the popular Firefox browser, Mozilla Thunderbird is a fantastic, free, email client. It will do pretty much everything that outlook or windows live does, but for less outlay on your part, and even has some handy features not seen in outlook (my favourite being the reminder that pops up if thunderbird thinks you should have attached something to an email, but haven’t).
![Mozilla Firefox and Thunderbird]()
Firefox Plugins
Firefox PluginsAlthough Firefox doesn’t tend to be the fastest browser going (I tend to use google chrome for casual browsing), it does have some fantastic free development tool plugins, which have brought me back to it time and time again when developing websites:
Firebug – A code inspector, I don’t know how id develop sites without this
Mozilla Colour Picker – Want to know what colour something is on a web page? Just use this tool to instantly find out the hex or RGB colour code
Web Developer – An toolbar add-on with a host of useful functions (way too many to go through here!)
How to Install Plugins
From your firefox menu, simply click on 'add-ons', and then search for the plugins you want to install. Most plugins simply install straight from the browser menu.
Joomla & Wordpress
If you’re learning web design, and haven’t yet come across either of these Content Management Systems, then seriously, check them out. Both Joomla and Wordpress are a great starting point for any developer looking to build content managed sites based on PHP and SQL databases. They both have a huge support community and literally thousands of extensions, templates and plugins to cover pretty much any functionality you could think of (some free, some commercial). Both CMS’s are totally free, and because they are released under an open source license, you are free to change them however you want.
Token Sum Up…
So there we go, web design and development can be a fairly cheap industry to get into (let’s face it, once you have a computer and an internet connection, you’re pretty much good to go!). However hopefully I’ve managed to point any start-up developers to some resources that are going to help keep your initial costs down.