Using colour to elevate your data visualisation designs

Shreya Arya
Shreya AryaTableau / Alteryx Consultant à The Information Lab
Using colour to elevate
your data visualisation designs.
By Shreya Arya
Shreya Arya
About me
@datavizfairy
arya.shreya
Tableau / Alteryx Consultant
The Information Lab
Data School UK Consultant
(DS39)
P1 - Lloyds Banking Group
BI Adoption Team
x3 Viz of the Day
Tableau Public
Tableau Public Featured
Author
June 2023
Why is colour important?
• Humans are visual creatures
• Connected emotions and experiences
• Easily pick out key metrics
• Engaging and Impactful
• Increase appeal / usage of dashboards
Colour
Psychology
Basic
Colour Theory UI Tip 1
UI Tip 2
Colour Palette
Inspiration
What I will be covering
Topic 1
Colour Theory
Colour Theory
How different colours interact with each other
Colour Theory
How different colours interact with each other
A B C
1. COLOUR RELATIVITY
All the same colour:
Colour Theory
How different colours interact with each other
A B C
1. COLOUR RELATIVITY
Different Colours:
1. COLOUR RELATIVITY
2. ANALOGOUS COLOURS
Colours next to each other in the colour wheel
harmonious
visually-appealing
pleasant
1. COLOUR RELATIVITY
3. COMPLEMENTARY COLOURS
Colours opposite each other in the colour wheel
striking
attention-grabbing
high-contrast
Topic 2
Colour Psychology
Colour Psychology
Red
Danger
Passion
Anger
Romance
Energy
Creativity
Fire
Warmth
Orange Yellow
Joy
Happiness
Optimism
Success
Green
Nature
Health
Money
Well-being
Subconscious associations
Red
Danger
Passion
Anger
Romance
Energy
Creativity
Fire
Warmth
Orange Yellow
Joy
Happiness
Optimism
Success
Nature
Health
Money
Well-being
Subconscious associations
Green
Red
Danger
Passion
Anger
Romance
Energy
Creativity
Fire
Warmth
Orange Yellow
Joy
Happiness
Optimism
Nature
Health
Money
Well-being
Green
Red
Danger
Passion
Anger
Romance
Energy
Creativity
Fire
Orange Yellow
Joy
Happiness
Optimism
Positivity
Nature
Health
Money
Well-being
Green
Red
Danger
Passion
Anger
Romance
Red
Luck
Fortune
Success
Red
Beauty
Associations vary between cultures…
Information is Beautiful – Colours in Culture
Topic 3
UI Colour Tips
1. Eye strain
Avoid using Pure Black (#00000) and Pure White (#fffff) together
Effective communication, both internally and
with clients, remains a cornerstone of any
thriving enterprise. The seamless integration
of design elements, such as typography,
plays a crucial role in conveying brand
identity and enhancing user experience.
Effective communication, both internally and
with clients, remains a cornerstone of any
thriving enterprise. The seamless integration
of design elements, such as typography,
plays a crucial role in conveying brand
identity and enhancing user experience.
Accessibility
TIP 1: Avoid using Pure Black (#00000) and Pure White (#fffff) together
Effective communication, both internally and with clients,
remains a cornerstone of any thriving enterprise. The
seamless integration of design elements, such as
typography, plays a crucial role in conveying brand identity
and enhancing user experience.
Effective communication, both internally and with clients,
remains a cornerstone of any thriving enterprise. The
seamless integration of design elements, such as
typography, plays a crucial role in conveying brand identity
and enhancing user experience.
Accessibility
TIP 1: Avoid using Pure Black (#00000) and Pure White (#fffff) together
Effective communication, both internally and with clients,
remains a cornerstone of any thriving enterprise. The
seamless integration of design elements, such as
typography, plays a crucial role in conveying brand identity
and enhancing user experience.
Effective communication, both internally and with clients,
remains a cornerstone of any thriving enterprise. The
seamless integration of design elements, such as
typography, plays a crucial role in conveying brand identity
and enhancing user experience.
1. Eye strain
Avoid using Pure Black (#00000) and Pure White (#fffff) together
Effective communication, both internally and
with clients, remains a cornerstone of any
thriving enterprise. The seamless integration
of design elements, such as typography,
plays a crucial role in conveying brand
identity and enhancing user experience.
Effective communication, both internally and
with clients, remains a cornerstone of any
thriving enterprise. The seamless integration
of design elements, such as typography,
plays a crucial role in conveying brand
identity and enhancing user experience.
Deviate ever so slightly from
pure black / pure white!
2. Design
The 60:30:10 palette
Colour 1
60%
Main Colour
Colour 2
30%
Secondary Colour
Colour 3
10%
Accent Colour
2. Design
The 60-30-10 rule
2. Design
The 60-30-10 rule
Use the most impactful colour as your
accent!
30%
60% 10%
Topic 4
Colour Palette Inspiration
Coolors
Pinterest
Thank you for listening :)
Any questions?
Shreya Arya
@datavizfairy
arya.shreya
Tableau / Alteryx Consultant
1 sur 30

Recommandé

Lessius Hogeschool Pitch par
Lessius Hogeschool PitchLessius Hogeschool Pitch
Lessius Hogeschool PitchKris Decoodt
598 vues34 diapositives
Communication design par
Communication designCommunication design
Communication designSchommerMedia
5.4K vues40 diapositives
Educational Insight Brand Guide par
Educational Insight Brand GuideEducational Insight Brand Guide
Educational Insight Brand GuideOsama Sarakibi
181 vues21 diapositives
Ray+Keshavan | The Brand Union – Sujata Keshavan par
Ray+Keshavan | The Brand Union – Sujata KeshavanRay+Keshavan | The Brand Union – Sujata Keshavan
Ray+Keshavan | The Brand Union – Sujata KeshavanRay+Keshavan | The Brand Union
2.3K vues1 diapositive
INVOLVE - Module 2 Design.pptx par
INVOLVE - Module 2 Design.pptxINVOLVE - Module 2 Design.pptx
INVOLVE - Module 2 Design.pptxcaniceconsulting
40 vues35 diapositives
Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt... par
Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...
Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...Fonz Morris
79 vues23 diapositives

Contenu connexe

Similaire à Using colour to elevate your data visualisation designs

Slide Deck for My Intro to Visual Design Course par
Slide Deck for My Intro to Visual Design CourseSlide Deck for My Intro to Visual Design Course
Slide Deck for My Intro to Visual Design CourseDon Stanley
275 vues49 diapositives
How to Revive a Design Language to Get to Awesome Products par
How to Revive a Design Language to Get to Awesome ProductsHow to Revive a Design Language to Get to Awesome Products
How to Revive a Design Language to Get to Awesome ProductsDorelle Rabinowitz
1.4K vues59 diapositives
Visual Usability: principles & practices for designing great web and mobile a... par
Visual Usability: principles & practices for designing great web and mobile a...Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...Tania Schlatter
7.3K vues113 diapositives
Building Beautiful Flutter Apps par
Building Beautiful Flutter AppsBuilding Beautiful Flutter Apps
Building Beautiful Flutter AppsSheilaJimenezMorejon
67 vues31 diapositives
Citrrus Brand Identity - Rebrand Part 1 par
Citrrus Brand Identity - Rebrand Part 1Citrrus Brand Identity - Rebrand Part 1
Citrrus Brand Identity - Rebrand Part 1Erica Jaclyn
60 vues13 diapositives
Branding & Media Assessment Checklist par
Branding & Media Assessment ChecklistBranding & Media Assessment Checklist
Branding & Media Assessment ChecklistThe Center for Nonprofit Resources
10.2K vues6 diapositives

Similaire à Using colour to elevate your data visualisation designs(20)

Slide Deck for My Intro to Visual Design Course par Don Stanley
Slide Deck for My Intro to Visual Design CourseSlide Deck for My Intro to Visual Design Course
Slide Deck for My Intro to Visual Design Course
Don Stanley275 vues
How to Revive a Design Language to Get to Awesome Products par Dorelle Rabinowitz
How to Revive a Design Language to Get to Awesome ProductsHow to Revive a Design Language to Get to Awesome Products
How to Revive a Design Language to Get to Awesome Products
Dorelle Rabinowitz1.4K vues
Visual Usability: principles & practices for designing great web and mobile a... par Tania Schlatter
Visual Usability: principles & practices for designing great web and mobile a...Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...
Tania Schlatter7.3K vues
Citrrus Brand Identity - Rebrand Part 1 par Erica Jaclyn
Citrrus Brand Identity - Rebrand Part 1Citrrus Brand Identity - Rebrand Part 1
Citrrus Brand Identity - Rebrand Part 1
Erica Jaclyn60 vues
Hotel Branding Guide - Introduction par Richard Patrick
Hotel Branding Guide - Introduction Hotel Branding Guide - Introduction
Hotel Branding Guide - Introduction
Richard Patrick2.1K vues
What is Information Architecture? par Jeffrey Humble
What is Information Architecture?What is Information Architecture?
What is Information Architecture?
Jeffrey Humble310 vues
Company branding presentation, Anna Boroshok - Digital Transformation Strategist par Anna Boroshok
Company branding presentation, Anna Boroshok - Digital Transformation StrategistCompany branding presentation, Anna Boroshok - Digital Transformation Strategist
Company branding presentation, Anna Boroshok - Digital Transformation Strategist
Anna Boroshok172 vues
5-Basic-Graphic-Designing-Tips.pdf par V2Infotech1
5-Basic-Graphic-Designing-Tips.pdf5-Basic-Graphic-Designing-Tips.pdf
5-Basic-Graphic-Designing-Tips.pdf
V2Infotech12 vues
5-Basic-Graphic-Designing-Tips.pptx par V2Infotech1
5-Basic-Graphic-Designing-Tips.pptx5-Basic-Graphic-Designing-Tips.pptx
5-Basic-Graphic-Designing-Tips.pptx
V2Infotech17 vues
HealthCare corporate site - Design Evaluation by Mani hk par Hk Mani
HealthCare corporate site - Design Evaluation by Mani hkHealthCare corporate site - Design Evaluation by Mani hk
HealthCare corporate site - Design Evaluation by Mani hk
Hk Mani424 vues
LECTURE 2: Don Stanley's Design Class LSC 332 @UW Madison par Don Stanley
LECTURE 2: Don Stanley's Design Class LSC 332 @UW MadisonLECTURE 2: Don Stanley's Design Class LSC 332 @UW Madison
LECTURE 2: Don Stanley's Design Class LSC 332 @UW Madison
Don Stanley501 vues
Session 2, Branding Cultural Entertainment 2011 par John Verhoeven
Session 2,  Branding Cultural Entertainment 2011Session 2,  Branding Cultural Entertainment 2011
Session 2, Branding Cultural Entertainment 2011
John Verhoeven401 vues
Jason Mesut - Tactics for Amplifying the Strategic Value of Design par UX Lausanne
Jason Mesut  - Tactics for Amplifying the Strategic Value of DesignJason Mesut  - Tactics for Amplifying the Strategic Value of Design
Jason Mesut - Tactics for Amplifying the Strategic Value of Design
UX Lausanne25 vues
Solvy - a new payment experience, IxDA Milan& Turin June 2018 par Sketchin
Solvy - a new payment experience, IxDA Milan& Turin June 2018Solvy - a new payment experience, IxDA Milan& Turin June 2018
Solvy - a new payment experience, IxDA Milan& Turin June 2018
Sketchin2.3K vues
Storytelling and social media - your talent engagement toolkit par Universum Global
Storytelling and social media - your talent engagement toolkitStorytelling and social media - your talent engagement toolkit
Storytelling and social media - your talent engagement toolkit
Universum Global2.4K vues
Klingler-PPT Presentation-Marketing and Color-FINAL par Lynne Klingler
Klingler-PPT Presentation-Marketing and Color-FINALKlingler-PPT Presentation-Marketing and Color-FINAL
Klingler-PPT Presentation-Marketing and Color-FINAL
Lynne Klingler1.1K vues
Communication at the Workplace Discussion.docx par scottharry3
Communication at the Workplace Discussion.docxCommunication at the Workplace Discussion.docx
Communication at the Workplace Discussion.docx
scottharry32 vues

Dernier

Building Real-Time Travel Alerts par
Building Real-Time Travel AlertsBuilding Real-Time Travel Alerts
Building Real-Time Travel AlertsTimothy Spann
111 vues48 diapositives
Short Story Assignment by Kelly Nguyen par
Short Story Assignment by Kelly NguyenShort Story Assignment by Kelly Nguyen
Short Story Assignment by Kelly Nguyenkellynguyen01
19 vues17 diapositives
PROGRAMME.pdf par
PROGRAMME.pdfPROGRAMME.pdf
PROGRAMME.pdfHiNedHaJar
18 vues13 diapositives
Survey on Factuality in LLM's.pptx par
Survey on Factuality in LLM's.pptxSurvey on Factuality in LLM's.pptx
Survey on Factuality in LLM's.pptxNeethaSherra1
5 vues9 diapositives
Advanced_Recommendation_Systems_Presentation.pptx par
Advanced_Recommendation_Systems_Presentation.pptxAdvanced_Recommendation_Systems_Presentation.pptx
Advanced_Recommendation_Systems_Presentation.pptxneeharikasingh29
5 vues9 diapositives
Data structure and algorithm. par
Data structure and algorithm. Data structure and algorithm.
Data structure and algorithm. Abdul salam
19 vues24 diapositives

Dernier(20)

Building Real-Time Travel Alerts par Timothy Spann
Building Real-Time Travel AlertsBuilding Real-Time Travel Alerts
Building Real-Time Travel Alerts
Timothy Spann111 vues
Short Story Assignment by Kelly Nguyen par kellynguyen01
Short Story Assignment by Kelly NguyenShort Story Assignment by Kelly Nguyen
Short Story Assignment by Kelly Nguyen
kellynguyen0119 vues
Advanced_Recommendation_Systems_Presentation.pptx par neeharikasingh29
Advanced_Recommendation_Systems_Presentation.pptxAdvanced_Recommendation_Systems_Presentation.pptx
Advanced_Recommendation_Systems_Presentation.pptx
Data structure and algorithm. par Abdul salam
Data structure and algorithm. Data structure and algorithm.
Data structure and algorithm.
Abdul salam 19 vues
Organic Shopping in Google Analytics 4.pdf par GA4 Tutorials
Organic Shopping in Google Analytics 4.pdfOrganic Shopping in Google Analytics 4.pdf
Organic Shopping in Google Analytics 4.pdf
GA4 Tutorials11 vues
UNEP FI CRS Climate Risk Results.pptx par pekka28
UNEP FI CRS Climate Risk Results.pptxUNEP FI CRS Climate Risk Results.pptx
UNEP FI CRS Climate Risk Results.pptx
pekka2811 vues
Understanding Hallucinations in LLMs - 2023 09 29.pptx par Greg Makowski
Understanding Hallucinations in LLMs - 2023 09 29.pptxUnderstanding Hallucinations in LLMs - 2023 09 29.pptx
Understanding Hallucinations in LLMs - 2023 09 29.pptx
Greg Makowski17 vues
Supercharging your Data with Azure AI Search and Azure OpenAI par Peter Gallagher
Supercharging your Data with Azure AI Search and Azure OpenAISupercharging your Data with Azure AI Search and Azure OpenAI
Supercharging your Data with Azure AI Search and Azure OpenAI
Peter Gallagher37 vues
CRIJ4385_Death Penalty_F23.pptx par yvettemm100
CRIJ4385_Death Penalty_F23.pptxCRIJ4385_Death Penalty_F23.pptx
CRIJ4385_Death Penalty_F23.pptx
yvettemm1006 vues
RuleBookForTheFairDataEconomy.pptx par noraelstela1
RuleBookForTheFairDataEconomy.pptxRuleBookForTheFairDataEconomy.pptx
RuleBookForTheFairDataEconomy.pptx
noraelstela167 vues
Vikas 500 BIG DATA TECHNOLOGIES LAB.pdf par vikas12611618
Vikas 500 BIG DATA TECHNOLOGIES LAB.pdfVikas 500 BIG DATA TECHNOLOGIES LAB.pdf
Vikas 500 BIG DATA TECHNOLOGIES LAB.pdf
vikas126116188 vues
[DSC Europe 23] Spela Poklukar & Tea Brasanac - Retrieval Augmented Generation par DataScienceConferenc1
[DSC Europe 23] Spela Poklukar & Tea Brasanac - Retrieval Augmented Generation[DSC Europe 23] Spela Poklukar & Tea Brasanac - Retrieval Augmented Generation
[DSC Europe 23] Spela Poklukar & Tea Brasanac - Retrieval Augmented Generation
Cross-network in Google Analytics 4.pdf par GA4 Tutorials
Cross-network in Google Analytics 4.pdfCross-network in Google Analytics 4.pdf
Cross-network in Google Analytics 4.pdf
GA4 Tutorials6 vues
[DSC Europe 23] Zsolt Feleki - Machine Translation should we trust it.pptx par DataScienceConferenc1
[DSC Europe 23] Zsolt Feleki - Machine Translation should we trust it.pptx[DSC Europe 23] Zsolt Feleki - Machine Translation should we trust it.pptx
[DSC Europe 23] Zsolt Feleki - Machine Translation should we trust it.pptx

Using colour to elevate your data visualisation designs