Teaching Web Design to Art Students

While the idea of coding may seem like it should stay with computing students, it is actually incredibly creative. Most web developers will say that the web is in its infancy and will only grow to become more central to our lives. This is a resource to help you integrate web development into your creative teaching.

Why learn how to code?

Creating content for the web has moved on a lot since the late 90’s and early 2000’s when anyone could create content for the web. Now, most people will be interacting with the web and posting content to all sorts of social networks and sharing experiences through blogs.

These are fantastic resources and add to our lives significantly. There are so many websites out there that enable high levels of interaction and customisation that are a far cry from the simple websites that used to be around. While that is great for the user of the web, it has actually made it difficult for the web designer.

Designers used to be able to cross between creating print design and web design quite easily. They also used to be able to manage the whole construction of a web page from initial concept to final publication and maintenance. However, because of the complexity of web pages now, most people have to concentrate on either the front end (the visual stuff that is actually seen by the user), or the back-end (the programming that goes into making the web page function).

Essentially, web designers have had to become more specialised and tend to get really good at one or a couple of areas, rather than trying to learn everything. While this might put some people off, it actually means that high-level skills are really sought after and in real demand. How many other areas in art, design and media could say that there was such a demand for skills in the present economic climate.



This all may sound very technical, but try to stay with it and the rewards can be fantastic. What is HTML and why is it so important? HTML stands for Hyper Text Mark-up Language. It is the language that web browsers like Internet Explorer or Safari use to understand what to present to the viewer. All web pages that we view every day are made using this language.


HTML is a language for describing web pages

HTML is not a programming language, it is a markup language

A markup language is a set of markup tags  – tags are keywords outlined by little angle brackets <>

HTML uses markup tags to describe web pages – for example, it knows to present an image because the code will have a tag in it like: <img>

HTML tags normally come in pairs like <b> and </b> . The first tag in a pair is the start tag, the second tag is the end tag – these tell the browser where something starts and ends


The above description is adapted from: http://www.w3schools.com/html/html_intro.asp.

Next time you are browsing a web page, try viewing the source code that actually makes the web page you are viewing. Don’t be put off by it, just consider how much detail has gone into making something. Each browser will have its own way of letting you view the Source Code, but they all provide a way through their main menu at the top.

A central reference for HTML and other languages that help make the web such a rich experience can be found at the W3C organization. Their website has a range of fantastic resources to start you on your web development journey: http://www.w3schools.com/w3c/w3c_html.asp

It would be difficult to recommend the resource any more highly. One of the best elements of the site is that there are extensive little tutorials. Not the kind of tutorials that are hard to follow, but immediate interactive games that help develop an understanding of what code does and how to manipulate it through trial and error.

The following is an example of the ways that you can try out adapting code and see what happens. Almost every tag that can be used in html is covered in this way. The left hand provides actual code that can be edited (or pinched for your own website). The right hand panel displays what a browser would display, giving instant understanding.

Using tester on w3Schools


Page Design:

In order to design a web page there are a few simple rules that need to be followed that cover the basic elements of a web page and how these need to be ordered so that your page can be presented by a browser. There are also some key pieces of information about web design that can really help.


Programs that help write HTML

There are 2 forms of HTML editors or programs that you can use to start writing HTML:

Text Based – probably more difficult for a visual person to start learning web design.

WYSIWYG (what you see is what you get) – a visual program that helps produce the code for web pages.


WISYWIG programs:

  • Adobe Dreamweaver
  • Amaya
  • Aptana
  • iWeb
  • Rapidweaver


WISYWIG  programs – advantages and disadvantages


  • Will be more graphical and intuitive for the designer coming from a design background. As it builds most of the code automatically.
  • These can generate CSS and Javascript along with HTML.


  • Bloated code that can impact on:
  • Search Engine penetration
  • Increase load time
  • Make editing more difficult


Breaking up HTML for easier understanding

The following description and explanation of HTML structure was adapted from: http://www.web-source.net/html_codes_chart.htm , this explained the most basic structure and requirements in a very simple way. The code below is everything that you need to make a basic page. Yes, it is pretty far off a beautiful Photoshop file, but remember the potential audience and interactive elements that this could have with a little more detail and attention:
<title>Your Page Title</title>


What do the different tags mean?

It is really useful and can take some of the anxiety away from web code to know what each of the tags means. Knowing this should stop anyone worrying about deleting something and being concerned about it having a major impact. Most web designers will have learnt through trial and error, chopping and changing code they have found and making it work for them. This is a very simple explanation of the basic pieces from: http://www.web-source.net/html_codes_chart.htm

<html> – Begins your HTML document.
<head> – Contains information about the page such as the TITLE, META tags for proper Search Engine indexing, STYLE tags, which determine the page layout, and JavaScript coding for special effects.
<title> – The TITLE of your page. This will be visible in the title bar of the viewers’ browser.
<body> – This is where you will begin writing your document and placing your content. The body tag can also contain elements that refer to the page, such as background colour

Why are the tags written in a certain way?

The tags in HTML are made up of elements. There are many kinds of elements such as tables (similar to tables in Microsoft Word), images or things like font. Most design students will be able to understand these quite easily.

Lets say that we wanted the font on the page to be a particular size, then this could have an HTML tag before it that told the browser to present the type in a certain way:

<font size=”2”>
The first part is the element, in this case the font. The second part is the attribute, such as the size of the font. The third part is the value of the attribute. In the same way that we might describe someone as being female (the element), with the height (the attribute), of 160cm (the value of the attribute). The grammar is strange at first, but quickly makes sense.

The list below outlines what each part of the elements is:

Part 1 – opening bracket: <

Part 2 – Element such as: Font

Part 3 – Attribute of the element such as: colour  – There are many different kinds of attribute that always follow the element

Part 4 – “value” of the attribute such as: #660099 – There are different values depending on the element like colour in RGB value. These always have inverted comas around them.

Part 5 – Closing bracket: >


The best way to start

Try and get access to a program like Dreamweaver. The hardcore web designers will turn their noses up at it, but anyone that has made the transition from visual arts to digital media will have learnt using it.

One of the great advantages to it is that it can display both the visual side of how it will be presented in a browser and the code. It is really satisfying to see the code being built for you and then having a go every now and then to try and adjust your design by altering the code.

Possibly the main bit of advice is not to have massive expectations. Most people from a graphic or visual arts background will be used to being able to move things around easily and layer elements on the page or delete parts. However, there is a reason that web designs really often look very similar: their function is very clear and they need to be visible across a wide range of different computers.

There are so many tutorials and forums out there that can help like:

Another great way to start is to actually download a fully functional template that you can then load into Dreamweaver and adjust. There are lots of sites that offer this for free including:


Considering giving it a go?

Just taking a little time to try out coding in a program like Dreamweaver will allow you to develop an appreciation for designing for the web. When my students first heard that they were going to have to type code, they all rolled their eyes and made grumbling noises. By the end of the first lesson they were absolutely amazed and excited about what they had achieved. Mainly because they appreciated the amount of effort it can take to produce a small thing. Don’t be put off by that, it may be small, but the potential audience and reach should easily outweigh that.

Daniel Freaker Daniel Freaker Educational Consultant, Editor for Pearson Portfolio. danfreaker@pearsonportfolio.co.uk