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 mapbox.com’s Project Editor area.
Below is a reduced size image of the editing space in the Projects area of mapbox.com. 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.
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.
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.
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.
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.
use the jquery.path plugin developed by Weepy, it’s available on Github at the link below.
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.
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.
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.
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
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.
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”.
” …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 http://hlwiki.slais.ubc.ca/index.php/Goffman’s_frame_analysis
The 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.
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.
Please comment on this post with links to material about Aristotle’s rhetorical appeals that you’ve found useful.
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: gifmemoreparty.com
Lippincott has created a refreshingly simple new logo design for eBay. Doing away with the stretched, squeezed and overlaid transparent letters, the logo stays largely true to the original in color palette and the tight kerning respects the original overlay while bringing a new maturity to the brand.
Another reflection of sophistication is the way in which the new logo was announced. Ebay’s web page announcing the new logo identity uses parallax scrolling, an interface that presents two or more layers moving at different rates of speed. In this case, the background appears fixed and a window (or frame) passes over it as the user scrolls down the page, but the background page is actually moving when it is obscured from view by the foreground layer. While this doesn’t optimize the capabilities of parallax scrolling, it does aptly use the scrolling in a way that compliments the more mature message that is being conveyed by the new logo.
The announcement page can be viewed here.
This is the Flash interactive narrative by the Goggles. It can be watched here.
Just a cool animated GIF, that’s it.