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
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.
related links
- Veerle's Inspiration stream
- Color Theory for Designers, Cameron Chapman
- The Psychology of Color in Web Design, Shane Barker
- Why that colour? Stu Bailey
- colourful website examples on awwwards
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.
- Color for Design and Art
by Jim Krause - Color Graphic Design Foundations: Color
by Mary Jane Begin
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
- what are the core colours used?
- what kind of mood / atmosphere do they express?
- 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.
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
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.
What the hex?
If you want to geek out some more - check out the quite vexing 'what the hex' game by Andrew Yang.
profile project
CHECK LIST #2
- mark up your text in a fitting structure and begin to experiment with typesetting
- focus on clear hierarchy and put relevant emphasis on each content type
- 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 ツ
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
- Standardistas - I
-
- Ye-Seul
- Vidhi ✱
- Mona
- Lipi
- Anumeha
- Standardistas - II
-
- Sophie ✱
- Qu
- Jessica
- Ibrahim
- Andre
- Standardistas - III
-
- Peter
- Paula
- Harideep
- Emil
- Adi ✱
- Standardistas - IV
-
- Natalie
- Muhammad
- Bukie ✱
- Armani
Codepoets
- Codepoets - I
-
- Zara
- Sushan ✱
- Jeena
- Jaanvi
- Aleyna
- Codepoets - II
-
- Sukhi
- Sabbu ✱
- Jagatheesan
- Gopika
- Codepoets - III
-
- Rohith
- Prachi
- Eddy ✱
- Devjan
- Codepoets - IV
-
- Miri ✱
- Larmie
- Brikena
- 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.