course notes 2017/18

tools of the trade

Sep 20th 2017

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.

And there is one newcomer 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.

Another vector app with growing popularity is Sketch (Mac only). It offers a number of features aimed to support your workflow, with reusable elements and live previews via mirroring.

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.

atom[ PC / MAC / LINUX ] Atom describes itself as “A hackable text editor for the 21st Century” – it’s customisable and extendable and continues to grow in popularity.

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 $80 [sept2017].

[ PC / MAC / LINUX ]
Visual Studio Code: Code editing. Redefined. Free. Open source. Runs everywhere.

[ 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). While the newer editors are now becoming more and more popular – this is still an oldie but a goodie :)

No longer in development, 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)


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 most popular browsers, but keep an open mind and a good selection of alternatives too.

  1. Mozilla Firefox (mac/PC)
  2. Microsoft Internet Explorer / Edge (PC only)
  3. Google Chrome (mac/PC)
  4. Opera (mac/PC)
  5. Vivaldi (mac/PC)
  6. Apple Safari (mac/PC)
  7. Cliqz (mac/PC)
  8. Tor (mac/PC)
  9. Brave (mac/PC)
  10. Yandex (mac/PC)

Comments are closed.