Last updated: June 12, 2017

Techniques & Guides

Data Visualization and Mapping

Al Balushi, R. (2010) Creating an Interactive Map in Flash.

Baier, M. (2012) Create an Interactive Map in iBooks.

Börner, K. (2014) Visual Insights: A Practical Guide to Making Sense of Data. Massachusetts: MIT Press.

Bruner, J. (2011) How To Build an Interactive Map with Open-Source Tools?

Carto.net: Visualization of geodata. SVG tutorials, examples and demonstration site.

Few, S. (2009) Introduction to Geographical Data Visualization. Visual Business Intelligence Newsletter (Perceptual Edge).

Filkor, A. (2013) Create an Interactive Map Using Javascript and HTML5 Canvas.

Groot, L. de (2011) Build an interactive census map.

Heer, J. & Shneiderman, B.(2012), Interactive Dynamics for Visual Analysis. ACM Queue 10:2 (2012).

Infographic.net: This free course will walk you through step-by-step how to create premium quality infographics and precisely how to promote them so that you can generate coverage on big name websites like Forbes and Mashable - sending a surge of traffic to your website.

Information Aesthetics: Inspired by Lev Manovich's definition of "information aesthetics", this weblog explores the symbiotic relationship between creative design and the field of information visualization. More specifically, it collects projects that represent data or information in original or intriguing ways.

King, R. (2013) Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript: Addison-Wesley Professional.

Laumans, J. (2009) An introduction to visualizing data (PDF).

McCandless, D. (2013) Information is Beautiful.

Murray, S. (2013) Interactive Data Visualization for the Web: An Introduction to Designing With D3: O'Reilly.

A Periodic Table of Visualization Methods.

Visual Data Web: Website with the goal of making the data web visually more experienceable, also for average Web users with little to no knowledge about the underlying technologies. This website presents developments, related publications, and current activities to generate new ideas, methods, and tools that help making the Data Web easier accessible, more visible, and thus more attractive.

Visual Presentation

Arola, K.L., Sheppard, J. & Ball, C.E. (2014) A Guide to Making Multimodal Projects (Writer/designer). Macmillan Education.

Atkinson, C. (2005) Beyond Bullet Points: Using Microsoft PowerPoint to Create Presentations That Inform, Motivate, and Inspire. Redmond (WA): Microsoft Press.

Dancheva, K. (2011) Prezi-Re-thinking Information Presentation. An explorative research on the properties of the zooming interface of the editor Prezi for presentation of information and its effects on the cultural practices of using digital presentations. Utrecht (PDF).

Erren, T.C. & Bourne, P.E. (2007) Ten Simple Rules for a Good Poster Presentation. PLoS Computational Biology 3(5).

Graham, K. (2012) TechMatters: "Prezi"-tations: an Alternative to PowerPoint. LOEX Quarterly 38 (2012).

Harris, D. () Presentation software: Pedagogical constraints and potentials. Academic paper. Journal of Hospatality, Leisure, Sport & Tourism 10:1 (2011) p. 72-84 (PDF).

Lane, R. & Vlcek, A. () Speaking Visually: Eight Roles Pictures Play in Presentation. Office.com.

Millar, G. (2010) PowerPoint Workbench. Logic for PowerPoint designers and presenters (website).

Presentation Design 101: How to build presentations that really engage [with templates]. Canva Design School.

Purrington, C. (2013) Designing conference posters.

Reynolds, G. (2013) Top Ten Slide Tips.

Graphics and Animation

General

Arrigoni, R. How to create Parallax effect with CSS and jQuery.

Cagle, K. (2014) HTML5 Graphics with SVG & CSS3: O'Reilly Media.

Cousins, C. (2013) Using the Parallax Trend to Create Visual Interest and Surprise. Designmodo, April 9.

Dailey, D., Frost, J. & Strazzullo, D. (2012) Building Web Applications with SVG. Add Interactivity and Motion to Your Web Applications: Microsoft Press.

