Teaching the web

4 years ago, almost to the day, I started Interactive Multimedia Design at the University of Ulster. The course, although good, was already outdated from the start. We were being taught tables, Dreamweaver and Visual Basic. I recently graduated and got a job as a Web Developer spending most of my time working with Rails. When I was starting Uni, Rails was on Version 1.2 and there was probably not a lot jobs involving Rails anywhere outside of the valley.

Teaching design for the web may work for some in it's current format. It worked for me - I ended up in a job. There's a lot of it, that could be done better.

Don't think I'm putting down my course. It's probably one of the better undergraduate courses in the UK teaching Web Design, but it's nowhere near perfect. There's no point in me bullshitting and saying it 100% prepared me for joining the real world. If you've read the article in The Manual by The Standardistas you'll have read how they teach on the MA in Multidisciplinary design, IMD's big brother. One of the points they raise is that without criticism, there can be no improvement.

Andy Budd in his article discussing the current landscape of web design education gets to the crux of the problem:

We need to create students that are connected to the medium and have an understanding of the provenance of their craft; students who are schooled in critical thinking, who can deconstruct ideas, analyse briefs, solve problems and critique solutions.

A web design course needs to be be composed of a few different things, practical and theory are the two main ones. Practical concepts to teach would be technologies, HTML, CSS, even JS - your bread and butter of making a website. Theory should cover design principles such as grid systems, colour theory, typography. These will and should overlap. Being able to say why a Serif typeface is better for body copy and explaining what's the difference between a bad font stack and a good font stack is, is one of these areas.

All of this could be fine for our students, but ideally we need a reading list right from the start. The reading list needs to supplement what they're learning through the year. They need books like HTML and CSS Web Standards Solutions: A Web Standardistas Apporach and Grid Systems in Graphic Design. A lot of what is on Jason Santa Maria's and Colly's reading lists would be appropriate to our students.

This being the web though, they should really be reading a lot of blogs. In an ideal world, they would be subscribed to RSS feeds before they start this course. They need to be reading the obvious sites and blogs from day one - Daring Fireball, A List Apart, Mark Boulton Design, Contrast's blog, Frank Chimero's blog and Andy Rutledge's blog. The important thing to remember here is that we're catering for a lot of beginners, so sites such as Smashing Magazine will absolutely come in handy.

Our course ideally should have a well designed web page, not only for promoting the course, but for sharing content with the students. The MFA in Interaction Design at the SVA is one of the best out there but it seems to cater more for promotion of the course (unless the content for students is on another site). The site needs to have a page like this one on The Grid System. A list of books, blogs, tools and other miscellany that our students will find immensely helpful.

The students also need to be blogging from the start. It'll help them learn how to build a site and make use of basic HTML tags like a, b, p and img. The main thing it will help our students with is writing - which as 37signals rightly tells us, it's important to be able to write as it tends to be packaged with good communication and just generally - good organisation of thought.

We're missing a key component in our course though. The students obviously need to hand in something to judge their performance. Coding a blog could be valid for this section but more traditional assignments will be invaluable. The Standardistas book does exactly what we need beautifully - starts off with the basics and eventually builds on those skills to give us the ability to make a whole site.

Later on in our course, we need to show our students what it's like working with clients. Currently, this happens in IMD, albeit a non-profit or a University organisation. These have worked out well enough in the past when the students have been allowed enough time but all too often they feel rushed. Pushed in at the last minute. If the student wants an authentic experience from this they need to go through all the processes to end up with a better result, not just to tick boxes on a marking sheet.

Before we get into it, I feel like I need to discuss one of the main problems the students feel about IMD as it stands. The culture of academia doesn't work for teaching web design. Web Design is primarily a non academic background, the students need lecturers with real world experience. Without real advice from local designers, developers and creative directors - our students would be stuck in a world of older technologies and even worse, a world removed from the reality of working in a business.

