course notes 2015/16

tools of the trade

Sep 24th 2015


Whether you are an experienced designer already or just starting ~ you’ll need the right tools for the job :) So here’s a quick look at a few options:

pen & paper

Nothing will ever beat pen and paper :)
No matter how good or bad your drawing skills are right now – continue or start using your sketchbook for notes, doodles and design drafts. You will find that the best approach is to capture your idea immediately and without distraction on paper. It is quicker and easier than any other tool. Brain storming, doodling to generate fresh ideas and just jotting down concepts or visual ideas ~ you will soon be filling those blank pages :)

graphic apps

The graphics applications for graphic or web design are of course a vector and a bitmap program, typically Illustrator and Photoshop. Both are excellent apps and we will use them during our sessions – but unfortunately they are very expensive. While you are studying however – you are entitled to a student discount – which might or might not be affordable.

In the meantime – open source, online tools to the rescue. The open source community is going strong and the amount of high quality tools which are mostly free to use is amazing… So if you cannot get hold of the Adobe classics – these apps will provide a good alternative.

Pixlr is a suite of online image editing tools and utitlities, part of Autodesk. The flash-based apps can be used for free and online and provide useful tools for image editing, manipulation and creation.

GIMP is a GNU Image Manipulation Program, available as open source, standalone app for GNU/Linux, Microsoft Windows and Apple Mac OSX. It is a bitmap editor and is an excellent alternative for Photoshop.

INKSCAPE is an open source vector graphics editor for Linux, Microsoft Windows and Apple Mac OSX. Inkscape includes many tools found in Illustrator and supports many advanced SVG features.

For those of you on Macs, one newcomer is worth considering: Affinity apps


Affinity Designer (vector) and Affinity Photo (bitmap) are excellent alternatives at a very affordable price tag. The team behind this software is continuing conversation with user and working on updates to include more and more features as requested. Highly recommended.

code editors

For your webpage production, the handcoding – you don’t need any special app at all – the default text editor from your OS will be fine. So you can simply use TextEdit (Mac) or Notepad (PC). The advantage a code editor brings over the text editors is primarily the colour coding of your code, making reading and troubleshooting a lot easier. More advanced editors can include a number more sophisticated functions as well but many pros out there still stick to the more simple editors as opposed to other more advanced apps.

brackets[ PC / MAC / LINUX ]
Brackets is an open source editor, developed by Adobe, available for all platforms; plugins are available to extend functionality.

sublime editor[ PC / MAC / LINUX ]
Sublime Text is a sophisticated text editor for code, markup and prose. Free use before purchase, licensed at $70 [sept2015].

[ PC / MAC / LINUX ]
gedit is the official text editor of the GNOME desktop environment, available for all platforms.

[ PC only ]
Crimson Editor a professional source code editor for Windows with syntax highlighting and additional features.

[ PC only ]
Notepad++ is a free source code editor and Notepad replacement that supports several languages, running in the MS Windows environment (GPL License).

Taco HTML Editor is an HTML editor and PHP editor for Mac which includes the incredibly useful features of syntax checking as well as organising code indentations.
(download old/free version 1.7)

TextWrangler is a powerful and richly featured tool for composing, modifying, and transforming text stored in plain-text files; compatible with Apple Mac OSX.


To get you set up and ready for testing your coded pages – you will need to have a collection of browsers installed and ready to use. Initially, you should at least install the latest versions of the following browsers, in future you will also need their relevant older versions for thorough testing.

  1. Mozilla Firefox (mac/PC)
  2. Google Chrome (mac/PC)
  3. Apple Safari (mac/PC)
  4. Opera (mac/PC)
  5. Microsoft Internet Explorer  / Edge (PC only)

Comments are closed.