Fulton, S. & Fulton, J. (2013) HTML5 Canvas. Native Interactivity and Animation for the Web. 2nd edition: O'Reilly media.

Gupta, R.K. (2011) Animation Techniques - 10 Animation Techniques Used in Films. IncredibleTutorials, May 9.

Lazaris, L. (2012) Parallax Scrolling Scripts and Plugins. Impressive Webs, August 29.

Lumsden, A. (2012) Create a Parallax Scrolling Website Using Stellar.js.

Nicol, J. (2011) Build a parallax scrolling website interface with jQuery and CSS.

Parent, R. (2012) Computer Animation. 3rd edition: Elsevier / Morgan Kaufmann.

Rojwongsuriya, P. (2014) How I built the one page scroll plugin. Smashing Magazine August 25.

Savage, T.M. & Vogel, K.E. (2013) An Introduction to Digital Multimedia: Jones & Bartlett Publishers [Google books].

Sawyer McFarland, T. (2013) CSS3: The Missing Manual, 3rd. edition: O'Reilly.

Shiffman, D. (2015) Learning Processing. A Beginner's Guide to Programming Images, Animation, and Interaction [2nd edition; ebook] Elsevier/Morgan Kaufmann.

Wellman, D. (2011) jQuery 1.4 Animation Techniques Beginner's Guide: Packt Publishing.

Javascript Libraries

Dawber, D. (2009) An Introduction to the Raphael JS Library.

Grossbart, Z. (2012) Web-Drawing Throwdown: Paper.js vs. Processing.js vs. Raphael.

Venn, B. (2003) Add interactivity to your SVG. Create SVG documents that respond to user input. IBM DeveloperWorks.

Williams, J. (2011) Introduction to Raphaël.js. HTML5 Rocks Tutorials.

SVG

SVG Essentials/Animating and Scripting SVG. O'Reilly Commons.

SVG Implementations. List of authoring tools and viewers, W3C.

SVG Tutorial and reference. W3Schools.

Dailey, D. (2011) SVG - Scalable Vector Graphics: Overview & Status.

Osmani, A. (2011) 20 SVG uses that will make your jaw drop. .Net Magazine, July 22.

Visualization of Algorithms

AlgoViz.org: The Algorithm Visualization Portal, a gathering place for users and developers of algorithm visualizations and animations (AVs). It is a gateway to AV-related services, collections, and resources.

Data Structure Visualizations: The best way to understand complex data structures is to see them in action. This site shows interactive animations for a variety of data structures and algorithms. D. Galles, Computer Science, University of San Francisco.

Sorting Algorithm Animations. D.R. Martin.

Visualizations: Algorithms. D. Thiebaut. The website contains various interesting visualization examples or related material gathered on the Web, and in various publications.

Photo Animation and 2D-to-3D

2D to 3D conversion and also 2D-plus-depth [Wikipedia].

How to Convert a Video Into a Gif Animation [WikiHow].

Antunes, J. (2015) Cinemagraphs: How to Create Animated Photographs in Adobe Photoshop. Envato tuts+, February 1.

Arbuthnot, M. (2016) Digital compositing: Camera mapping in After Effects. Blog, November 2. Covers also the vanishing point method in Photoshop.

Banks, L. (2009) Photoshop Vanishing Point Tutorial, in Depth. Lesterbanks, November 27 (Flash player required).

Beginner’s Guide to 3D Animation in After Effects (2016). Videoblocksblog. Discusses laser light animation, animating a still photo, displacement and 2.5D parallax effect, 3D lava animation, 3D cloud animation.

Cinemagraph tutorial (basic technique).

Clarke, S. (2015) How to Create a Cinemagraph in 7 Easy Steps. HubSpot.

Colombo, E. (2013) After Effects tutorial: Papercut animation techniques revealed. How to produce a 2.5D scene that appears to be made out of paper, creating elements in Illustrator and then animating them in After Effects. Digital Arts, February 13.