The most important ingredient of our course are bright and eager minds to teach. Some have the opinion that students should either be submitted on a portfolio and/or interview basis. There is a lot of students who lose interest as it gets to the final year so I can see where they are coming from, but at the same time, some students only get interested once in the course. It's a tough problem to work through. Myself and a few other students (that I know of) who have came out of IMD into a job are from a non-art background so the portfolio solution wouldn't have worked for us. An interview would've been a better way to go. A similar course in Dundee, at least when I was applying, allowed you to apply from either an art background or a computing background, giving us a open ended, but still focused, selection process for our students.

So we have our five cornerstones of what we need: Practical, Theory, Reading, Learning and Experimentation. That's the ground work. We also need some good assignments for our students to work on, something will make use of everything they learn. -

1st Year - The Basics

  • – Practical
    • Intro to the Web - how a website works, directories, external links, good practices of markup, browsers, etc.
    • HTML
    • CSS
  • – Theory
    • Intro to Design - good design vs bad design, history of design, grid systems, design in other fields, etc.
    • Interaction Design - examining examples of typography, colour, user flows and wireframing in building interactive products.
    • Typography and Colour Theory - explaining why certain typefaces and colours work better with each other, typography hierarchy in information architecture.
  • – Deliverables
    • Build up skills by marking up a piece of text, for example a bio about the student or some content given to them.
    • Each week, as their skills build up, they should be able to add more and more markup to the piece of content.
    • Give the students a brief to create a site, something that they can really get stuck into without worrying too much about the backend.

2nd Year - The Middle

Now, our students should have a good level of skills and with the books and blogs they've been reading they should have developed a good degree of knowledge on the theory side of things. They should also have opinions, opinions are good, opinions mean they're passionate. Now, we need to foster some self motivated learning outside of our curriculum. In my 2nd year of Uni I started learning Ruby, I understood programming concepts and Ruby looked like the closest thing to plain english that I could find. The reason we need to build a culture of self learning is to allow our students to produce work on their own that isn't being evaluated for their grade. Doing more good work will get them more recognition and give them a higher chance of getting a job when they finish.

  • – Practical
    • Javascript (and possibly jQuery, it doesn't look like it's going anywhere soon).
    • Basic Programming Concepts - loops, conditional statements, etc.
    • Current advanced CSS techniques.
  • – Theory
    • Intermediate Design - graphic & web designers and their work, examining well designed sites and why they are good.
    • Information Design - visualising complicated sets of data like the work of Felton, Tufte and Brian Suda.
    • UX Design - What is it and how it touches into psychology. Looking at user testing and user feedback.
  • – Deliverables
    • Weekly tests on the Javascript skills being taught to demonstrate understanding.
    • Produce an infograph with a set of data. Probably something from this list of public data.
    • Pick a product and create a well designed, usable and informative site to demonstrate the student's understanding of UX Design.

3rd Year - The Option

In IMD our 3rd Year of Uni was set aside as a placement year, you had no choice in the matter. It didn't help that we had to find a job whilst the world was knee deep in a recession. Real world experience is good, but there's no point in getting unrelated real world experience. If you can't get a placement working in a studio there isn't much point going to work in a school just so you'll get a grade.

The other big discussion about University placements is whether or not the students should be paid. In my experience, the answer is yes. Being forced by circumstances to work for free amounts to slavery. It shouldn't be an issue about should you pay this student minimum wage, no matter your opinions, students are still people and as such, need to eat, drink and occasionally party.

4th Year - The End

Here we are now, the beginning of the end. Our students should be nearly ready for the real world. They've been designing, coding, blogging and reading for 3 years now. After their year of a good placement, they should understand now that what they do is a craft.

