Using colour to elevate your data visualisation designs

Shreya Arya
Shreya AryaTableau / Alteryx Consultant em 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 visualizações34 slides
Communication design por
Communication designCommunication design
Communication designSchommerMedia
5.4K visualizações40 slides
Educational Insight Brand Guide por
Educational Insight Brand GuideEducational Insight Brand Guide
Educational Insight Brand GuideOsama Sarakibi
181 visualizações21 slides
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 visualizações1 slide
INVOLVE - Module 2 Design.pptx por
INVOLVE - Module 2 Design.pptxINVOLVE - Module 2 Design.pptx
INVOLVE - Module 2 Design.pptxcaniceconsulting
40 visualizações35 slides
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 visualizações23 slides

Mais conteúdo 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 visualizações49 slides
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 visualizações59 slides
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 visualizações113 slides
Building Beautiful Flutter Apps por
Building Beautiful Flutter AppsBuilding Beautiful Flutter Apps
Building Beautiful Flutter AppsSheilaJimenezMorejon
67 visualizações31 slides
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
63 visualizações13 slides
Branding & Media Assessment Checklist por
Branding & Media Assessment ChecklistBranding & Media Assessment Checklist
Branding & Media Assessment ChecklistThe Center for Nonprofit Resources
10.2K visualizações6 slides

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 visualizações
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 visualizações
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 visualizações
Building Beautiful Flutter Apps por SheilaJimenezMorejon
Building Beautiful Flutter AppsBuilding Beautiful Flutter Apps
Building Beautiful Flutter Apps
SheilaJimenezMorejon67 visualizações
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 Jaclyn63 visualizações
Hotel Branding Guide - Introduction por Richard Patrick
Hotel Branding Guide - Introduction Hotel Branding Guide - Introduction
Hotel Branding Guide - Introduction
Richard Patrick2.1K visualizações
What is Information Architecture? por Jeffrey Humble
What is Information Architecture?What is Information Architecture?
What is Information Architecture?
Jeffrey Humble313 visualizações
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 visualizações
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 visualizações
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 visualizações
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 visualizações
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 visualizações
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 Verhoeven402 visualizações
Deconstructing the Psychology behind Design por Ethinos Digital Marketing
Deconstructing the Psychology behind Design Deconstructing the Psychology behind Design
Deconstructing the Psychology behind Design
Ethinos Digital Marketing22.2K visualizações
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 visualizações
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 visualizações
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 visualizações
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 visualizações
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 visualizações

Último

AvizoImageSegmentation.pptx por
AvizoImageSegmentation.pptxAvizoImageSegmentation.pptx
AvizoImageSegmentation.pptxnathanielbutterworth1
7 visualizações14 slides
apple.pptx por
apple.pptxapple.pptx
apple.pptxhoneybeeqwe
6 visualizações15 slides
LIVE OAK MEMORIAL PARK.pptx por
LIVE OAK MEMORIAL PARK.pptxLIVE OAK MEMORIAL PARK.pptx
LIVE OAK MEMORIAL PARK.pptxms2332always
7 visualizações6 slides
4_4_WP_4_06_ND_Model.pptx por
4_4_WP_4_06_ND_Model.pptx4_4_WP_4_06_ND_Model.pptx
4_4_WP_4_06_ND_Model.pptxd6fmc6kwd4
7 visualizações13 slides
OPPOTUS - Malaysians on Malaysia 3Q2023.pdf por
OPPOTUS - Malaysians on Malaysia 3Q2023.pdfOPPOTUS - Malaysians on Malaysia 3Q2023.pdf
OPPOTUS - Malaysians on Malaysia 3Q2023.pdfOppotus
30 visualizações19 slides
CRIJ4385_Death Penalty_F23.pptx por
CRIJ4385_Death Penalty_F23.pptxCRIJ4385_Death Penalty_F23.pptx
CRIJ4385_Death Penalty_F23.pptxyvettemm100
7 visualizações24 slides

Último(20)