Correa, Z. (2016) Turning a Picture into a 3D Model: Convert Photos to 3D. Discusses three options: one picture into a 3D model, converting 2-3 pictures into a 3D model and generating a 3D model form multiple pictures [Sculpteo online 3D printing service].

Devis, A. (2012) Camera Mapping in After Effects. [Creative COW] YouTube, March 9. Good tutorial for beginners.

Dodson, N. (2013) Cinematic Panning & Motion with After Effects. YouTube, August 15.

Donlon, B. (2007) Instant Dimentionality (using Photoshop vanishing point files in After Effects). Bob Donlon’s Adobe TV Blog, May 1.

Fabian (2015) Photo to 3D: How to Turn a Single Photo into a 3D Model & 3D Print. 3D Printing Blog.

Feinstein, L. (2013) How To Turn Your Photos Into Animated Clips. Video showing the parallax effect. The Creators Project, November 14.

Gupta, R.K. (2011) Animation Techniques - 10 Animation Techniques Used in Films. Incredible Tutorials, May 9.

How to make a cinemagraph: the complete guide (2016). KatchUp, January 27.

How to Make Cinemagraphs - Still Photos that Move Like Movies.

Jenks, B. (2014) How To Make A Cinemagraph for Photoshop Newbies. Photodoto.

Kesakalaonu (2014) Advanced Photo Animation Techniques (cinemagraph effect, 2.5D effect, camera mapping effect).

Kolowich, L. (2015) How to Make an Animated GIF in Photoshop [Tutorial]. HubSpot, December 11.

Kramer, A. (2016) 3D Vanishing Point. YouTube, November 14.

Manual depth map creation. Creating a 3D image out of a flat 2D picture by drawing a depth map manually (add depth information) and generating stereo-images.

Mikey (2015) Animating still images to look like video. YouTube, May 29.

Ravenscraft, E. (2014) The Complete Guide to Making Animated GIFsLifehacker, January 17.

Rocheleau, J. (2016) Cinemagraphs: Awesome Examples & How To Make Your Own. Vandelaydesign, June 30.

Saputra, J. Parallax Effect in Photography [Photoshop tutorials]. Hongkiat.

Vanarey, M (2016) 2.5D Parallax Effect Tutorial in Photoshop.

Visual Narrative

Bircher, K. (2012) What Makes a Good Picture Book App? The Horn Book Magazine (2012) February 28.

Bryant, M. (2012) What is the future of storytelling? Immersion, interactivity, integration and impact. The Next Web (2012) August 19.

Bull, A. (2010) Multimedia Journalism. A Practical Guide. Oxon, New York: Routledge. [Google books].

Grabowicz, P., Hernandez, R. & Rue, J. (2014) Tutorial: Taxonomy Of Digital Story Packages. UC Berkeley, Advanced Media Institute.

Itzkovitch, A. (2012) How Interactive Ebooks Engage Readers and Enhance Learning. UX Magazine (2012) April 13.

Morse, C. (2013) Klynt, Zeega, Prezi, and the Evolution of Digital Narratives. Digital Arts & Humanities at Harvard University.

Multimedia journalism and web design. Producing multimedia journalism and professional websites. Class blog for courses at the University of Wyoming; contains examples.

Rue, J. (2013) The 'Snow Fall' effect and dissecting the multimedia longform narrative. Multimediashooter April 21 (2013).

Soar, M. & Gagnon, M. (eds.) (2014) Database | Narrative | Archive: Seven interactive essays on digital nonlinear storytelling (web presentation powered by Scalar).

Stevens, J. (2014) Tutorial: Multimedia Storytelling: Learn The Secrets From Experts. UC Berkeley, Advanced Media Institute.

E-publishing

General

Bulletproof Accessible Icon Fonts (2014). Filament Group.

