Objective

To gain experience in interactive design by recreating this interactive iPad app mockup.

Discussion

InDesign has had interactive features for at least a decade. Often used for publishing interactive PDFs, InDesign has now matured to be the go-to tool to create working interactive mockups for apps and ebooks. With the help of extensions like in5, professional coders can now export editable HTML and CSS which can be packaged as downloadable apps and distributed via Apple's App Store, Google Play or Amazon Marketplace.

In the real world, InDesign is the industry standard authoring tool for creating page layouts and print publications. Now InDesign can easily convert print documents into digital media files for screens, saving hundres of hours in development time by streamlining the creation of alternate layouts.

Combined with InDesign's new "publish online" feature, designers can now export fully featured digital mockups that users can interact with in any browser on any device. The published HTML 5 files can be linked from your web portfolio or presented on an iPad during interviews (tip: use a full-screen browser like Private Browser).

Note: In order to take advantage of InDesign's "publish online" feature, you must have an Adobe ID (non-subscribers can register for a free membership by following this link and then clicking on "get an Adobe ID"). Please do this before starting this exercise.

Procedure

Overview: Add interactivity to an existing InDesign document. Publish to server.

Preparing for the exercise

1. download starter files, examine downloaded files
2. download the free desktop version of Font Awesome
3. download and install Universal Scrolling Frames Extension (already installed in D019)
4. open "ceramics9.indd" in InDesign, save as "ceramics9.1.indd"
5. window > workspace > interactive
6. pull out and close the following panels: page transitions, cc libraries, media
7. add the following panels: window > styles > character, paragraph, object; window > interactive > animation
8. InDesign > preferences: units: horizontal/vertical = pixels
9. view > extras > show edges
10. window > swatches: new process colors: "blackRGB", "gray50" (RGB = 128)
11. examine document: explore master page, pages, layers, styles, effects (transparency)

Editing the master page

1. go to "c-master": "interactive" layer: dupe text frame for "bio" 2x
2. browse to fontawesome.com/icons: search for "caret", copy/paste left arrow into InDesign; repeat with right arrow and "x"
3. spec paragraph style: "arrows": 31/31 Font Awesome, horiz scale = 250%, centered, fill = gray50
4. spec paragraph style: "close": 36/36 Font Awesome, horiz scale = 100%, centered, fill = black RGB (tint = 70%)
5. adjust layout
6. copy "x" to "info" and "bio" layers
7. go to "interactive" layer
8. select text frame for "state..."
9. window > buttons and forms:
   - type = button
   - name = btn-state
   - event = on release or tap
   - action = go to first page
   - appearance: rollover/click: type fill = white
   - return to normal state
10. repeat with other buttons:
    - btn-national...: action = go to first page
    - btn-index: action = go to destination "participating artists")
    - btn-info-bandana: action = animation; animation = info-bandana
    - btn-bio-bandana: action = animation; animation = bio-bandana
    - btn-left caret: action = go to previous page
    - btn-right caret: action = go to next page
    
11. save; save as "ceramics9.2.indd"

Making the first slide

1. page 4: "info" layer: unlink "info" button and "overlay" bg object from master page (cmd+shift+click)
2. select all (cmd+A), group (cmd+G)
3. window > buttons and forms:
   - type = button
   - name = info-bandana
   - event = on release or tap
   - action = show/hide; visibility = hide "info-bandana"
   - hidden until triggered = yes
4. window > animation:
   - name = info-bandana
   - preset = fadein
   - event(s) = on button event (on release)
   - animate = from current appearance
   - hide until animated = yes
5. temporarily hide "info" layer; repeat with "bio" layer
6. make all layers visible
7. window > SWF preview: play (cmd+shift+ENTER)
8. file > publish online: range = ipadH:4
9. save; save as "ceramics9.3.indd"

Making the rest of the slideshow

1. page 5: "info" layer: unlink "info" button and "overlay" bg object from master page (cmd+shift+click)
2. select all (cmd+A), group (cmd+G)
3. window > buttons and forms:
   - type = button
   - name = info-christen
   - event = on release or tap
   - action = show/hide; visibility = hide "info-christen"
   - hidden until triggered = yes
4. window > animation:
   - name = info-christen
   - preset = fadein
   - event(s) = on button event (on release)
   - animate = from current appearance
   - hide until animated = yes
5. temporarily hide "info" layer; repeat with "bio" layer
6. make all layers visible
7. window > SWF preview: play (cmd+shift+ENTER)
8. file > publish online: range = ipadH:4-5
9. save; save as "ceramics9.4.indd"
10. repeat with all other slide pages
11. adjust layout to match examples: p1, p3, p20, p21

Designing the "index" page

1. go to p2: "head" layer: apply paragraph style "text+link"
2. adding text anchors: window > interactive > hyperlinks:
   - go to page 4: select artist name (Bandana Pottery)
   - new hyperlink destination (flyout): type = text anchor
   - go to p2: select artist name, create new hyperlink, choose destination
   - repeat with all artist names, h1 heads
   
3. unlink "index" button from master page (cmd+shift+click):
   - delete action "go to destination"
   - add animation: preset = fade in; event = on page load
   - change character color = white
4. go to C-master: "index" button, confirm destination = text anchor "participating artists"
5. window > character style: edit "hyperlink": underline = on, weight = 2pt, offset = 6pt, type = japanese dots; character color = 100C+70M
6. return to p2: window > SWF preview: play (cmd+shift+ENTER)
7. save; save as "ceramics9.5.indd"

Designing the curator's statement

1. go to p3: layer "head": select all text in main text frame (cmd+A)
2. confirm: text fill = blackRGB, tint = 70%
3. confirm: paragraph space after = 20pts
4. adding a scrollbar to main text frame:
   - main text frame: 470 x 2400px
   - draw new frame: 515 x 615px, align top/left with main text frame
   - select text frame; cut to clipboard
   - select the empty frame, RMB > paste into
   - window > universal scrolling frames: scroll direction = vertical
   
5. file > publish online: range = ipadH:3

Fine tuning the document

1. copy/paste "btn-right" from C-master to p1: rename "btn-right-p1"
2. add invisible button (entire page), on release = next page
3. p2, p3, p20, p21: unlink "info" and "bio"buttons from C-master, object > interactive > convert to object
4. reveal "info" and "bio" layers
5. file > publish online: range = all, allow users to download as PDF = yes
6. link published URL to your process page for grading