Current Projects on Display – Design Fundementals

disclaimer: not really true
Class: Design Fundamentals:
In this graphic design course, students learn the fundamentals of design, including such aspects as balance, symmetry, color, and layout.
Project: Common Objects in Uncommon Forms
This first project required students to choose a common object and create a variety of stylistic interpretations, learning Abode Illustrator for the first time.
Check out the course syllabus here:

Art Lounge

On the first floor, there is a common space area that can be shared with all art/IMM students. When you first enter the space, you come into the small kitchen area. Accessorized with a fridge, microwave, and a table with no seats that are high enough for it.

But when you walk past this little kitchenette area, you come into one of the sleeping oasis-es in this building. The art lounge has chairs, tables, and even better a couch. All of these pieces of furniture can be used for your napping pleasures. Had an all nighter and have a few minutes to snooze? This is the place to be. Too tired to walk over to your dorm? Take a quick nap, no one will disturb you.

After all, every college student needs a good nap.

Best Places to Sleep in AIMM Part 2 – The Hallway

Everyone has a nap spot in AIMM.  This hallway is a lesser-known spot because it experiences high traffic during the day due to its proximity to some classrooms and The Cage.  However, on weekends and nights, this hallway provides a dim, quiet, private place to snooze. Grab your giant hoodie and pick a corner! It’s all yours!

Portal to Butterfly Land Room 222

Welcome to the World of Animation! You enter the portal to this land by simply walking into the room! These locations are the key portals for animation where animation students work, thrive, and create… and occasionally cry because animation is hard.

Upon entering the doors of Room 222, Visitors are transported to the land of Butterflies named after Erin’s Kraemer’s lovely animation project.  The Land of Butterflies is an animated world where fun critters are born. We see them fly through the sky, around trees, and through animated grass blades made out of fur.

Find the next Portal (The Globe Theater) in Room 202.

Internet of Things


  • NJSM object file & research library study time blocks
    • Tues, October 27, 10 AM – 12 PM and 1-3 PM
    • Wed, October 28, 10 AM – 12 PM and 1-3 PM
    • Thu, October 29, 10 AM – 12 PM and 1-3 PM
    • Fri, October 30, 10 AM – 12 PM and 1-3 PM
  • Notes from Beth Cooper
  • We’ll travel next week to the Sarnoff Museum, where we’ll explore works from previous classes and discuss Augmented Reality

Open Content Review


Most web applications are built in a three-tiered architecture:

  • presentation layer ( html, css, javascript, etc )
  • application logic (php, ruby, python, javascript, etc)
  • database (dbms, file, spreadsheet, etc)

APIs are basically three-tiered web applications without the presentation layer. You access the data using a URL over HTTP, like a web page, but all you get back is data.

Why is this important? Because you can create different & separate presentation layers for different devices and situations. It also allows you to mashup data from different sources and wrap it in entirely new interfaces.


Open Applications

Timeline JS3

One of the great things about Timeline.js is that it’s both a content visualization app (application + presentation layer) and a content database (data layer). As such it gives us a complete content management solution that relatively non-technical people can use to update the presentation layer without having to know how to code.


  • Break up into teams of 3 or 4 – one to edit the Google spreadsheet, one to handle Paula’s timeline info, one to create the web page and one to find additional content
  • Take a look at the History of the New Jersey State Museum one-sheet Paula Andras gave us during our first visit to the museum.
  • Go to Timeline JS3 and click on the green “Make a Timeline” button
  • As a team, work through Paula’s document and create a timeline of the history of the New Jersey State Museum. Try to include some images, videos or maps in your timeline record entries.
  • Here’s a Github Gist starter web page if you need it for your Timeline

Design Notebooks

Let’s take a few minutes to catch up on some of your Design Notebooks

Internet of Things

According to Wikipedia:

The Internet of Things (IoT) refers to uniquely identifiable objects and their virtual representations in an internet-like structure.”

The idea is that objects can be directly connected to the internet, transmitting or receiving data, or be tagged in such a way to have digital representations of the objects be accessible over the internet. And, increasingly, much of that IoT traffic is M2M.

