Mobile App: Design Principle from Paul Dourish

Design Principles:

  1. Computation is a medium.
  2. Meaning arises on multiple levels.
  3. Users, not designers, create and communicate meaning.
  4. Users, not designers, manage coupling.
  5. Embodied technologies participate in the world they represent.
  6. Embodied interaction turns action into meaning.


Not Related to Mobile App

New Bauhaus – American School of Design -> IIT Institute of Design

Josef Müller-Brockmann – international Typographic Style = Swiss Style

Ludwig Mies van der Rohe- Modernist Archtecture, ITS and Bauhaus?


Map EMF Project – Design Philosophy(Dourish), Approach, and Phases. Nov 2

Design of Mobile App -Brief on The Process- Nov 2, 2018
1. Conceptualization

What are the objectives of the EMF mobile app?
The primary objective is to introduce the invisible EMF visible to  everyone.
The secondly objective is learn to create a mobile app to understand workings of front-end and back-end programming.
One of the model for the primary objective is the case of where people learn and actively performing the scientific activities of building tools to measuring radiation levels.
1. Underlying Theoretical Frame

My thoughts on “Meaning emerges in relations to other (objects etc.)”.
Theoretical Frame (P. Dourish’s Context and Social Settings)
”‘Context’ has entered the realm of computational design”
”‘Context’ arises from the activity (Dourish, 2004)
1. Feeling & Atmosphere of the site

Neutral, trustworthy, approachable, and informative, and users feel like they want to come back for new information. Open data of EMF levels of people’s environment.
1. Identity – Logo, Color, Typeface

1. Development Stages

◦ PhaseI – A stable map with pointers which is clickable. If the pointer is clicked it will display a photo indicating the EMF level. Lower half of the page is a linked list of locations with thumb nail photos.
◦ PhaseII – PhaseI + map is pinch and spread to move around the map.
◦ PhaseIII – PhaseII + a user login and photo uploading capabilities  from mobile phones. The photo with EMF reading is stored in the database with date and location stamp.
◦ PhaseIV – PhaseIII + registration to friendly users who can login and upload Acousticom 2 photos. That is multiple users loading information on db.
◦ PhaseV – Acousticom 2 directly access to load necessary information to DB directly. (Acousticom 2 must have an output which would connect to some device  that connect to Internet.)

Dourish, P. (2004). What we talk about when we talk about context. Personal and Ubiquitous Computing, Volume 8 (1), pp. 19-30.

A distinguished Japanese editor, Seigo Matsuoka,

ART258&299: Client Server Model, Melissa’s Max2018

Today’s Class

1. How to start coding your final project.
2. Exercise: intall WP site in sub directory.

There are about 5 levels of customization:
  1. Existing theme plus additional CSS codes.
  2. Switch themes
  3. Child theme of and existing parent theme.
  4. Create your own theme using such as UnderScore.
  5. (X) use 3rd party plugins (such as page builder, Site Origin, Elementor/Composer) to extend customize.
ART299 Discussion on Mobile App

Discussion with David E. and Chris G. on Whole Stack 2:20 – 3:30pm

Static Sites and Going Serverless by Chris

David talked about Airtable – spredsheet/database and VueJS – an open-source JavaScript Framework.



AngularJS – a JavaScript-based open-source front-end web application framework.

Melissa’s Presentation on MAX2018
Adobe Max 2018 Keynote-Next Generation of Creativity
New XD Features Vid – Hands On

ART299: Discussion & Lab canvas Practice


Angular development tutorial by Gary in coursetro

Getting Started with IONIC 2 with Gary Simon free video coursetro

video on Angularjs Crash Course

ionic documentation

written class

Linus Torvalds

12 recommendation of Book on JaveScripts

Google Book Sample Pages: Foundation HTML5 Animation with JavaScript

HTML5 canvas tutorial vid did not completed. I want to go back and recreated on my codepen.

299: My Design Tools: Gimp, Sketch, Affinity Photo & Affinity Designer

Photoshop -> Gimp (Open source $0) or Affinity Photo ($49.99)

Illustrator -> Sketch ($99/yr) or Affinity Designer ($49.99)

Sketch requires macOS Sierra (10.12.2) or newer. Your license comes with a year’s worth of updates. Once that year is up, you can keep using the last version of Sketch you downloaded, forever.

Motion editing – Apple Motion ($49.99), Natron (Open source $0). Natron review

Planning to install Gimp, Natron on iMac.
Sketch is already installed on iMacs in Koa103.