Coles, S. (2012) The Anatomy of Type: A Graphic Guide to 100 Typefaces. Harper Design (published in UK as The Geometry of Type: The Anatomy of 100 Essential Typefaces).

Dugonjić, M. (2013) Designing For The Reading Experience (detailed discussion of lettering and fonts). Smashing Magazine, February 18th (2013).

Drupal for Humanists: A project by Quinn Dombrowski that aims to make Drupal more accessible to humanities scholars and the technologists who work with them.

Heller, S. (2012) Why Should Books Still Be Books When They're on Tablets? The Atlantic (2012) June 21.

Irish, P. (2009) Bulletproof @font-face Syntax (blog).

Jason, S.M. (2014) On Web Typography. O'Reilly.

Kozlowski, M. (2013) Feature: Are eBook Apps, HTML5, or ePub3 the Future of Digital Publishing? (blog).

Kleinfeld, S. (2011) HTML5 for Publishers: O'Reilly.

Marcotte, E. (2010) Responsive Web Design. Issue No. 306, May 25.

McGuire, H. & O'Leary, B. (eds.) (2012) Book: A Futurist's Manifesto. A Collection of Essays from the Bleeding Edge of Publishing: O'Reilly Media (e-book online).

Mening, R. (2016) How to make a website? An easy, step-by-step guide from a web developer. See also his review of website builders.

Meyers, P. (2013) What Readers Need vs. What Devices Can Do. Rethinking how to pick ebook enhancements. New Kind of Book. Principles & Practices.

Mod, C. (2012) Designing Books in the Digital Age. Chapter 7 in: McGuire, H. & O'Leary, B. (eds.) Book: A Futurist's Manifesto: O'Reilly Media (e-book online).

Itzkovitch, A. (2012) Interactive eBook Apps: The Reinvention of Reading and Interactivity. UX Magazine (2012) April 12.

Palladio: A web-based platform for the visualization of complex, multi-dimensional data. It is a product of the "Networks in History" project that has its roots in another humanities research project based at Stanford: Mapping the Republic of Letters (MRofL). MRofL produced a number of unique visualizations tied to individual case studies and specific research questions.

Roosen, C. (2010) The Renaissance of the Interactive Book. UX Magazine (2010) December 3.

Schenker, M. (2013) Must-know facts about responsive design. Webdesigner Depot (blog).

Typography: Tips and guidelines for good web typography by Canva. See also the Fonts page.

Web Style Guide Online.

Epub 2 and Epub 3

EPUB 3 The standard (2013) International Digital Publishing Forum (IDPF).

Castro, E. (2010) EPUB Straight to the Point: Creating ebooks for the Apple iPad and other ereaders. Berkeley: Peachpit Press.

Cramer, D. (2013) Field Guide to Fixed Layout for E-Books, New York: Book Industry Study Group (PDF).

Cunningham, C. (2013) Resources: Going from InDesign to Ebook. (useful list to start).

Daly, L. (2012) Create rich-layout publications in EPUB 3 with HTML5, CSS3, and MathML. Explore the next-generation open eBook standard for advanced layout and typography (IBM Developer Works), also as PDF.

Garrish, M. & Gylling, M. (2013) EPUB 3 Best Practices: O'Reilly.

Kleinfeld, S. (2013) O’Reilly’s journey to EPUB 3. Upgrading to EPUB 3 is not a trivial undertaking.

Wikert, J. (2012) HTML5, EPUB 3, and ebooks vs. web apps. Two experts help us navigate the ebook format jungle.

Typography

Bailey, C. (2011) The Basics of Typography. Design Instruct.

Jason, S.M. (2014) On Web Typography: O'Reilly.

Martin, M. (2009) Typographic Design Patterns and Best Practices. Smashing Magazine.

Pamental, J. (2014) Responsive Typography Using Type Well on the Web: O'Reilly.


© ScieMedia 2013-2017 This website uses cookies for usage statistics