Now, the students should be able to deal with some higher level concepts. It would probably be a good idea for them to at least use some sort of dynamic web language, obviously I have a bias towards Ruby on this (the fact that it's practically plain english was a big selling point for me) but PHP is still the most used language out there. I would say that we need to be cautious about teaching certain technologies that aren't 'traditional'. Expression Engine and Wordpress are two products that would be useful to teach, but teaching programming concepts and letting our students learn these on their own is still probably the best idea.

They've been working with HTML and CSS for a few years now and should have already reached a semi-experienced level and they should, be OK with learning advanced CSS. Responsive design definitely seems to be the next step in where our industry is headed and it's exactly the kind of thing our students should be learning at this stage.

Our client project(s) should really come in at this point in order to prepare the students in how to react to clients and their feedback. Like I said before, this should really allow our students to focus on the processes involved rather than rushing to build a theme for a wordpress backed site in 4 weeks. Our tutors should really set the expectations with the client in the timeframe proposed. There's also the whole debate about if this is spec work or not, especially if there is a prize or a promise of some paid work at the end which I'll not get into. It probably falls under the definition of spec work, but it's a necessary evil in order to prepare our students to work with clients. The possible solution, could maybe be to provide our students with a brief from an imaginary client with the tutors giving the feedback. But if what we want out of the assignment is experience with a client, then we're probably going to have to do it the first way.

We also need something to demonstrate the result of the past four years. Our Final Project (as it gets called in IMD) is an open brief, you decide the idea, you decide the technologies used and you decide how to do it. My final project, Today The World Is, I built in Rails because I'd been learning it by myself for a while. I know of more than a few students who found it difficult because they had to go from being vaguely familiar with programming concepts to building an dynamic site within a few weeks. Most just resorted to a Wordpress backend with plugins. Knowing any piece of a dynamic language will help our students to get jobs in the real world. The most difficult stage in learning it has to be programming concepts in relation to how a web site works. In Rails, this is a for loop: <%- @posts.each do |post| %>
  <h2><%= post.title %></h2>
  <p><%= post.summary %></p>
<% end %>

The plain english-ness of Ruby is a great boost to someone who has never done any sort of programming before. The primary thing that the lecturers need to remember, that we're teaching programming to people that aren't programmers. All too often we were taught the examples of OOP using a real world object and its attributes and the possible methods associated with it. Designers don't get that. Use the example of a blog posts, attributes such as a title, a published date, a summary, the content whilst the methods could be publishing it, saving a draft copy or deleting it.

Even with our open brief final project, the students should be given some time to work on smaller ideas to prepare themselves. Weather it be an open brief or smaller assignments. With our module teaching programming skills (or a language) and their knowledge of Javascript, they should be able to complete very small assignments, like a simple blogging engine with HTTP auth or a single serving site.

While our students are doing their final project, they should really be able to focus solely on it. If our year is split between 2 semesters, they should really have the second semester to work, wholly on building their programming skill-set for their project. The product of our final year should be an excellent final project that sells our students to an employer or gives them the ability to go out and work for themselves.

One thing you'll have noticed I've missed out is exams - they have no place in our course. In 2011 there is absolutely no need to test my ability to write the HTML of a page with a contact form on paper. I can absolutely guarantee that no designer or developer has ever done this in the real world. Psuedocode I can understand, but writing a 60 line file on paper serves no purpose other than show how exams have no place in our course.

The other thing I've missed out is a list of content for our 4th year. The final year of our course is when our students should be at their most interested, their most passionate and their most creative. We could help to cultivate this further by giving optional modules allowing them to chose the path they want to head down. iOS design, UX, Rails, PHP, Advanced Javascript are great topics that our students could learn from professionals with real life experience. Normal lectures should still happen, but they need to focus on more abstract concepts. This is something that IMD does very well in the last year with Nik and Chris giving some amazing lectures to on topics such as paper prototyping, symantic markup with content, masters of design and processes.

The Result

Over the last four years, our students have learnt a tremendous amount about this craft and hopefully, their future career.

However, I am not a teacher and have never been involved in education. I'm not saying this is exactly what needs to be in a web design course. It will, and should, evolve and change over time, just like web design itself. The content of the course needs to focus on theory of design, core technologies and abstract concepts. Our students should be well versed in these three cornerstones to allow them to shift and change their skills with the moving landscape of our industry. A recent episode of This Developer's Life put it so eloquently -

A degree should be a gateway drug to learning.