Strategy Two: Future Interactions

Interview Marc Kremers

29 Jan 2015
Marc Kremers

Marc Kremers is a digital creative director based in London. 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.

From your early experimentations to your recent projects, you seem to be always able to find a balance between a strong aesthetic statements and technological contingencies. In your opinion, which one has more importance: digital design or usability?

As I have said in a talk last year: ‘I am not a creative in the sense that I create something from a blank piece of paper. My creative ability is that I re-contextualized other people’s content’. I curate contents or frameworks from other people’s content. And I feel that’s the difference between an artist and a designer, especially in the digital realm. Maybe the work as a designer is not about creating like an artist anymore, instead maybe it’s about thinking of frameworks in which people and entities can express themselves. This is something that may also be relevant to young students thinking ahead. With user experience, you have to know the pitfalls. You learn it the hard way. When I think about some of the websites I made in the last fifteen years, especially towards the beginning, I mean: ‘what was I thinking?!’ It was so unusable. Nowadays, there is a huge focus on usability. What is interesting is that people are realising that design is the child of usability. It’s not the other way round. Design is the thing that helps it be usable. It is secondary.

Marc Kremers, The infinite scroll, TEDxHackney, 25.04.14

Talking about social networking you mentioned that no radical changes are being made in online user experience. What does it mean?

With all this sharing and over sharing and these amazing tools that we have to make beautiful typography and designs, we can make websites that look like beautiful printed books. But it’s just become very monotone and samey. Yes, to a certain extent, we need to have some standardisation. You know that the table of content of a book is always going to be on the first pages, not at the end, not in the middle. It’s just basic stuff. Well, nowadays, we know where the menu of a website is. We got to this point and we have these amazing bases to be proud of. But now we need to be interesting again. It needs to be a bit like in the old days, when there was more experimentation, a bit more personality, a bit more punk and a bit more attitude.

Regarding the high density of datas we consume and transmit everyday, it becomes more and more difficult to envision how we will access to information. Is it possible to anticipate what standards are going to apply to digital publishing?

I was watching a lecture with Eric Schmidt from Google and he mentioned very casually: ‘either now or soon, the majority of the world will be accessing internet through mobile’. And that is so big, because I am still designing for desktop, just like most other designers. But why are we designing for the minority? We should be designing for the majority. There is a big shift and size difference, environmental differences, speed and bandwidth differences. This is what we now have to design for. And all these other technologies are going to come through. There will be more augmented reality. There will be some kind of ‘Minority Report’ sort of holograms. It all sounds a bit far fetched now, but it’s less far fetched than we realise. And then, the issue with: ‘how are we going to make this look like a book?’ is going to be irrelevant. You are going to be sitting in your lounge and thinking: ‘I really want to read this New York Times article’. So you are going to find a surface and you are going to beam the article on that surface. Of course, I am just making this up, but it’s quite a cool idea. I am looking at the right hand side of my lounge and I put my eyes there and suddenly some type beams in that area. And it has been perfectly typeset. You will be the designer of this interface that needs to figure out a new font size measurement system or unit that is about making copy legible according to the perceived distance of the text.

Has the general public become design conscious?

Creativity is a leisure concept of the future. Nowadays, I think everyone knows what Helvetica is, for instance. Everyone is using creativity. Everyone is tweaking their filters. Everyone is an amateur Photoshopper. Creativity is a cool, fun thing to do. It’s about your personal expression. It’s about your personal brand. But there is still a validity for people who are going to be leading the digital design world and having an opinion. You need to develop your own visual identity, your personal view and approach. It is a difficult thing and you could get swept up by it all. It’s important to have a strong, personal inner strength to actually navigate through it and come out of it with your own world.

And what kind of digital users have we become?

I have been thinking about this a lot in the last year, in particular by really focusing on what is easier for the user to do. I always say that ‘clicks are expensive and scrolling is cheap’. People like to scroll. They don’t really like to click. I am a very prudish clicker myself. At the same time, users have become design savvy. Take a book on Kindle. You download it and you format it to your heart’s delight. Again, the designers are still present, they are still choosing the most legible fonts and they are choosing subtle configurations and settings that come from an educated background. But the user has a power to say: ‘no, I want this in Palatino’. It is also relevant to realise that, according to Google statistics, people are on a website for a very short amount of time, for thirty seconds and, if you’re really lucky, six minutes. It makes you think: ‘how important is this for people?’ That’s crazy. And anything beyond that, they are just watching a movie anyway. The people we are designing for are so fleeting and so busy. Again it’s a design thing. You have to make sure the experience is really clear and really good.

