Responsive Illustrations

RESPONSIVE ILLUSTRATIONS Proposal for the development of adaptive drawings for
future computer-mediated media CATARINA SILVA [email protected] INSTITUTO POLITÉCNICO DO CÁVADO E DO AVE / LIPP PEDRO AMADO [email protected] UNIVERSIDADE DE AVEIRO / DIGIMEDIA #14.ART, ENCONTRO INTERNACIONAL DE ARTE E TECNOLOGIA UNIVERSIDADE DE AVEIRO, 2015-10-07

…the main concepts, technologies and limitations underlying the responsive design
workﬂow, repurposing them into the development of responsive illustrations (…) bridging the gap between the technology and the contemporary artistic creation. ABSTRACT & TABLE OF CONTENTS

MEDIA CONSUMPTION CONTEXT (GOOGLE, 2012) From smartphones and tablets to
laptops and television, 90% of all media interactions today are screen-based… 90% 10%

MEDIA CONSUMPTION CONTEXT (LIPSMAN, 2015; COMSCORE, 2015) … and still
growing! 90% 10%

FRAGMENTED MEDIA LANDSCAPE (LUDES, 2008; OPENSIGNAL, 2013) HTTP://COGNITION.HAPPYCOG.COM/M/CONTENT/DEVICELAB.PNG

FRAGMENTED MEDIA LANDSCAPE (JEHL, 2014, PP. 3-4)

FLUID INTERACTIVE CANVAS (JEHL, 2014) HTTP://WWW.THEVERGE.COM/2015/1/21/7868251/MICROSOFT-HOLOLENS-HOLOGRAM-HANDS-ON-EXPERIENCE

FLUID INTERACTIVE CANVAS (JEHL, 2014) HTTP://WWW.THEVERGE.COM/2015/1/21/7868251/MICROSOFT-HOLOLENS-HOLOGRAM-HANDS-ON-EXPERIENCE HTTP://WWW.THEVERGE.COM/2015/9/28/9396555/WOVE-WEARABLE-FUTURE-FLEXIBLE-ELECTRONICS-POLYERA

UNIFIED DIGITAL EXPERIENCE (GOODWIN, 2009, PP. 479–501; PAYNE, 2011) UNIFIED
EXPERIENCE VS. MEDIA DEGRADATION EXAMPLE HTTP://WWW.SWC.COM/BLOG/DIGITAL-MARKETING/TYPES-OF-MOBILE-WEBSITES

FLEXIBLE IMAGE SCALING DEGRADATION (MARCOTTE, 2014, P. 53; JING, 2015)
UNIFIED EXPERIENCE VS. MEDIA DEGRADATION EXAMPLE Do you want a blurry, pixelated image on a large display? Or do you want to load a huge (but oh-so-pretty) image on your mobile phone? Talk about being stuck between a rock and a hard place... .

