From UWE Master Creative Technology
Jump to navigation Jump to search

What is on this page?

Throughout the Creative Technology programme you will be asked to design or develop web components, websites, user interfaces, web applications and so on. Listed on this page are links to various tools to help you throughout your workflows that have been recommended by current and graduated Digital Media students.

See also the equipment and hardware and Devices, Connectivity and Deployment Considerations pages


   WAVE Web Accessibility Evaluation Tool
   Colour Contrast Checker – Awesome website :)
   WCAG 2.0 Checklist

Process & management

   spideroak – encrypted cloud storage – cheaper than drop box, integrates with mac, windows, linux, android and iOS and is end to end encrypted – free 2Gb trial account too ! as recommended by Edward Snowden
   Browsershots – multi browser web page testing online project management and more online
   things – great to do lists for mac and iOS

Design & visualisation

   web usability checklist
   The difference between mockup, wireframe and prototype.
   10 wireframe examples
   Mockflow: a tool to make a clickthrough navigation of your wireframes (achtung! only allows to create 4 pages without payment) Kuler is one of the better palette / colour tools on the web… Another pallette / colour scheming tool
   Mindmeister for mindmapping
   Pencil for online wireframes An image placeholder for your mocks up, but with kittens! MOAR KITTEHS Another image placeholder which has the size of the image in pixels.. on it! excellent text editor

Editors & development or testing software

   Komodo Edit
   Firebug debugging browser add on
   W3C Validator
   The Web Developer Tool bar for Firefox is a useful bit of kit is a bookmarklet that turns webpages into wireframe to see layout
   atom ATOM is a cross platform, open source, text editor
   notepad++ learn github for source code control

Academic writing and Reference Managers –  Mendeley is a free reference manager and academic social network. Make your own fully-searchable library in seconds, cite as you write, and read and annotate your PDFs on any device. excellent browser/cloud based LaTeX soultion for academic writing. The easiest way to get into boosting your academic writing practice. Save pain in formatting and referencing !



Fonts & typography

   Font Squirrel
   Font Face is an online application for comparison of fonts for screen. Helps you to test web fonts on any web site on the fly ! Enter a site url and preview fonts instantly !

Webserver software stacks


Code & learning

   Code Academy

Code snippets etc

   CSS reset
   Normalise CSS
   HTML5 Boilerplate
   HTML5 Bootstrap
   initializr bootstrap
   1140 Grid System


   WordPress Tutorials


   Learn more about PAL

Peer Assisted Learning – Students working collaboratively, sharing ideas, knowledge and learning together.


   Colour Lovers an on-line community of colour lovers. Create and share palettes, patterns, and erm, colours!
   Kuler Find complementary, contrasting and chromatic colours with Adobe’s Kuler colour tools. Kuler


   dafont has loads of free and cheap fonts.
   Font Squirrel is a site that not only provides free fonts, but also the means to include them in your website (using the awesome @font-face generator).
   No need to embed fonts with Google Web Font’s one line of code will be enough to include Open Source fonts in your webpages.
   The League of Movable Type the most well-made, free & open-source, @font-face ready fonts.
   Typekit awesome font subscription service. So good, Adobe bought it!
   Urban Fonts more free fonts.

HTML5 has “lessons for beginners in plain english”. There you go.
   Or if you’re feeling like getting wet, why not dive into html5? Includes some decent code examples.
   Chrome Experiments: Inspiration – what you can do with WebGL (hardware-accelerated 3D graphics).
   Mozilla Dev. Network Demo Studio: Inspiration – Mozilla, (makers of Firefox) showcase HTML5 demos.


   W3C Validator Invaluable resource – always validate your code before pulishing. Tells you where you’ve gone wrong. A bookmarklet that you can use on any webpage to see what it would look like on different sized screens – great for testing responsive designs

Tutorial Sites

   CSS Tricks handy site with loads of code snippets, videos etc. – this guy is good.
   Nettuts+ is a blog-style site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites covering HTML, CSS, Javascript, CMS’s, PHP and Ruby on Rails.
   psdtuts+ um, kinda like nettuts but for Photoshop.
   Treehouse simply great video resource, learn web design (and app development) the easy way through watching video tutorials, taking quizzes, code challenges, and earning badges. Fun, interactive and cheap student plans available. Only $9 a month.
the annual Digital Media php-bootcamp


   A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices. Also do a great series of mini-books.
   Future Publishing’s Creative Bloq is a network of Digital Media publications including computer arts and net magazine.
   Smashing Magazine is a great site with articles on Coding, Design, Graphics, Mobile, UX and WordPress for professional Web designers and developers.
   Web Designer: “Defining the Internet through beautiful design – they say”. Magazine comes with a CD of free resources.
   ACM Interactions Magazine   ACM Interactions magazine is a mirror on the human-computer interaction and interaction design communities and beyond.

UWE Stuff

   Timetable Self Help: Check lecture times and timetable help.

Web Design Reference

   Dev Docs: CSS, HTML, Javascript, DOM, jQuery, PHP and Python documentation search tool.
   A great reference site, w3schools is the good point of call for learning web technologies.
   Use this site, HTML5 please, if you want to use any HTML5 or CSS3 as it tells you which new features are in use and how to handle those features in older browsers.
   UX Checklist on GitHub

Programming environments and frameworks

   *Processing. Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts.
   *OpenFrameworks openFrameworks is an open source toolkit designed for "creative coding". OpenFrameworks is written in C++ and built on top of OpenGL.