History –

Roadmap –

More info on IoT –

How do we connect everyday objects to the internet?


The Internet of Things is about sensors and networks

The Internet is the network of networks



  • Divide into groups of 3 or 4 representing four tracks at IMM (e.g. music, games/programming, animation, and physical computing)
  • Log into the class blog using your team account and create a post for each room in AIMM that’s significant for your IMM track
  • Create a category for your track and assign all your posts to that category
  • Go to and create QR Codes for each of your posts
  • Print, cut out & place QRCodes around the AIMM building at your chosen track locations
  • Fire up your QRCode Reader and take your creation for a test drive
  • How could you tweak it to make it better?


Object Interpretation

  • Review Beth Cooper’s notes, paying particular attention to her thoughts on object attributes, creating stories using those attributes, and the project ideas we captured when we last visited the NJSM
  • Read Imagining the Possibilities
  • Create a new slide in your Design Notebook and title it “Interesting Objects”
  • Identify an object or objects in the Pretty Big Things and/or Civil War Flags collections that you find particularly interesting. Identify the object attributes for each object and describe some story concepts you might want to develop

Augmented Reality (AR)

  • Read More than Real in the 2012 TrendsWatch report, pp. 20-22
  • Read Augmented Reality in the 2012 NMC Horizon Report Museum Edition, pp. 19-22
  • Create a new slide in your Design Notebook and title it “Augmented Reality”
  • From the reading, which examples of Augmented Reality particularly appealed to you and why?
  • Do some Google searches to find other examples of AR-enhanced museum exhibits? List them and include a brief description of each.



Mobile Apps & Location-based Services


Design Notebooks

Let’s take a few minutes to review some of your Design Notebooks from last week.

Mobile Apps & Location-based Services

“Forget about the mobile internet…” ( social grade refs )

User Context

Which device to design for? Depends on user context; What are they doing? Why are they accessing (or contributing) content? Where are they?

Designing for read-only content on multiple device forms? Consider HTML5/responsive web design.

Designing for data collection? Consider the type of data:

  • Text? Maybe a web form…
  • Photos? Web form or mobile app…
  • Images or QR-codes? Mobile app.
  • RFid or iBeacon? Mobile app.
  • Other sensor data? Mobile app.


  • Camera
  • Microphone
  • * Wifi / Bluetooth / Bluetooth LE / RFID
  • GPS (not indoors)
  • Accelerometer
  • Magnetometer
  • Gyroscope

For more info on cell phone sensors and how they work, check out Sensors and Cellphones

Responsive Web Apps

Example Responsive Web Framework

Mobile Apps

Native or Code Generated?

Native Apps

Native apps are typically coded using Java (Android) or Swift/Objective-C (iOS).

  • Pros – better performance, direct access to hardware & sensors
  • Cons – lower-level programming required, (sometimes) more expensive to implement

Code-generated Apps

Code-generated apps are built using standard web technologies like HTML, CSS and Javascript, and then run through a processor application to convert the input files into native code.

  • Pros – easier/faster to build (HTML, Javascript, CSS)
  • Cons – slower performance (extra app layer in there), more limited access to hardware & sensors, UI likely not completely native, maybe confusing for the user

Other Mobile Options

  • Voice & Messaging apps – good for feature phones


Active Participation in Museum Exhibits

Culture Labs

  • Read Culture Labs
  • Create a new slide in your Design Notebook and title it “Culture Labs”
  • Write a short paragraph describing the nature of “Discovery” and how it facilitates learning.
  • Write another paragraph comparing David Edwards concept of “Culture Labs” with Jake Barton’s concept of active participation with museum exhibits?

The Internet of Things

  • Read “The Internet of Things” in NMC Horizon Report 2015 Museum Edition pp. 46-47
  • Read “When Stuff Talks Back” in TrendsWatch 2013 pp. 24-28
  • Create a new slide in your Design Notebook and title it “Internet of Things”
  • Pick one or two examples of IoT being used in the museum setting and write a short descriptive paragraph. How might something similar be applicable in the NJSM setting?
  • Can you find any other examples of IoT in exhibit design?

