Skip to content

Research Q4: May 7

Here’s the introduction of Quarter 4, including the assignment for May 14.


reading for class Monday 14

– qualitative research

Christopher Ireland, Qualitative Methods: from Boring to Brilliant, pp. 23-29,

in: Design research, Brenda Laurel (ed.), MIT Press, Cambridge, 2003

– context mapping: user context

P.J. Stappers, Studiolab, TU Delft


Processing Open Data

For coming Monday: we will start playing with Open Data, we will use this Open data zip with JSON files:

We start with two Processing sketches, one from Jan Willem Tulp and another of Beam: and

For both sketches: you have to drag the JSON file into the sketch, or
add it to the data folder. The Beam sketch uses the bomen.json just if
this was a txt file, the Jan WIllem sketch uses the JSON library
One of the differences between the sketches is the time it takes to plot the results, in both cases the locations. The bomen file consists of around 100.000 trees and takes 20 seconds to draw, using the simple txt structure of the json file. If, in the other sketch, one replaces the speeltoestellen by the bomen (taking all the items eliminating the selection of “HOUT”) the sketch is sonly giving a result after 5 minutes. (It may be different times on other computers). This is due tot the conversions and JSONobjects is uses… 
Result of the bomen sketch: superimposed on a map of Rotterdam: (20 seconds)
Result of the Bomen.json into the speeltoestellen sketch: (produced after 5 minutes of calculations): you see the river “Nieuwe Waterweg” crossing Rotterdam

tools: deliverable for end presentation

For the final pdf for the tools part of the minor third quarter:

format: (pdf)

  • landscape
  • two columns
  • not over-designed but ….


screenshots and some text about the three subjects we have studied during the course:

  • a Pipes experiment of your own
  • an epub
  • an APP

tools: let’s APP! 2/2

A warning: 

We are doing complicated things here!
The lesson of 2 hours is only meant to get an idea of possibilities and complications…
Programming and designing for Tablets and smart phones takes years of study.
Beside basic skills and experience, the field is in rapid evolution, new features being added all the time and SDK’s evolving every month…

Tilt template design

We have played with the rotation App last week.

Now we will experiment with a “real” property of the device which makes it different from a computer: the tilt sensor.

But before moving to the tilted version working on a device we have to do concepting and designing.

Design in Simulator

The “device workshop” is like this:

We have a starting page and depending on the tilt of the device we get an up down right and left page. So the action applied to the device makes the story.

But we have no tilt in the simulator!
For this I added four buttons, “up”, “down”, “right”, “left”.

You also see that the “rotation” of the device is on in the simulator. This gives Portrait or Landscape versions.

First template for the second lesson: (for use in simulator, it has a few “features”)
This works for Iphone and Ipad.
The design pages “xib” are called Landscape and Portrait for Iphone, LandscapeP and PortraitP for Ipad.
Here you can add ImageViews, and TextViews the way we did last week.

The features are: the first background page on Ipad is only shown after rotation.
The Landscape background page on the Iphone is  somehow forced into Portrait.

App on Device

For the App on the device, in this setting of active tilt, the rotation of the device is not useful. So for  in the next template this is switched off. We are using only the Portrait xibs.
The button controls are switched off, since we can use the tilt.

Second template for the second lesson: (for use on an Ipad, it also has a few “features”)
This works for Iphone and Ipad.

The black circle indicated the tilt. This image can be replaced by something else: put the image in the project folder,
drag this image in the project, 
go to ShakingViewController.m
CMD Find paste: crosslabPNG
the location is shown, you can change the name of this image in red characters to the name of the new image:

tools: let’s APP! 1/2

We saw how wonderful epub is… no design at all!

Now we’ll look at the other extreme: let’s make an app for the Ipad.

In this case we can design what we want and display all our skills, tricks and genius.
But at what price?
Learning to handle the Xcode SDK, learning Object Orientated, 4 layered Objective C (this is a programming language:-)  necessary for apple Devices? And then all the trouble to get the right certificates on the right place, and paying 100 $ a year to apple to be able to display our Apps!

Templates for the first lesson:


But…if you have done these two lessons:

  • you have seen the SDK (it will be different with the next update!)
  • you have made your first App, maybe 2
  • you have (free of charge) downloaded the Xcode SDK, with the simulator and can use it (?)
  • you can tinker with the templates


Download Xcode:

Examples of App’s in Xcode are freely available at the dev site:
(you have to register, which is free)

Mobile Design course blog: (My course with free templates)

Examples for the first lesson:


And when we all switch to ANDROID, life is definitely easier.
But you have to get Eclipse installed (this is free too)
You need an Android device (the simulator is very slow staring at the moment.)
Installing on your own Android device is really easy!
The Android SDK is…about the same levelof programming skills needed…

