projects 2017/18

WARNING: it will be my aim to give you plenty of project work! :)
I firmly believe that you will only learn by doing.

While only 2 of the projects will be assessed – I would recommend that you aim to work on as many of the projects as you can. You will end up with a strong portfolio of work ~ ready to take on the web :)

typesetting literature

Choosing a suitable piece of literature – focus on presenting the text in a suitable typeface, creating a colour scheme which both aids legibility as well as underpins the context of your chosen piece.
Restriction: use of images is not permitted.

full brief

 project brief

This project focuses on typography and colour. Choose any text by any author. It could be a passage from your favourite novel, a poem or a song lyric. Think carefully when choosing the text, as no images are allowed in this project and so the text should allow for detailed styling and typesetting.

The creative use of the numerous CSS rules available will enable you to present your chosen text with expression and meaning. You must use only text and colour for your design. 
Absolutely no images are allowed.

Focus on expressing the text’s story or emotion, and choose colours and typefaces accordingly. The website must be a minimum of three pages and show content related to your chosen text such as background information on the author, context of the writing, interpretations or reviews ~ or additional text related to your selected piece.

Use your design to create a balanced presentation of text that is both engaging and unusual, while maintaining good legibility and that defines an appropriate visual balance between the interface and text display. Focus on selecting an appropriate font stack and ensure consistency in presentation for fallback fonts.


The website must consist of a minimum of 3 pages and make use only of typographic settings and colour. No other visual aids are permitted, ie no images to be used within the design of the site at all.
Create a design that demonstrates a balanced presentation of your selected text – which is both engaging and unusual, while maintaining good legibility. Define an appropriate visual balance between the interface and text display. Focus on selecting an appropriate font stack and ensure consistency in presentation for fallback fonts.

submission requirements

All planning sketches and drafts to be submitted and all references must include links that are shown on the page.
The website must be online and viewable by the deadline as well as submitted via email.


Marks for this project will be awarded in a 60/40 ratio for visual design and technical accomplishment.

You will be judged on your creative presentation of the text and additional information, with a focus on the typographic approach used in your design, along with the suitability of your use of colour and visual rhythm.

This project represents 50% of your total course mark.



introduce yourself.

Create a single page design for an online profile for yourself, to introduce yourself to the web :)

full brief

The aim of this project is to create a professional profile page for yourself, a single page design. Selecting any information you find suitable, create a design which will present your chosen information in a clear and meaningful manner.

✔ check list #1

  1. write/edit/collect the information you’d like to feature on your profile
  2. work with your given content to plan for effect presentation
  3. sketch out your ideas in your sketchbook, experiment/iterate/refine
  4. produce a digital mockup of your design (black/white only)

✔ check list #2

  1. mark up your text in a fitting structure and begin to experiment with typesetting
  2. focus on clear hierarchy and put relevant emphasis on each content type
  3. put together a fitting font-stack with a minimum of 5 fonts

group feedback on part #1 & #2


✔ check list #3

  1. work either in a graphics app, or CSS, to experiment with colour schemes
  2. produce a digital mockup of your design
  3. post a link to your colour scheme ideas in the comments below, or post to the #design channel on Slack
  4. give feedback to each other ;)

✔ check list #4

  1. work on any visuals included in your design
  2. experiment with patterns for background
  3. produce the final single webpage and submit your complete folder via Slack by the 8th November

final deadline