Submitting Your Work

This week’s homework assignment is due next week before class. When you’ve completed them, post a comment on this page (First Day of Class), including a link to your Design Notebook.

Open Content & Big Data


  • Meeting next week at 9:00am at the New Jersey State Museum

Design Notebooks

Let’s take a couple of minutes to review some of your Design Notebooks.

Open Content & Big Data

What is Open Content?


Open Content

Open Apps

What’s an API?

API stands for “Application Programming Interface”.


Anatomy of an API

Three Tiered Architecture:

The Data Layer

Collection Database Resources – This is your database of collection records, could be in a database management system like MySQL, or even in flat files like CSV or Excel.

The Application Layer

Application Programming Interface – A middleware application in a server-side language like PHP, Ruby, Python or Server Side Javascript (Node.js) that responds to user requests by querying the database and returning the results of the requested action. There are some decent lightweight frameworks available that simplify creating RESTful APIs.

REST (Representational State Transfer) APIs work like web pages, but for machines. You build URL strings to tell the API which resource you want, and make a single request for that resource.

The Presentation Layer

  • Websites
  • Mobile Apps
  • Kiosks/Installations

Why use APIs?


Creating an API

When designing a RESTful API, use nouns to to identify resources. Limit your base URLS to two; one for collections, and one for specific items within a collection.

Examples: /collections - retrieve a listing of all collections /collections/12345 - retrieve info for a specific collection

You can then nest resources to reflect associations between resources.

Examples: /collections/12345/items - retrieve the collection of all items in a specific container /collections/12345/items/54321 - retrieve a specific item in a specific container

To perform actions, use the following HTTP methods when making your REST requests:

  • GET – return the resource set
  • POST – insert a resource
  • PUT – update a resource
  • DELETE – delete a resource

Pragmatically speaking, you’ll often find POST being used in lieu of PUT and DELETE to edit and delete resources.

*Want to design a RESTful api for your collection data? Check out the Apigee Web API Design book!

What is Big Data?


Next Week

Map to NJSM

  • 8:30 am – meet at AIMM 222
  • 8:40 am – Drive over to NJSM
  • 9 am to noon – TCNJ class time at NJSM (STEAM Center reserved on EMS)
  • 9 am to 11 am – Nick presents Cultural History exhibits covering background and more detail. Beth B. talks about designing these exhibits and Beth C. add Educator’s perspective.
  • 11:00 am to noon – Mark Thompson teaches rest of class in STEAM Center
  • noon – drive back to TCNJ


Mobile Apps & Location-based services

  • Read “Mobile Apps” in the NMC Horizon Report 2012 Museum Edition, pp. 11-14
  • Read “Location-Based Services” in the NMC Horizon Report 2013 Museum Edition, pp. 23-26
  • Read “Location-Based Services” in the NMC Horizon Report 2015 Museum Edition, pp. 40-41
  • Create a new slide in your Design Notebook and title it “Mobile & Location-based Services”
  • From the examples listed in the reading, what was your favorite example of a mobile or location-based service? Why?
  • Can you find any other examples exhibits using mobile or location-based services “in the wild” (could be from museums, libraries, or even retail)? Describe them and why they’re appealing.

NJSM Cultural History Collections

  • Review the labels for collection items in the Pretty Big Things and Civil War Flags exhibits.
  • Think of various ways you might be able to categorize the items (size, date of origin, location of origin, color, etc).
  • Write out these attributes as a list for each kind of object
  • How might you construct an API that would allow other developers to create a web or mobile interface to search each collection?
  • What if NJSM asked you to create a basic RESTful API to do just that. Write out a URL scheme you might use to enable that kind of an API.

Submitting Your Work

This week’s homework assignment is due next week before class. When you’ve completed them, post a comment on this page (First Day of Class), including a link to your Design Notebook.

More Info on Crowd Sourcing