First lesson
  • We will look at the SDK, 
  • make our first app, 
  • add a picture 
  • add a text (in a scrolling field!!!)
  • change the font of the text (what a miracle compared to epub!!!)
  • try to have it rotated and concluding that the background picture is stretched


  • make (remake) a second App
  • switch to a template I made
  • insert a picture and a text for a landscape and a portrait view

And, in principle you can use the simulator to present in all other assignments 🙂

Documenting the process

It is practically impossible in a blog to explain how to start using the Xcode SDK. so we do that in class, and please make screenshots and try to follow?

tools: epub 2/2

 Why study ebooks if this medium offers such poor design possibilities?
  • 1. creativity is, among others, making the most of scarce means – and – part of design is  carefully reducing a “too much”. We have forgotten “medium-scarcity” nowadays using our powerful machines, but we are reminded of this using ebooks on “primitive” platforms like e-readers.
  • 2. you have to offer design for many platforms, some of them are rich, some poor, a designer is a professional who can make the most of all platforms rich or poor.

EBook on the Kindle:

After making an epub we want to see it also in our KINDLE on the MAC (or WINDOWS).
For the kindle you do not need .EPUB format but .MOBI format.

Two ways to get it there:
1: (try way 2!)
Using Kindlegen (terminal window program)
or having an account at, you can upload the mobi file and have it sold.

easier is using Calibre:
choose a file and then export and take the EPUB format. The find the mobi file and use OPEN WITH Kindle (You have to have a Kindle app on your computer)

By the way: you can open a PDF in an e-reader, compare the difference in reading effect with a MOBI or EPUB

More about Jutoh:

Video is only possible in epub3 and on devices capable of playing video’s:

Tryout other ways (EPUB3):

in Epub 3 (like HTML 5) you can add “media”, sound, video
but on older e-readers these media won’t show up, and since epub is about “all” devices, we stick to the basics.

Research question: what is a well designed ebook?

Knowing the limitations of ebooks, knowing that an ebook is text and images only,  how can a designer still make the most of it?
start doing research: (using search words like) “well designed ebooks”, look for examples, compare these.

compare ebooks with well designed PDF examples, fitted for a screen (landscape format, text in a few columns, background template design for pages)

most blogs look like “pre ebooks” look at the design of blogs for inspiration

research partial solution to try out:
what I found were ebooks downloadable as pdf’s. This gave me the idea: why not combine pages, as images and pages with this uncontrollable HTML text?

examples with business in mind:

covers:(realism is a policy of Apple for App designers, making from a high tech device like a tablet, just a cheap imitation of a poorly designed book shelf…:-)

why you need a cover: look at the tablet way to present the books in a kind of realistic book shelf idea:

the research we do in this class is pratical:
  • searching (on the web) for opinions, examples 
  • discuss the examples found for effectivity, design, content
  • practice with our own designs using these examples.
Challenge in class:

Make your collaboration with journalists in e-book! 

tools: epub 1/2

Design an e-book!!!!

(definitely a designer dream:-)

See first what is not possible on a “e-reader” 🙂
My intro to the Mobile design class: (some of this in a few weeks)
But we go way back into historical possibilities with an e-book:
Think of an e-book as something even running an arduino:
Only files/images for very simple chips will always run….so too bad :-((((   for a designer used to state of the art computers with endless power and memory.
Because of this reduced power and memory the past is indeed necessary to understand the future (that is the future of the e-readers)


Jutoh: (to make design easy 🙂

Calibre: (e-reader, to check your fantastic design!!!)

Nook: (e-reader, to check your fantastic design again!!!)

You can try to set up Textedit (MACOS) as a plain html viewer:

But this does not help things FOR ME…so if not for you either: download Textwrangler:

Not needed but interesting for several weird reasons: ibook:


An interesting retro story about hyperlinks, and the ideas of Ted Nelson: Hyperland 2/5

FREE!!! resources:

Documentation, helpful, informative:

font embedding:

free fonts:

We have to understand a bit of HTML and CSS:
plain intro css:

very much for designers: css zen garden:

We need also:

Terminal window! (already installed on a MAC)

unzipping an epub documents into html files (to get the unregistered JUTOH line out of the file)


copy the epub file from Jutoh into a separate folder, open terminal and navigate to this folder by:
MacBook-Pro-de-Beam:Jutoh Documents contrechoc$ cd (SPACE! and drag the folder to this spot inside the terminal window)

MacBook-Pro-de-Beam:Jutoh Documents contrechoc$ unzip (
SPACE! and drag the epub file inside the terminal window on this spot)


making an epub of html files:
MacBook-Pro-de-Beam:Jutoh Documents contrechoc$
zip -0Xq contrePub mimetype
MacBook-Pro-de-Beam:Jutoh Documents contrechoc$
zip -Xr9Dq contrePub.epub *
where red are commands in Terminal window (inside the folder with the unzipped files) and blue is a self chosen name.

(unzip and zip for the CMD window in WINDOWS: maybe this link helps:

Working with sudo in terminal window: