Mapbox Studio and Illustrator SVG files

Recently one of my students was having trouble importing SVG icons into the new Mapbox Studio (currently in closed beta, not to be confused with Mapbox Studio Classic). The SVG files were created in Adobe Illustrator and saved as SVG (not .AI) but when they were brought into Mapbox Studio the colour associated with the file was lost. I had imported Illustrator SVG files previously without any problem and we couldn’t figure out the problem. Later the student discovered an export setting in Illustrator that fixed the problem. The following image shows what CSS setting to choose in in the Illustrator export dialog box that shows up when saving to SVG format. Continue reading

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. Continue reading

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. Continue reading

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.

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.

Binding Overview

[hang1column]print binding[/hang1column]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.
Continue reading

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”.
Continue reading

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.
Continue reading

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

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: