Strategy Two: Future Interactions

Workshop with Marc Kremers

26 – 30 Jan 2015

Marc Kremers is passionate about the Internet and its possibilities. His distinctive body of work is born out of an ongoing exploration into the ways the Internet can be used as a medium for artistic expression and representation. Since as far back as 2001 he has been experimenting with the Internet as a digital playground. He created the project Tex-Server as a repository for digital ideas and sketches outside the remit of any specific project. Another project, As Found, could be seen as the predecessor to image curation blogs such as FFFFound, and eventually Tumblr. The freedom of these early experiments matured into a deep understanding of the mechanics of user interaction and content that we see in many of his projects today.

The Brief

Intriguing differences and similarities exist between the consumption of a magazine in the real world (IRL) and online. For one, the way we first experience a magazine IRL is without fail by it’s cover, whether on the newsstand, or in the dentist’s waiting room. But online, most of us arrive on a magazine’s site via the social sphere.

Gone is the power of the magazine cover. Except, the magazine cover has never been so powerful than it is now in 2015. Two extremely disparate online phenomenons last year happened via the cover of IRL magazines: The universal cry of “Je suis Charlie”, and on a completely different universe, Paper Magazine’s Break The Internet cover with Kim Kardashian.

It’s as though the cliche of the digital medium being the death nail of print media has been reversed. In the case of Paper Magazine, it was blatantly threatening to destroy the internet itself. This was all done with deeply conventional constructs: the power of celebrity and sex, while the image is a straight remake by Jean-Paul Goude from his own archive.

So let’s be clear, there was no innovation, only highly seductive sensationalism. The layer of innovation involved with this occurred outside the constructs of this magazines publishing strategies (the invention of the internet, Twitter, Facebook and so on). And yet, the Break the Internet cover feels contemporary and fresh. A true contradiction. This can be explained by the participatory power of the internet. All Paper had to do was make a conventional magazine cover. They let the Internet, and the millions of Twitter users and photoshop amateurs do the rest.

It would be interesting to know how many people read the article compared to how many people saw the cover. These trends in contemporary publishing strategies have to be considered in a workshop like this.

The cover and the cover story

Based on the observations above, i’d like you to explore new digital formations of the cover and the cover story.

The Genre Defining part — Wikizine. As much as I have admitted to content being king, we will not be focussing on content creation in this workshop as this is not my remit as a designer, we want to focus on user interaction and experience this week. So, imagine that you are both the editor and art director of a magazine that curated articles from Wikipedia, perhaps with an overarching discourse (politics, philosophy, culture) or perhaps more generalist with themed issues (pop, art, design). Choose one article from Wikipedia that will be the cover, and the cover story of this month’s issue of Wikizine (This is a working title, happy for you to rename it).

The Art Direction part — Editorialise the Article as a microsite. This is your chance to consider interesting ways to make the article come to life. Or not. In fact, your opinion here as an art director as well as content editor comes into play. If you’ve chosen to design an article on the typeface Garamond, you may wish to do something restrained, highly legible, scholarly. If you’ve chosen the wikipedia article on Dada, it may be something literally Dada-esque, with the body copy typeface set to Zapf dingbats. Maybe you choose the wikipedia article Censorship, imagine the possibilities there.

The Publishing Strategy part — Create a outward and inward cover. Consider classic so called feature or cover articles such as the New York Time’s “Snow Fall – The Avalanche at Tunnel Creek” or Pitchfork’s “Cover Story: Daft Punk”. Each of these utilise a cover image above the fold of the browser. For this workshop I’d like you to design a “cover” for the article page itself, but create it in a way that it can also easily be repackaged on social channels like Tumblr (GIF), Twitter and Instagram (Vine loops and 15 second movie clips). This needs to be demonstrated in at least one channel, perhaps even your own feed or feeds. I’m imagining as a workshop result: a page with all the covers in a grid, and being able to click on each one to see the article, could look really good. It’s important to note that the NYT/Pitchfork references above, being microsites, are both free from the normal requirements of side panels with other site content. Personally I think this is a mistake. We want this cover story to intelligently lead the user to other parts of the site.

The Reality — We need to acknowledge the modes of consumption and the plethora of scenarios we as digital designers have to cater for. Is the reader of this article waiting at the bus stop, or lying down on her couch with an iPad, or eating a sandwich with one had while clicking links via twitter on the other on his rushed lunch break? Some people don’t even read the article you’ve designed in it’s original form, using Flipboard, Instapaper, or Safari’s “Reader View”. We recently released The Green Soccer Journal’s new site. The stats say that 70% of readers are on their mobile, and only 15% on desktop.

For this workshop, you are able to choose the device with which your cover story is accessed, but keep these facts in mind when making that decision. The article you choose to work on for this workshop could in fact be enhanced by the medium it’s on. For example, maybe you choose to do a cover story on walking, and the only way yo can scroll the page is by walking with your mobile?

Marc Kremers
25 January 2015

Workshop Outcome

Cosmic Latte #1
Simon Mager, Charlotte Marcodini, Nicolas Polli

Cosmic Latte is an online magazine that curates monthly Wikipedia picks. This first issue features Lunar Milk, an article about sexual practices in space. Sex in space is human sexual activity in the weightlessness and/or extreme environments of outer space. Sexual activity and procreation distinguished by the state of weightlessness (precluding artificial gravity) presents difficulties surrounding the performance of most sexual activities due to Newton’s third law. The issue also includes conception and pregnancy in off-Earth environments.

Cosmic Latte #2
Ana Cuba, Jagoda Wisniewska

Our starting point was an article about the ouija board. We wondered how we could enhance the concept of the ouija board with interactive elements. We created a platform that enables users to share a question and get answers from an online community in real time.

Cosmic Latte #3
Tobias Holzmann, Heejae Yang

The article on Timothy Michael Samaras, American storm chaser who died in 2013, tries to link documentary journalism and responsive design. Taking the Wikipedia page on Samaras as a starting point, the idea is to scroll down through the different parts of the article. Each chapter (or headline) is marked by a different interactive effect: images are animated to illustrate natural phenomena and the text disappears in a way that reflects its content. Instructions are given to those effects that need more than just a finger swiping over the screen. Due to the large number of interactive elements, the design is kept quite simple, using only black body text typography on a white background.

Cosmic Latte #4
Ricardo Ferrol, Johannes Bauer

We have chosen the article about the Apple M7 processor. We designed a microsite that demonstrates the geopositioning and gyroscopic possibilities of the processor. Through a series of interactive features, we aimed to reveal each specific feature of the M7.

Cosmic Latte #5
Sabina Bösch, Christelle Boulé

Our microsite uses the Wikipedia article on Misophonia, which is described as the hatred of sound—when specific sounds trigger negative emotions. We created a website that presents users with short video clips of actions and their corresponding sounds. The user is asked to give their emotional response to the sound, from anger to indifference.

Latest Resources

✂ Copy and 📋 Paste Emoji 👍
getemoji.com

No apps required.

Computer Virus Catalog
computerviruscatalog.com

They steal our files, corrupt our hard drives and destroy our lives. We scan. We block. Do everything we can to prevent infection. Computer viruses. We hate ’em. Nevertheless, we remain fascinated by their evil plots. This fascination led to a new kind of art collection – Computer Virus Catalog. The worst viruses in computer history interpreted by artists around the world.

Founded & curated by Bas van de Poel

Scrolling on the web: A primer
blogs.windows.com

Scrolling is one of the oldest interactions on the web. Long before we had pull-to-refresh or infinite-loading lists, the humble scrollbar solved the web’s original scaling problem: how can we interact with content that’s stretched beyond the available viewport?

Resilient web design
resilientwebdesign.com

Resilient Web Design, you might think that this is a handbook for designing robust websites. This is not a handbook. It’s more like a history book.

A Handmade Web
luckysoap.com

‘handmade web’ to refer to web pages coded by hand rather than by software…

Eloquent JavaScript
eloquentjavascript.net

This is a book about JavaScript, programming, and the wonders of the digital.

The Future of Browser History
medium.freecodecamp.com

About browsers history, and how we tend to browse nowadays.

Swiss in CSS
swissincss.com

Swiss in CSS is a homage to the International Typographic Style and the designers that pioneered the ideas behind the influential design movement.

Automatically art-directed responsive images
cloudinary.com

by Eric Portis

WHAT IS CODE?
bloomberg.com

Businessweek, June 11, 2015
by Paul Ford

Interview with Tom Krcha, Adobe XD
subtraction.com

Adobe released the first public preview of what the company is now calling Adobe XD, its their major new UX/UI design and prototyping tool.

Typography for User Interfaces
viljamis.com

A recap of how far type in UI has come, where it’s going (VR) and what to look for when choosing a workhorse for your next interface. (via Atomic.io)

Typeface As Programme: Glossary
typotheque.com

A glossary of tools and technologies mentioned in Typeface As Programme.
by Jürg Lehni

Declarative Design Tools
jon.gold

Our brains and computers are fast; our hands, mice and keyboards are slow.

Roger That: Emoji Overdrive
ia.net

A font that turns the 2,000 most used English words into emoji.

Layout in Flipboard
engineering.flipboard.com

Flipboard Pages, a layout engine that turns web page articles into magazine pages for the iPad.

Use Your Interface
uyi.io

UYI, is a place documenting the uprising of motion based interface patterns.

Google Fonts
fonts.google.com

Google’s new site for Web fonts.

 

 

New Yorker cover comes to life
itsnicethat.com

Malika Favre’s illustration for this week’s New Yorker magazine has been brought to life by French animator Mathieu Maillefer.

Natural User Interface

In computing, a Natural User Interface (NUI) is the common parlance used by designers and developers of human-machine interfaces to refer to a user interface that is effectively invisible, and remains invisible as the user continuously learns increasingly complex interactions. The word natural is used because most computer interfaces use artificial control devices whose operation has to be learned.

