Project Editor in Mapbox

If you are completely new to Mapbox you might want to have a look at Introduction to Mapbox first, otherwise this will describe working within’s Project Editor area.
Below is a reduced size image of the editing space in the Projects area of You can see a large map window with a small bar with buttons that represent Style, Data, and Project settings, finally a button to Save changes.

Introduction to Mapbox

Mapbox is an online mapping platform for developers and designers. It is composed of a web-based mapping design application environment where you can style maps to suit your own visual requirements as well as add data directly to a map in the form of markers, paths, and polygons using the built in application interface or you can upload data to the map in various formats such as geojson, CSV, KML, or GPX (GPS eXchange format). The platform also provides a means to store your data and styles as well as to host your custom maps in order to serve them to web sites and mobile applications.

Tracks and Waypoints

This post suggests mobile alternatives to GPS devices for documenting and sharing GPS tracks and waypoints (or markers)

Capturing a GPS Track

This is an overview from Google Earth support that is quite useful.

Android Apps: Free

The MyTracks App from Google -

Strava (export tracks only as gpx)

IOS: Free
Nike+ Data Downloader
Strava (export tracks only)
Use Strava’s API to develop your own services
myTracks (no exports)

Map Plus (no exports)

MotionX GPS
EasyTrails GPS (export tracks and waypoints)

myTracks ($3.49 to export .gpx files)
Map Plus ($3.49 to export .gpx files)

Image Maps, CSS, and SVG

So you think you want to create an image map and you have an image or graphic that you’re ready to slice away at. Wait! There are alternatives to create the same type of basic interaction, that might be more appropriate.

An Image and CSS
There’s a good article on A List Apart, titled Night of the Map, which explains how to use a simple image and divs to create the hotspots over the full image. Explains the method and a bit about process. It’s a pretty easy approach and quite effective, also imagine different kinds of effects and interactions you could create with some animation of those divs and swaping image background. Could be quite fun.

Interactive SVG
The other approach, particularly if you’re already working with scalable vector graphics (SVG) already in an application like Illustrator, is to make those SVGs interactive. Codedrops has a good tutorial on how to do this and an interactive demo of the results.

jQuery Animate

If you’re interested in learning how to animate with jQuery, you may want to take a look at this short, clear and useful tutorial by Elated. It shows you how to do things such as fade, scale, and position objects on a page. The examples also include basic user interaction on click.

Animate Along a Path

In order to animate along a path you might consider one of these 2 basic approaches depending on whether your browser is compatible with CSS3 or if your user has javascript turned off (why they would these days, I have no idea):

use the jquery.path plugin developed by Weepy, it’s available on Github at the link below.

CSS3 Translate
Use the CSS3 translate, nested elements and opposite rotation to create the effect just with CSS. There’s good documentation and fiddles available on this Stack Overflow post below.

Finally here is a really cool online tool to create animations across multiple points (no curves that I can see though). It uses a simple GUI (graphical user interface) to allow you to visually see the effect and graphically modify it. It then generates the code needed for your files. It’s called Stylie and it’s pretty cool.

George Lakoff on Framing and Metaphors

In this video George Lakoff, Professor of Cognitive Linguistics at U.C. Berkeley and co-author of Metaphors We Live By (with Mark Johnson), speaks about frames and the impact of methphor on our everyday life.

Literary Terms

Karishma has recommended a book titled ‘A Glossary of Literary Terms‘ by M.H.Abrams and Geoffrey Galt Harpham, and has suggested that it could be quite useful in terms of better understanding discussions of rhetoric, semiotics, pragmatics and so forth. Will update the post when she provides further links.

Binding Overview

print binding
The designer’s insights web site has a really good resource on different binding methods for your print publications. It covers a broad selection of the most traditional or common methods and gives diagrams and descriptions of each. Check it out at the link below:

They also have a few useful links on folds, grids (and binding implications), and print signatures. They’re all quite visual and clearly explain the options and issues quite effectively, all listed below respectively.

All About Folds | Basic Grids | Print Signatures

Semiotics Terms

Below are some terms used in semiotics and, to some degree, in rhetoric and visual rhetoric. The list will be added to as I come across further useful definitions. Originally adapted from Semiotic Terminology.

Signifier: any material thing that signifies, e.g., words on a page, a facial expression, an image, a graphic.

Signified: the concept that a signifier refers to.
Together, the signifier and signified make up a sign.
Sign: the smallest unit of meaning. Anything that can be used to communicate.

