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

Colour

Colour

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.

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 course

Pluralsight offers a few different courses on colour and this one seems a good complement to our session, giving you some more background.
Color Theory Fundamentals by Chris Davis

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

colour

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

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 and .ai file

summary

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

tips

  • 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

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

Adobe Photoshop

  • open image file + rename layer
  • duplicate layer for edits
  • select new layer & apply filter
  • top menu: Filter > Pixelate > Mosaic
  • adjust cell size for less/more colours
  • create 6 square shapes for final colour pick
  • pick colours, apply to squares
  • 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

Quick reminder: the brief asks for a single page profile design.
Double-check project briefs for details and examples from students in the previous years.

CHECK LIST #2

  1. work either in a graphics app, or CSS, to experiment with colour schemes
  2. produce a digital mockup of your refined final design
  3. post your ideas to Slack #design channel - or share in Whimsical
  4. share feedback and comments with each other ;)
  5. apply your final colour scheme to your profile page

3/11/2021 group feedback on part #3

feedback to continue

And here's our weekly reshuffle. Again, I've taken the list of your names and put this through a generator to form 5 teams of 5. Please do carry on with sharing your work with your group, or with us all ~ slack or whimsical whichever suits.

a note on time & workload

Going by our chats on slack it seems we're slowing getting into the flow though not everyone's joined in fully just yet. I also realise that you might feel you don't have enough time or headspace for feedback on top of your own course work. Perfectly understandable. ~ However, it is worth repeating that the design conversation skills are part of your learning on this MA. In addition, any creative work does require scrutiny and feedback in order to evolve and result in a good end product ツ

For our web team, if everyone can make just a little bit of time to check on a few people's work and leave some comments, then we can spread the love <3 and everyone will benefit. Ask for feedback ~ reply to requests for comments ~ as and when you can ツ

speechbubble + hello

feedback groups, reshuffled

group 1
  1. Sara
  2. Vishnu VV
  3. Julija
  4. Crystal
  5. Jenny
  6. Anjan
group 2
  1. Antony
  2. Yinka
  3. Dennis
  4. Peterson
  5. Alasdair
  6. Manu
group 3
  1. Anoop
  2. Qu
  3. Jahnavi
  4. Carla
  5. Caspar
  6. Shehnaz
group 4
  1. Maya
  2. Katherine
  3. Shreya
  4. Nikki
  5. Emily
  6. Umesh
group 5
  1. Vishnu AK
  2. Anna
  3. Mary
  4. Barbara
  5. Jyothisha

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.

typelablogo

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.