SEQUENCE OF COGNITION (WHEELER, 2010, P. 52) PVS PROGRESSIVE VISUAL
STACKING (ADAPTAÇÃO DA SEQUENCE OF COGNITION

PROGRESSIVE VISUAL STACKING (PVS) Progressive Visual Stacking (PVS) (ADAPTED SEQUENCE
OF COGNITION)

RESPONSIVE DESIGN PILLARS (JEHL, 2014; MARCOTTE, 2014; NEBELING & NORRIE,
2014; WEISS, 2015). Responsive (Web) Design consists of: •  ﬂexible images; •  media queries; •  progressive enhancements.

RESPONSIVE DESIGN PILLARS (JING, 2015). Responsive (Web) Design consists of:
•  ﬂexible images; •  media queries; •  progressive enhancements.

EXAMPLES OF RESPONSIVE ILLUSTRATIONS (KUS, 2013) CH

EXAMPLES OF RESPONSIVE BRANDS (HARRISON, 2014) HTTP://WWW.RESPONSIVELOGOS.CO.UK/

RESPONSIVE ILLUSTRATION DESIGN WORKFLOW (RIDW) CONCEPT DEVELOPMENT: IDEA / SKETCH
PHASE 1 PHASE 2 PHASE 3 PHASE 4 RESPONSIVE ILLUSTRATION RATIONALE TIER DIVISION: 1: MAIN CONCEPT 2. DETAILS AND INFORMATION 3. AESTHETICS ENHANCEMENT DRAWING VECTOR BASED ILLUSTRATION? Y N Y N TIER DIVISION (MIN. 2)? BITMAP BASED ILLUSTRATION AVOID RIDW (SCALING OR PERFORMANCE ISSUES) DOT NOT USE RIDW 320 px 768 px 1100 px PROGRESSIVE VISUAL STACKING: VECTOR DRAWING / SVG LAYERS SEMANTIC MARKUP AND FILE LINKING HTML PICTURE ELEMENT CSS PRESENTATION RULES <html> <css> <svg> <svg> ! MDS 100% 4:20PM Safari File Edit View History Bookmarks Window Help Fri 4:20 PM 100% MDS 4:20PM 100%

RESPONSIVE ILLUSTRATION DESIGN WORKFLOW (RIDW) HTTP://BIT.LY/1IPYPN3

RESPONSIVE ILLUSTRATION DESIGN WORKFLOW (RIDW) RESPONSIVE WORKFLOW HTTP://BIT.LY/1IPYPN3

APPLICATIONS (ILLUSTRATION EXAMPLES AND AUTHORS: ANDRÉ LETRIA, EBOY) CREATIVE CONSTRAINTS
PHOTOREALISTIC, DETAILED, OR TEXTURE-RICH ILLUSTRATIONS ARE INAPPROPRIATE FOR THIS KIND OF APPROACH.

APPLICATIONS (ILLUSTRATION EXAMPLES AND AUTHORS: PESKIMO, ZUTTO) CREATIVE CONSTRAINTS PHOTOREALISTIC,
DETAILED, OR TEXTURE-RICH ILLUSTRATIONS ARE INAPPROPRIATE FOR THIS KIND OF APPROACH.

LIMITATIONS (FINAL CONSIDERATIONS & EXAMPLES: IVO SOUSA, JELLY KITCHEN Creative
constraints (…) and photorealistic, detailed, or texture- rich illustrations are inappropriate for this kind of approach…

CONCLUSIONS Additional work vs. improved accessibility?… Other areas include branding,
icon, editorial design, information design… Education of future authors (bridging the gap between the technology and artistic creation)…

REFERENCES ComScore. (2015). The Global Mobile Report: How Multi-Platform Audiences
& Engagement Compare in the US, Canada, UK and Beyond. Retrieved from http://www.comscore.com/Insights/ Presentations-and-Whitepapers/2015/The-Global-Mobile-Report Goodwin, K. (2009). Designing for the Digital Age. Indianapolis: John Wiley & Sons. Google. (2012). The New Multi-Screen World Study. Retrieved September 10, 2015, from https:// www.thinkwithgoogle.com/research-studies/the-new-multi-screen-world-study.html Harrison, J. (2014). Responsive Logos. Retrieved October 6, 2015, from http://www.responsivelogos.co.uk/ Jehl, S. (2014). Responsible Responsive Design. New York: A Book Apart. Jing, C. H. (2015). Using Responsive Images (Now). Retrieved October 7, 2015, from http://alistapart.com/ article/using-responsive-images-now Kus, M. (2013). Responsive Illustration. Retrieved September 10, 2015, from http://previous.mikekus.com/ archive/responsive-illustration/ Lipsman, A. (2015). Good News for Digital Publishers: Audiences Are on the Rise Thanks to Mobile. Retrieved October 7, 2015, from http://www.comscore.com/Insights/Blog/Good-News-for-Digital- Publishers-Audiences-Are-on-the-Rise-Thanks-to-Mobile Ludes, P. (2008). Convergence and fragmentation: Media technology and the information society (Vol. 5). Bristol: Intellect.

REFERENCES Marcotte, E. (2014). Responsive Web Design (2nd ed.). New
York: A Book Apart. Nebeling, M., & Norrie, M. (2013). Responsive Design and Development: Methods, Technologies and Current Issues. In F. Daniel, P. Dolog, & Q. Li (Eds.), Web Engineering SE - 47 (Vol. 7977, pp. 510– 513). Springer Berlin Heidelberg. http://doi.org/10.1007/978-3-642-39200-9_47 OpenSignal. (2013). Android Fragmentation Report. Retrieved September 10, 2015, from http:// opensignal.com/reports/fragmentation-2013/ Payne, B. (2011). 10 Challenges to Delivering a Uniﬁed Customer Experience. Retrieved October 6, 2015, from http://www.criticaleye.net/insights-detail.cfm?id=2905 Weiss, Y. (2015). Responsive Images. In V. Friedman (Ed.), Smashing Book 5: Real-Life Responsive Web Design. Freiburg: Smashing Magazine GmbH. Wheeler, A. (2009). Designing Brand Identity: An Essential Guide for the Whole Branding Team. New Jersey: John Wiley & Sons.

Responsive Illustrations

Responsive Illustrations

Pedro Amado

More Decks by Pedro Amado

Other Decks in Design

Featured

Transcript