Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as...
Transcript of Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as...
![Page 1: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/1.jpg)
![Page 2: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/2.jpg)
Welcome
![Page 3: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/3.jpg)
Tell your Public Data Stories
# T C 1 8
Jonni Walker
Senior Data Artist
Email: [email protected]
Twitter: @jonni_walker
Florian Ramseger
Senior Product Specialist, Tableau Public EMEA
Email: [email protected]
Twitter: @FRamseger
![Page 5: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/5.jpg)
What is Tableau Public?
Create viz in Tableau Desktop
Publish to Tableau Public (public.tableau.com)
Embed in website
![Page 6: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/6.jpg)
Agenda
Content & Message
Form Factor & Mobile Design
Interactivity & UX
Formatting & Branding
![Page 7: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/7.jpg)
Design considerations
Project management tips
Tableau tips
Real-world examples
Key Take-Aways
![Page 8: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/8.jpg)
Content & Message
![Page 9: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/9.jpg)
Content & Message
Content Marketing
Annual Reports
PR opportunities
Social media
campaigns
Statutory
reporting
Surveys &
Opinion Polls
Open Data
Transparency
Demonstration of skills,
know-how, and technology
Side projects
Thought-
leadership
![Page 10: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/10.jpg)
http://www.boeing.com/commercial/market/commercial-market-outlook/#/interactive-forecast
![Page 11: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/11.jpg)
https://thehatchinstitute.org/government-wage-gap-data
![Page 12: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/12.jpg)
ExploratoryExplanatory
Provide Information Communicate Insights
Content & Message
![Page 13: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/13.jpg)
Design considerations
• Audience?
• Purpose?
• Message?
• Exploratory or Explanatory?
• How objective do we have to be?
Project management tips
• Involve your PR & Social
Media teams early on
Real-world examples
• Boeing - Market Outlook
• Hatch Institute – Pay Gap
Content & Message | Key Take-Aways
![Page 14: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/14.jpg)
Form Factor & Mobile Design
![Page 15: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/15.jpg)
Form Factor | Long-form Infographic
![Page 16: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/16.jpg)
https://insights.spotify.com/us/2017/12/18/christmas-listening-data/
Form Factor | Mini-Dashboard
![Page 17: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/17.jpg)
Form Factor | Story Points
![Page 18: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/18.jpg)
Form Factor | Story Points
![Page 19: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/19.jpg)
Form Factor | Tabs
![Page 20: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/20.jpg)
Form Factor | Navigation Buttons
![Page 21: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/21.jpg)
Form Factor | Single Chart
![Page 22: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/22.jpg)
Form Factor
Dashboards
Story Points/Tabs/Navigation Buttons
Long-form infographics
“Mini dashboards”
Individual charts
![Page 23: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/23.jpg)
![Page 24: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/24.jpg)
![Page 25: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/25.jpg)
Single small chart
Flexible width (automatic or range sized)
Device designer
Dashboard swap
Form Factor | Designing for Mobile
![Page 26: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/26.jpg)
Design considerations
• Content & available space
• Format options:• Dashboards
• Stories/Tabs/Buttons
• Long-form infographics
• “Mini dashboards”
• Individual charts
• Mobile design:• Mobile only?
• Automatic width
• Device designer
Project management tips
• Involve your web team early on
• Don’t leave mobile design as an afterthought
Tableau tips
• Style your Story Points to fit design
• Automatic/range sizing + phone layout for best
results
• Utilize layout containers for more complex layouts
Real-world examples
• Spotify – Christmas songs
• Tableau Foundation – Living Report
Form Factor | Key Take-Aways
![Page 27: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/27.jpg)
Interactivity & UX
![Page 28: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/28.jpg)
https://public.tableau.com/views/chart_2_0/Dashboard3?:embed=y&:display_count=no
Interactivity & UX | Secondary Messages
![Page 29: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/29.jpg)
https://blogs.unicef.org/blog/5-facts-about-childhood-pneumonia/
Interactivity & UX | Dashboard Actions
![Page 30: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/30.jpg)
Design considerations:
• Less is more
• Secondary (customized) insights
• Design for non-Tableau users
• Make it obvious - Give guidance!
• Use dashboard actions carefully
• Action on click, rather than hover
• Lock maps
Project management tips:
• Let others test your viz
Tableau tips:
• Filter action + drop-down menu
• Maps > Map Options > untick all
Real-world examples:
• UNICEF – Health care data
Interactivity & UX | Key Take-Aways
![Page 31: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/31.jpg)
Formatting & Branding
![Page 32: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/32.jpg)
Formatting & Branding
![Page 33: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/33.jpg)
Formatting & Branding | Map Design
![Page 34: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/34.jpg)
Before After
Formatting & Branding
![Page 35: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/35.jpg)
Formatting & Branding | You, the Artist
![Page 36: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/36.jpg)
Formatting & Branding | Principles of Design
• Movement and Rhythm
• Balance
• Emphasis
• Simplicity
• Contrast
• Proportion
• Space
• Unity
"Good visual balance, rhythmic
movement, emphasis of a focal point,
simplicity, contrast in colour, anatomical
proportion and effective space
arrangement will make a data
visualisation look harmonious in composition."
![Page 37: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/37.jpg)
Formatting & Branding | Inspiration
https://public.tableau.com/en-us/s/gallery
![Page 38: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/38.jpg)
Formatting & Branding | Inspiration
![Page 39: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/39.jpg)
What is a Dashboard?
It's a canvas, a
repository
for "elements"
Formatting & Branding | Design Thinking
![Page 40: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/40.jpg)
Formatting & Branding | Design Thinking
You CAN
do this in
Tableau!
![Page 41: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/41.jpg)
Bear Viz
72separate floating elements
Parakeet Viz
23separate floating elements
Formatting & Branding | Design Thinking
![Page 42: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/42.jpg)
Formatting & Branding | Design Thinking
![Page 43: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/43.jpg)
FLOATING?
100%
Formatting & Branding | Design Thinking
![Page 44: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/44.jpg)
MOVEMENT AND RHYTHM
MAPS &
CHARTS ARE
DESIGN
Formatting & Branding | Design Thinking
![Page 45: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/45.jpg)
MOVEMENT AND RHYTHM
VISUAL FLOW
Formatting & Branding | Design Thinking
![Page 46: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/46.jpg)
Formatting & Branding | Design Thinking
SHAPES LIBRARY
![Page 47: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/47.jpg)
Formatting & Branding | Images
![Page 48: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/48.jpg)
Formatting & Branding | Transparency
![Page 49: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/49.jpg)
Formatting & Branding | Videos
![Page 50: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/50.jpg)
Design considerations
Basic:
• Clean/modern design – less is more
• Logo
• Corporate colors
(+ complementary colors)
• Whitespace
Advanced:
• Think YOU
• Think Design Principles
• Think Unity
• Think Flow
• Think Transparency (Responsibly!)
• Think Images & Shapes (Copyright!)
Project management tips
• Involve your graphic design team
to get corporate design guidelines
Tableau tips
• Format > Borders & Lines
• Map layers & background colors
• Mapbox maps
• Color picker
• Transparency
• Hierarchy control
Formatting & Branding Key Take-Aways
![Page 51: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/51.jpg)
Agenda
Content & Message
Form Factor & Mobile Design
Interactivity & UX
Formatting & Branding
![Page 52: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/52.jpg)
Please complete the
session survey from the
My Evaluations menu
in your TC18 app
![Page 53: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/53.jpg)
Thank you!#TC18
Jonni Walker
Senior Data Artist
Email: [email protected]
Twitter: @jonni_walker
Florian Ramseger
Senior Product Specialist, Tableau Public EMEA
Email: [email protected]
Twitter: @FRamseger
+ Come see the Tableau Public Team at the Viz Gallery!
Reach out if you have questions:
![Page 54: Welcome [tc18.tableau.com]...• Involve your web team early on • Don’t leave mobile design as an afterthought Tableau tips • Style your Story Points to fit design • Automatic/range](https://reader036.fdocuments.in/reader036/viewer/2022070817/5f13a5c6c2c6d2356f1cd782/html5/thumbnails/54.jpg)