The Green Soccer Journal, 2015 (the website intuitively loads content as you scroll)

How would you define your input into this workshop about “Future Interactions”?

Doing digital projects in a workshop environment is incredibly difficult, because five days to make anything digital is almost impossible, especially with varying skill sets in the class. But there was kind of a personal challenge for me to get something out of those five days and I also wanted to try to make it as plausible as possible. I wanted the students to learn something within this workshop that was going to be really practical. Whenever I saw some kind of opportunities, some kind of anecdote from real world experience, I would just tell them. And they loved that. I think they are yearning for both interesting, creative experiences, but also for practical, hands on information. There is a balance when you are doing digital workshops. You can go with an idea, but you also have to understand its feasibility in the real world. I wanted them to learn something within those five days that was going to be really practical. For instance, ‘no you can’t do that because of the user experience’ and ‘oh, have you thought about the band width here?’ or ‘what about older phones that don’t have gyroscopes?’ That’s a balance that I try to get right with the students and the students also try to get right.

During the workshop you asked the students to design ‘covers’ for their microsites. Can you explain where this idea comes from?

Covers are like posters and logo T-shirts. There are very few things that have that kind of sex appeal. For instance, you are at the airport and you’re looking at Apple trying to sell iPads on the back of a Times magazine. It’s always about covers. Covers are such powerful concentrated moments of contemporary culture. They have such an impact and a legacy and such a language to play with. So I thought it would be good to play with that in the context of, say, an Instagram feed, maybe animating it. It is such a perfect medium.

In 2015, how relevant is it to talk about covers? Have they not lost their power and predominance in the fragmentation of media?

Paper Magazine, Break The Internet Issue 2014

On the one hand, as a Digital Creative Director, you have to be very aware that, in a user experience and information architectural terms, people are not arriving directly on the front page. They are virtually clicking on a link they had from a Tweeter feed, for example. That’s their first experience of the site. So that’s really not going to be a cover. It’s like you walking to me and giving me a magazine on a particular page. It’s very direct. But you can totally shoot that idea down. On the other hand, the irony was that, in 2014, one of the biggest success story was the magazine cover with a naked Kim Kardashian, which literally said: ‘We’re going to break the internet’. And that was just a cover that used the power of celebrity and internet connectivity in a very, almost old-fashioned, way. If you just think about the correlations, the biggest meme was a magazine cover, but there was nothing really smart about it. They didn’t animate it. They didn’t make a gift out of it. They just scanned it and put it out there. And they sold a lot of paper magazines. Sometimes, it’s good to stand back and look at the conventional aspect of what we are doing.

How did you explore an original taxinomy of ‘covers’ for Cosmic Latte, the magazine created during the workshop?

The whole point of the cover aspect is quite literal. Instagram and Tweeter and social feeds are covers. And we just treat those as covers of a magazine. As I also just mentioned, there is a whole notion that covers don’t really apply. People are not often on the home page of a magazine site, they go to the direct link to the article. Coming back to the viability of the workshop’s outcome, we made every article in this fictitious magazine called ‘Cosmic Latte’ have its cover. So every time a new article came out, it would just have a new ‘Cosmic Latte’ cover format for that article and that would exist on the outside, in the social realm, and it would entice people to click and go straight to the article, because it was so awesome.

How do you envisage the next generation of creatives dealing with publishing?

Syndex Tumblr theme by Marc Kremers

I think, just looking at the past, back in the days when the Internet started, our references were pretty much actual magazines, record covers, some flyers, hearing about stuff, maybe watching one or two fashion programmes and MTV. But it was actually quite limited. However, this generation, they have an unparallel, complete and utter aesthetic soup. A lot of young visual creatives are actually Tumblr fans, because it offers such a variety of aesthetics and ideas and curations that even they get mixed up again because they follow different things. The content of the internet varies from being ancient to being a second ago, on Instagram. Imagine if you have access to such variety at such a young age, surely you are able to come up with new paradigms. I think the new generation of creatives are going to come up with stuff that’s different. Some of the users of the Syndex theme, for example, curate images in a way that is so out there. I mean, I find each image interesting and I might save it onto my desktop. But they all mix them together, they mash them together in this kind of piecemeal, experimental way that creates a new aesthetics before your very eyes. It’s very surface, very aesthetics, very personal and very individualised.

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.