Charles Sanders Peirce believed that the process of semiosis, the creation of a sign, required three relationships.
Object: the thing itself, similar to Saussure’s signified (which was more a concept of the object)
Representamen: roughly equivalent to Saussure’s signifier, any material representation of the object itself.
Interpretant: the disposition or readiness of an reader/viewer/listner to respond to, or interpret, a sign.

Peirce also thought signs were classifiable according to how their object functioned in signification, the following are his classifications.

Denotation and Connotation

Beyond its literal meaning, or its denotation, a particular word may have connotations: for instance, sexual connotations. “Is that a gun in your pocket or are you just happy to see me”. In semiotics, denotation and connotation are terms describing the relationship between the signifier and its signified, and a distinction is made between two types of signifieds: a denotative signified and a connotative signified. As a result, meaning is composed of both denotation and connotation.

Denotation tends to be described as the definitional, ‘literal’, ‘obvious’ or ‘commonsense’ meaning of a sign. In the case of linguistic signs, the denotative meaning is what the dictionary attempts to provide. For the art historian Erwin Panofsky, the denotation of a representational visual image is what all viewers from any culture and at any time would recognize the image as depicting (Panofsky 1970a, 51-3).
Connotation is used to refer to the socio-cultural and personal associations (ideological, emotional etc.) of the sign. These are typically related to the interpreter’s class, age, gender, ethnicity and so on. As such, a connotative signified is considered to be polysemic, or more open to interpretation, than denotated aspects of the signified.
Denotation is sometimes regarded as a digital code and connotation as an analogue code (Wilden 1987, 224), and Barthes makes use of these descriptors in “Rhetoric of the Image”.

Goffman’s Frame Analysis

” …definitions of a situation are built up in accordance with principals of organization which govern events, and our subjective involvement in them;
frame is the word I use to refer to such of these basic elements as I am able to identify…” — Goffman, 1974

Goffman’s frame analysis is a way of explaining “what is going on” and determining “what is salient” in a given event or experience. Typically, it involves organizing our experiences and structuring our individual perception of the events of experience. This includes filtering important information, discarding the noise and, according to Goffman, building frames and basic cognitive structures to guide us in our perception of reality. Human beings don’t consciously manufacture these life frames but unconsciously adopt and adapt them depending on the situation.

Goffman argues that humans frame things in order to organize their understanding of something and to guide future action. Frame analysis is therefore the study of cognitive organization of social experience. He uses picture frames as a metaphor to illustrate how people use frames (structure) to understand their pictures (context). Primary frames are the most basic frameworks which take an experience or event and make it more meaningful. Goffman concentrates on frameworks that aim to “…construct a general statement regarding the structure or form of experiences individuals have at any moment of their social life”.

Taken from’s_frame_analysis

Appealing Menus

HyoJinLee_pathosmenuThe following (after the break) are a series of menus created by students with a 30 minute deadline and emphasizing one of Aristotle’s appeals; logos, ethos, or pathos. Clicking on the image will open the high resolution version. If you wish to provide feedback in the comments section, please refer to the number before the image.

Interactive PDF in Acrobat

The following documents will help you to create a simple interactive PDF that can be used as a clickable prototype for your screen-based interaction projects (web sites, mobile apps, eBooks, etc.). They are courtesy of Kathleen Jacques, our Communication Design Technician, and you are welcome to contact either of us if you have any questions.
Included below are the demo version and a brief tutorial that takes you through the steps of creating that demo.

Demo: kj-iPDF.pdf
Tutorial: kj-iPDF-tutorial.pdf

Appealing links

Please comment on this post with links to material about Aristotle’s rhetorical appeals that you’ve found useful.

Think my keyboard may need a cleaning!


a GIF me more party

MTV mobile presents a GIF me more party in the form of an interactive video with music by Death Grips. The a very cool preloader fires through a series of images and stop motion that is meant to simulate an animated GIF. Looks as though it’s actually video shot at high speed, the films been really nicely graded, then frames are dropped and some filter applied before being converted to flash. The interactive video portion is really impressive, the idea that you can choose from three different character POV’s is a good concept but the fact you can choose from different party goers throughout the video is amazing. The whole thing is very slick, topped of with a great audio track. I’d love to see someone do something like this with HTML5+, now that would be really cool.
Check it out here:

Welcome to Pine Point

Pine Point
This is the Flash interactive narrative by the Goggles. It can be watched here.

3D Animated GIF

3D animated GIF

Just a cool animated GIF, that’s it.