Using colour to elevate your data visualisation designs

Shreya Arya
Shreya AryaTableau / Alteryx Consultant en 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 de 30

Recomendados

Lessius Hogeschool Pitch por
Lessius Hogeschool PitchLessius Hogeschool Pitch
Lessius Hogeschool PitchKris Decoodt
598 vistas34 diapositivas
Communication design por
Communication designCommunication design
Communication designSchommerMedia
5.4K vistas40 diapositivas
Educational Insight Brand Guide por
Educational Insight Brand GuideEducational Insight Brand Guide
Educational Insight Brand GuideOsama Sarakibi
181 vistas21 diapositivas
Ray+Keshavan | The Brand Union – Sujata Keshavan por
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 vistas1 diapositiva
INVOLVE - Module 2 Design.pptx por
INVOLVE - Module 2 Design.pptxINVOLVE - Module 2 Design.pptx
INVOLVE - Module 2 Design.pptxcaniceconsulting
40 vistas35 diapositivas
Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt... por
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 vistas23 diapositivas

Más contenido relacionado

Similar a Using colour to elevate your data visualisation designs

Slide Deck for My Intro to Visual Design Course por
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 vistas49 diapositivas
How to Revive a Design Language to Get to Awesome Products por
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 vistas59 diapositivas
Visual Usability: principles & practices for designing great web and mobile a... por
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 vistas113 diapositivas
Building Beautiful Flutter Apps por
Building Beautiful Flutter AppsBuilding Beautiful Flutter Apps
Building Beautiful Flutter AppsSheilaJimenezMorejon
67 vistas31 diapositivas
Citrrus Brand Identity - Rebrand Part 1 por
Citrrus Brand Identity - Rebrand Part 1Citrrus Brand Identity - Rebrand Part 1
Citrrus Brand Identity - Rebrand Part 1Erica Jaclyn
60 vistas13 diapositivas
Branding & Media Assessment Checklist por
Branding & Media Assessment ChecklistBranding & Media Assessment Checklist
Branding & Media Assessment ChecklistThe Center for Nonprofit Resources
10.2K vistas6 diapositivas

Similar a Using colour to elevate your data visualisation designs(20)

Slide Deck for My Intro to Visual Design Course por 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 vistas
How to Revive a Design Language to Get to Awesome Products por 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 vistas
Visual Usability: principles & practices for designing great web and mobile a... por 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 vistas
Citrrus Brand Identity - Rebrand Part 1 por Erica Jaclyn
Citrrus Brand Identity - Rebrand Part 1Citrrus Brand Identity - Rebrand Part 1
Citrrus Brand Identity - Rebrand Part 1
Erica Jaclyn60 vistas
Hotel Branding Guide - Introduction por Richard Patrick
Hotel Branding Guide - Introduction Hotel Branding Guide - Introduction
Hotel Branding Guide - Introduction
Richard Patrick2.1K vistas
What is Information Architecture? por Jeffrey Humble
What is Information Architecture?What is Information Architecture?
What is Information Architecture?
Jeffrey Humble310 vistas
Company branding presentation, Anna Boroshok - Digital Transformation Strategist por 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 vistas
5-Basic-Graphic-Designing-Tips.pdf por V2Infotech1
5-Basic-Graphic-Designing-Tips.pdf5-Basic-Graphic-Designing-Tips.pdf
5-Basic-Graphic-Designing-Tips.pdf
V2Infotech12 vistas
5-Basic-Graphic-Designing-Tips.pptx por V2Infotech1
5-Basic-Graphic-Designing-Tips.pptx5-Basic-Graphic-Designing-Tips.pptx
5-Basic-Graphic-Designing-Tips.pptx
V2Infotech17 vistas
HealthCare corporate site - Design Evaluation by Mani hk por 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 vistas
LECTURE 2: Don Stanley's Design Class LSC 332 @UW Madison por 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 vistas
Session 2, Branding Cultural Entertainment 2011 por John Verhoeven
Session 2,  Branding Cultural Entertainment 2011Session 2,  Branding Cultural Entertainment 2011
Session 2, Branding Cultural Entertainment 2011
John Verhoeven401 vistas
Jason Mesut - Tactics for Amplifying the Strategic Value of Design por 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 vistas
Solvy - a new payment experience, IxDA Milan& Turin June 2018 por 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 vistas
Storytelling and social media - your talent engagement toolkit por 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 vistas
Klingler-PPT Presentation-Marketing and Color-FINAL por 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 vistas
Communication at the Workplace Discussion.docx por scottharry3
Communication at the Workplace Discussion.docxCommunication at the Workplace Discussion.docx
Communication at the Workplace Discussion.docx
scottharry32 vistas

Último

Survey on Factuality in LLM's.pptx por
Survey on Factuality in LLM's.pptxSurvey on Factuality in LLM's.pptx
Survey on Factuality in LLM's.pptxNeethaSherra1
5 vistas9 diapositivas
How Leaders See Data? (Level 1) por
How Leaders See Data? (Level 1)How Leaders See Data? (Level 1)
How Leaders See Data? (Level 1)Narendra Narendra
13 vistas76 diapositivas
Data structure and algorithm. por
Data structure and algorithm. Data structure and algorithm.
Data structure and algorithm. Abdul salam
19 vistas24 diapositivas
MOSORE_BRESCIA por
MOSORE_BRESCIAMOSORE_BRESCIA
MOSORE_BRESCIAFederico Karagulian
5 vistas8 diapositivas
CRIJ4385_Death Penalty_F23.pptx por
CRIJ4385_Death Penalty_F23.pptxCRIJ4385_Death Penalty_F23.pptx
CRIJ4385_Death Penalty_F23.pptxyvettemm100
6 vistas24 diapositivas
RuleBookForTheFairDataEconomy.pptx por
RuleBookForTheFairDataEconomy.pptxRuleBookForTheFairDataEconomy.pptx
RuleBookForTheFairDataEconomy.pptxnoraelstela1
67 vistas16 diapositivas

Último(20)

Survey on Factuality in LLM's.pptx por NeethaSherra1
Survey on Factuality in LLM's.pptxSurvey on Factuality in LLM's.pptx
Survey on Factuality in LLM's.pptx
NeethaSherra15 vistas
Data structure and algorithm. por Abdul salam
Data structure and algorithm. Data structure and algorithm.
Data structure and algorithm.
Abdul salam 19 vistas
CRIJ4385_Death Penalty_F23.pptx por yvettemm100
CRIJ4385_Death Penalty_F23.pptxCRIJ4385_Death Penalty_F23.pptx
CRIJ4385_Death Penalty_F23.pptx
yvettemm1006 vistas
RuleBookForTheFairDataEconomy.pptx por noraelstela1
RuleBookForTheFairDataEconomy.pptxRuleBookForTheFairDataEconomy.pptx
RuleBookForTheFairDataEconomy.pptx
noraelstela167 vistas
Building Real-Time Travel Alerts por Timothy Spann
Building Real-Time Travel AlertsBuilding Real-Time Travel Alerts
Building Real-Time Travel Alerts
Timothy Spann111 vistas
Organic Shopping in Google Analytics 4.pdf por GA4 Tutorials
Organic Shopping in Google Analytics 4.pdfOrganic Shopping in Google Analytics 4.pdf
Organic Shopping in Google Analytics 4.pdf
GA4 Tutorials11 vistas
Cross-network in Google Analytics 4.pdf por GA4 Tutorials
Cross-network in Google Analytics 4.pdfCross-network in Google Analytics 4.pdf
Cross-network in Google Analytics 4.pdf
GA4 Tutorials6 vistas
UNEP FI CRS Climate Risk Results.pptx por pekka28
UNEP FI CRS Climate Risk Results.pptxUNEP FI CRS Climate Risk Results.pptx
UNEP FI CRS Climate Risk Results.pptx
pekka2811 vistas
Advanced_Recommendation_Systems_Presentation.pptx por neeharikasingh29
Advanced_Recommendation_Systems_Presentation.pptxAdvanced_Recommendation_Systems_Presentation.pptx
Advanced_Recommendation_Systems_Presentation.pptx
neeharikasingh295 vistas
3196 The Case of The East River por ErickANDRADE90
3196 The Case of The East River3196 The Case of The East River
3196 The Case of The East River
ErickANDRADE9011 vistas
[DSC Europe 23] Spela Poklukar & Tea Brasanac - Retrieval Augmented Generation por 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
Supercharging your Data with Azure AI Search and Azure OpenAI por 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 vistas
Understanding Hallucinations in LLMs - 2023 09 29.pptx por 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 vistas
Chapter 3b- Process Communication (1) (1)(1) (1).pptx por ayeshabaig2004
Chapter 3b- Process Communication (1) (1)(1) (1).pptxChapter 3b- Process Communication (1) (1)(1) (1).pptx
Chapter 3b- Process Communication (1) (1)(1) (1).pptx
ayeshabaig20045 vistas
Short Story Assignment by Kelly Nguyen por kellynguyen01
Short Story Assignment by Kelly NguyenShort Story Assignment by Kelly Nguyen
Short Story Assignment by Kelly Nguyen
kellynguyen0119 vistas
Vikas 500 BIG DATA TECHNOLOGIES LAB.pdf por vikas12611618
Vikas 500 BIG DATA TECHNOLOGIES LAB.pdfVikas 500 BIG DATA TECHNOLOGIES LAB.pdf
Vikas 500 BIG DATA TECHNOLOGIES LAB.pdf
vikas126116188 vistas

Using colour to elevate your data visualisation designs