MA Web Design + Content Planning materials for applied art for the web • major project


Colour is a topic which never ceases to inspire great discussion about interpretation, meaning and effect within design. As subjective as colour can be – it is our job as designers to be mindful of implications as well as considerate in our selection for use in interface and web design.

QE code for poll Before we dive in - let's see what associations colours will conjure up in our group, how much we differ or agree in our ideas of colour meaning :)
Colour poll
colour illustration

view slides: colour

Let's talk about our perceptions of colour, their meaning as well as the classic combination for colour schemes of our designs.

colour illustration

related links

video courses

As LinkedIn Learning is part of the resources you have free access to as students, I will try to recommend courses as fitting. Some cover art and design for print as well as digital design ~ but the principles and topics cover will still teach you lots.

understanding the effects of colour

Group discussion

For this task, I'd like us to watch the 3 selected videos and make note on how colour is used to tell the story and express a certain atmosphere.

Please note:
The videos are chosen for their very distinctive and purposeful use of colour. You'll likely find the first two nice and fun — while the last one is not for the faint-hearted and could be a little creepy. Please do speak up and I will mute the sound if it's too much for any one person (this is about the visual, the colour and mood). We can simply pause/stop the video; any early/random shot will still give us an idea of the colour design already.

Questions to consider

  1. what are the core colours used?
  2. what kind of mood / atmosphere do they express?
  3. do you think the colours achieved the intended feel?

3 extremely different moods

Mary & Max

An animated clay feature film, telling the story of a pen-friendship between two very different people.

Fotoshop by Adobé

A personal project by Jesse Rosten, filmmaker and commercial director.

Disposable Teens

Song and video by Marilyn Manson


view slides

Time to consider how you'd go about putting together a fitting colour scheme for your project.

A bit of advice

As you explore the world of colour it is easy to get stuck or distracted due to the endlessness of possibilities when it comes to colour schemes. There is a seemingly infinite number of tools and examples online which you should explore by all means. My advice would merely be not to get too hung up on tools but to work towards creating your own unique colour schemes to fit your project's purpose and mission.

related links

logo for hattie's tearoom

Let's get stuck in and try out the methods mentioned in my talk to get started on a colour scheme. Note that the tool matters less than the technique and end result. Whether you're new to design work or not, it's worth exploring options and deciding on a tool that works for you.

Please download the source file and I will show you how to get the colour palette via the blend tool in illustrator, and via the mosaic filter in photoshop.

download source file
vector of logo as SVG


  1. use any SVG to design your colour scheme
  2. keep naming all layers and artboards as you work
  3. use the artboard tool to make copies
  4. extract colours with the eyedropper tool
  5. use the colour swatches to create a blend of the colours
  6. change blend options to smooth or steps
  7. expand the blend for further edits
  8. ungroup for easy selection


  • pay attention to your settings - for this method, use only fill (no stroke)
  • work with the right selection tool
  • remember that the blend tool requires 2 clicks — your shapes can be selected or not, but both need to be clicked on with the blend tool
  • to apply colour, select the object and then use the eyedropper tool
  • work with layers to keep graphics in meaningful groups, easy for editing
  • make note of your colour codes as text, consider adding those inside a comment to your CSS

Affinity Photo

  1. open image file + rename layer
  2. duplicate layer for edits
  3. select new layer & apply filter
  4. top menu: Filters > Distort > Pixelate
  5. adjust quantisation for less/more colours
  6. create 6 square shapes for final colour pick
  7. pick colours, apply to squares
  8. make note of HEX code via colour chooser

Adobe Photoshop

  1. open image file + rename layer
  2. duplicate layer for edits
  3. select new layer & apply filter
  4. top menu: Filter > Pixelate > Mosaic
  5. adjust cell size for less/more colours
  6. create 6 square shapes for final colour pick
  7. pick colours, apply to squares
  8. make note of HEX code via colour picker

Color matching game

Another lovely little game by Mark MacKay in collaboration with María Munuera. This time, it's all about finding the correct colour within the wheel of tones.

colour game screenshot

What the hex?

If you want to geek out some more - check out the quite vexing 'what the hex' game by Andrew Yang.

game screenshot

profile project


  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

feedback threads on Slack

Carry on working in groups - this week, I'll leave the setup of the threads to you :)

Just remember that each week, there's a re-shuffle of teams to give everyone a chance to work with everyone else ~ well, in theory anyway ツ

speechbubble + hello

Feedback groups

To allow us all to view each other's work in progress - each group is to put together one image - a summary or collage of each person's work, to be shared via slack for quick discussion in class. I've used a random selector to pick one person per group, marked by an asterisk ✱, to be responsible for putting this up. This will change each week as the groups arrangements.

2/11/2022 work progress of checklist #2


Standardistas - I
  1. Ye-Seul
  2. Vidhi ✱
  3. Mona
  4. Lipi
  5. Anumeha
Standardistas - II
  1. Sophie ✱
  2. Qu
  3. Jessica
  4. Ibrahim
  5. Andre
Standardistas - III
  1. Peter
  2. Paula
  3. Harideep
  4. Emil
  5. Adi ✱
Standardistas - IV
  1. Natalie
  2. Muhammad
  3. Bukie ✱
  4. Armani


Codepoets - I
  1. Zara
  2. Sushan ✱
  3. Jeena
  4. Jaanvi
  5. Aleyna
Codepoets - II
  1. Sukhi
  2. Sabbu ✱
  3. Jagatheesan
  4. Gopika
Codepoets - III
  1. Rohith
  2. Prachi
  3. Eddy ✱
  4. Devjan
Codepoets - IV
  1. Miri ✱
  2. Larmie
  3. Brikena
  4. Amrutha

Veerle Pieters

Veerle is a graphic and web designer whose blog has been an inspiration to many for many many years. She is one of my favourite web people :) Her site featured articles and tutorials (especially for vector graphics) and the inspiration section is updated frequently and always offers something fresh ~ have a look at the inspiration section.


The experimental phase is most important and the heart of the creative process—often leading to unexpected results.

In this article Veerle tells the story of the redesign of her blog and her "... Design Process and the Struggles Along the Way". Whether her graphic style is to your taste or not, the quality of her designs is clear and we always learn so much when someone so openly shares their work process. A worthy read, highly recommended.