apple.pptx por honeybeeqwe
apple.pptxapple.pptx
apple.pptx
honeybeeqwe6 visualizações
LIVE OAK MEMORIAL PARK.pptx por ms2332always
LIVE OAK MEMORIAL PARK.pptxLIVE OAK MEMORIAL PARK.pptx
LIVE OAK MEMORIAL PARK.pptx
ms2332always7 visualizações
4_4_WP_4_06_ND_Model.pptx por d6fmc6kwd4
4_4_WP_4_06_ND_Model.pptx4_4_WP_4_06_ND_Model.pptx
4_4_WP_4_06_ND_Model.pptx
d6fmc6kwd47 visualizações
OPPOTUS - Malaysians on Malaysia 3Q2023.pdf por Oppotus
OPPOTUS - Malaysians on Malaysia 3Q2023.pdfOPPOTUS - Malaysians on Malaysia 3Q2023.pdf
OPPOTUS - Malaysians on Malaysia 3Q2023.pdf
Oppotus30 visualizações
CRIJ4385_Death Penalty_F23.pptx por yvettemm100
CRIJ4385_Death Penalty_F23.pptxCRIJ4385_Death Penalty_F23.pptx
CRIJ4385_Death Penalty_F23.pptx
yvettemm1007 visualizações
CRM stick or twist.pptx por info828217
CRM stick or twist.pptxCRM stick or twist.pptx
CRM stick or twist.pptx
info82821711 visualizações
DGST Methodology Presentation.pdf por maddierlegum
DGST Methodology Presentation.pdfDGST Methodology Presentation.pdf
DGST Methodology Presentation.pdf
maddierlegum7 visualizações
Lack of communication among family.pptx por ahmed164023
Lack of communication among family.pptxLack of communication among family.pptx
Lack of communication among family.pptx
ahmed16402314 visualizações
SUPER STORE SQL PROJECT.pptx por khan888620
SUPER STORE SQL PROJECT.pptxSUPER STORE SQL PROJECT.pptx
SUPER STORE SQL PROJECT.pptx
khan88862013 visualizações
Data about the sector workshop por info828217
Data about the sector workshopData about the sector workshop
Data about the sector workshop
info82821729 visualizações
K-Drama Recommendation Using Python por FridaPutriassa
K-Drama Recommendation Using PythonK-Drama Recommendation Using Python
K-Drama Recommendation Using Python
FridaPutriassa5 visualizações
[DSC Europe 23] Danijela Horak - The Innovator’s Dilemma: to Build or Not to ... por DataScienceConferenc1
[DSC Europe 23] Danijela Horak - The Innovator’s Dilemma: to Build or Not to ...[DSC Europe 23] Danijela Horak - The Innovator’s Dilemma: to Build or Not to ...
[DSC Europe 23] Danijela Horak - The Innovator’s Dilemma: to Build or Not to ...
DataScienceConferenc15 visualizações
[DSC Europe 23] Ivan Dundovic - How To Treat Your Data As A Product.pptx por DataScienceConferenc1
[DSC Europe 23] Ivan Dundovic - How To Treat Your Data As A Product.pptx[DSC Europe 23] Ivan Dundovic - How To Treat Your Data As A Product.pptx
[DSC Europe 23] Ivan Dundovic - How To Treat Your Data As A Product.pptx
DataScienceConferenc16 visualizações
[DSC Europe 23][DigiHealth] Muthu Ramachandran AI and Blockchain Framework fo... por DataScienceConferenc1
[DSC Europe 23][DigiHealth] Muthu Ramachandran AI and Blockchain Framework fo...[DSC Europe 23][DigiHealth] Muthu Ramachandran AI and Blockchain Framework fo...
[DSC Europe 23][DigiHealth] Muthu Ramachandran AI and Blockchain Framework fo...
DataScienceConferenc19 visualizações
Infomatica-MDM.pptx por Kapil Rangwani
Infomatica-MDM.pptxInfomatica-MDM.pptx
Infomatica-MDM.pptx
Kapil Rangwani11 visualizações
Employees attrition por MaryAlejandraDiaz
Employees attritionEmployees attrition
Employees attrition
MaryAlejandraDiaz5 visualizações
OECD-Persol Holdings Workshop on Advancing Employee Well-being in Business an... por StatsCommunications
OECD-Persol Holdings Workshop on Advancing Employee Well-being in Business an...OECD-Persol Holdings Workshop on Advancing Employee Well-being in Business an...
OECD-Persol Holdings Workshop on Advancing Employee Well-being in Business an...
StatsCommunications7 visualizações

Using colour to elevate your data visualisation designs