Graphical user interface

In computing, a graphical user interface (GUI, sometimes pronounced “gooey” or “gee-you-eye”) is a type of interface that allows users to interact with electronic devices through graphical icons and visual indicators such as secondary notation, as opposed to text-based interfaces, typed command labels or text navigation. GUIs were introduced in reaction to the perceived steep learning curve of command-line interfaces (CLIs), which require commands to be typed on the keyboard.

Parallax scrolling

Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion.
Web designers began incorporating parallax scrolling in 2011, using HTML5 and CSS3. Websites with parallax backgrounds are becoming an increasingly popular strategy, as advocates argue it is a simple way to embrace the fluidity of the Web.

WebGL

A Web Graphics Library (WebGL) is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins. WebGL is integrated completely into all the web standards of the browser allowing GPU accelerated usage of physics and image processing and effects as part of the web page canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.

Twitterbot

A Twitterbot is a program used to produce automated posts on the Twitter microblogging service, or to automatically follow Twitter users. Twitterbots come in various forms. For example, many serve as spam, enticing clicks on promotional links. Others post @replies or automatically “retweet” in response to tweets that include a certain word or phrase. These automatic tweets are often seen as fun or silly. Some Twitter users even program Twitterbots to assist themselves with scheduling or reminders.

UEM

User experience moment.

Usability

Usability refers to how easy it is for a visitor to your site to use your site in its intended manner. In other words, are navigation, content, images, and any interactive elements easy to use, functioning the way they were intended, and that your intended target visitor will not need any special training in order to use your site.

Permalink

Short for “permanent link.” Generally used only on blogs, a permalink is a link that is the permanent web address of a given blog post. Since most blogs have constantly-changing content, the permalink offers a way for readers to bookmark or link to specific posts even after those posts have moved off the home page or primary category page.

Pageview

A pageview is a request for an entire web page document from a server by a visitor’s browser. In other words, for each page view your site had, someone (or a search engine spider) looked at that page.

Meta data

Meta data is the data contained in the header that offers information about the web page that a visitor is currently on. The information contained in the meta data isn’t viewable on the web page (except in the source code). Meta data is contained within meta tags.

Hypertext

Hypertext is any computer-based text that includes hyperlinks. Hypertext can also include presentation devices like tables or images, in addition to plain text and links.

Hyperlink

A hyperlink is a link from one web page to another, either on the same site or another one. Generally these are text or images, and are highlighted in some way (text is often underlined or put in a different color or font weight). The inclusion of hyperlinks are the “hyper” part of “hypertext.”

Hit

Contrary to popular belief, a hit does not represent a single visitor to a website. A hit is actually a request for a single file from your web server. This means one page can actually generate multiple hits, as each page generally has more than one file (an html or other base file, a css file, multiple images, etc.) and each one is requested from the server whenever the page is loaded. Some marketing people like to quote hits to unknowing consumers as the number makes their site sound like it’s getting a whole lot more traffic than it actually is.

Focal Point

The focal point of a web site is the spot on a web page that they eye is naturally drawn to. This could be an image, a banner, text, Flash content, or just about anything else. You want to make sure that whatever is acting as your focal point is the most important part of your site.

Fixed Width Layout

A fixed width layout has a set width (generally defined in pixels) set by the designer. The width stays the same regardless of screen resolution, monitor size, or browser window size. It allows for minute adjustments to be made to a design that will stay consistent across browsers. Designers have more control over exactly how a site will appear across platforms with this type of layout.

Elastic Layout

An elastic layout is one that uses percentages and ems for widths paired with a max-width style to allow the site layout to stretch when font sizes are changed. It’s ability to flex to accommodate the browser width and reader’s font preferences are where it gets its name.

Cascading Style Sheets

Also referred to simply as CSS, Cascading Style Sheets are used to define the look and feel of a web site outside of the actual HTML file(s) of the site. In recent years, CSS has replaced tables and other HTML-based methods for formatting and laying out websites. The benefits to using CSS are many, but some of the most important are the simplification of a site’s HTML files (which can actually increase search engine rankings) and the ability to completely change the style of a site by changing just one file, without having to make changes to content.

Cache/chaching

Cached files are those that are saved or copied (downloaded) by a web browser so that the next time that user visits the site, the page loads faster.

Bounce rate

A website’s bounce rate is the percentage of people who leave the site from the same page they entered the site, without clicking through to any other pages. This can be a good indicator of how good a website’s navigation is, as well as an indicator of the quality of the site’s content (a very high bounce rate doesn’t bode well for either of those things).

AJAX

Stands for Asynchronous JavaScript and XML. AJAX is typically used for creating dynamic web applications and allows for asynchronous data retrieval without having to reload the page a visitor is on. The JavaScript on a given page handles most of the basic functions of the application, making it perform more like a desktop program instead of a web-based one.