Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

This Viz

Avatar for Carys Jenkins Carys Jenkins
October 06, 2015
150
0

This Viz

Thesis Presentation

Avatar for Carys Jenkins

Carys Jenkins

October 06, 2015

More Decks by Carys Jenkins

See All by Carys Jenkins
thesis-prototype.pdf
Avatar for Carys Jenkins carysjenkins
0
190
Thesis Presentation: Delight
Avatar for Carys Jenkins carysjenkins
0
69
Thesis Presentation: Firmness
Avatar for Carys Jenkins carysjenkins
0
37
Thesis Presentation: Cultural Context
Avatar for Carys Jenkins carysjenkins
0
87
Thesis Presentation: Commodity
Avatar for Carys Jenkins carysjenkins
0
84
'How Our Websites Are Used' - Analytics
Avatar for Carys Jenkins carysjenkins
0
110

Featured

See All Featured
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.3k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
3k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
410
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
2
360
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.4k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
10
37k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
2
4.1k
Building an army of robots
Avatar for Kyle Neath kneath
307
47k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Done Done
Avatar for chrislema chrislema
187
17k

Transcript

  1. THIS VIZ making infographics interactive

  2. What does This Viz stand for? This Viz looks to

    present interactive infographics that not only tell a story, but engages the user This Visual… Information

  3. 1. What is This Viz? 2. Why? 4. What’s the

    site made from? 6. SVG fun! 3. Aims & Audience 5. Schedule 7. Testing 8. The site!

  4. Why? Most infographics on the web are static… and pixelated!

  5. More and more SVG support! caniuse.com

  6. Aims 1. show ideas, issues, and data in an interactive

    and visual way 2. have users engage with content 3. show what web tech has to offer to the world of infographics!

  7. Audience *Google Analytics Age: 25-35-ish Pinterest & Social Media Addicts

    interested in global issues Loves visual content!

  8. What makes up This Viz? PHP includes SVGs PNG fallbacks

    articles (text) HTML5 CSS CSS Animations

  9. Proposed Schedule…

  10. Reality

  11. Proposed Schedule…

  12. Reality

  13. SVG what?! Scalable Vector Graphics

  14. Keeping SVG… Inline the… DOM

  15. SVG what?! You can target it with CSS! Add some

    id’s! change up colours! Add image files!

  16. We need a fallback for that! PNG

  17. Placing those fallbacks… *thanks Sara Soueidan :)

  18. Let’s test this thing! It works! *browserstack live testing with

    IE 8

  19. Testing YAY! Hmm CSS Anim ations YAY! YAY! YAY! YAY!

    YAY! YAY-ISH! YAY! YAY! SVG

  20. Let’s check it out! thisviz.com