Archived copy for reference only
 

 

Graphic Design / Interactive Design / Fine & Applied Arts / Parkland College

Interactive Design Exercises
InDesign: iPad App (Ceramics)

(Archived from 2019)

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: Convert existing print document to a web document. Fine-tune layout. Add interactivity. 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 "ceramics1.indd" in InDesign, examine pages
  5. save as "ceramics2.indd"
  6. layout > create alternate layout: page size = ipadH (1024x768 px), liquid page rule = scale
  7. window > workspace > interactive
  8. pull out and close the following windows: page transitions, cc libraries, media
  9. add the following windows: styles > character, paragraph, object; interactive > animation
  10. InDesign > preferences: units: horizontal/vertical = pixels
  11. view > extras > show edges
  12. window > swatches: new process colors: "blackRGB", "gray50" (RGB = 128)
  13. rename "default" layer as "pic"; add new layers:
    - head
    - rules
    - info
    - bio
    - interactive
  14. window > pages: view pages by alt layout (RMB); rename "C-Master iPadH" (RMB > master options); delete right page icon
  15. save, save as "ceramics2.indd"

Creating the master page

  1. "pic" layer: cut/paste image from p7 to C-master, delete guides, refine scale/crop (note p8 is now a blank page)
  2. cut/paste text frames from p6 to C-master; move text to appropriate layers (head, info, bio, interactive)
  3. select all text frames: options > flyout: redefine scaling as 100%
  4. "interactive" layer: spec paragraph style: "buttons": 13/18 Frutiger 55, centered, fill = gray50
  5. object > text frame options: height = 60px, vertical justification = centered
  6. duplicate text frames to make additional buttons: "index", "info", "bio", left/right arrows
  7. window > styles > objects: new style "button"; apply to all buttons
  8. copy/paste "info" button to "info" layer; type fill = white
  9. repeat with "bio"
  10. browse to fontawesome.com/icons: search for "caret", copy/paste into InDesign; repeat with "x"
  11. spec paragraph style: "arrows": 31/31 Font Awesome, horiz scale = 250%, centered, fill = gray50
  12. "head" layer: spec paragraph styles:
    - h1: 44/40 Adobe Caslon Pro Ital, tracking = -30; fill = blackRGB, tint = 10%
  13. "box" layer: delete existing box, draw rectangle 1024 x 60px, fill = blackRGB
  14. "rules" layer: add 1pt rules, stroke = gray50

Creating "overlay" buttons (on master page)

  1. move "x" to "info" layer: spec paragraph styles:
    - close: 37/37 Font Awesome, centered, fill = blackRGB, tint = 70%
    - text: 18/30 Frutiger 55; paragraph space after = 20pt; fill = blackRGB, tint = 20%
    - caption: 15/24 Frutiger 55, fill = blackRGB, tint = 20%
    - caption+bold: based on "caption", Frutiger 75
  2. draw overlay box, snap to edges; fill = blackRGB, opacity = 75%; send to back
  3. refine position of all objects
  4. "bio" layer: apply "text" styles; spec character style:
    - text+bold: Frutiger 75; apply (size = blank)
  5. copy/paste overlay box and "x" from "info" to "bio" layer
  6. refine position of all objects
  7. "bio" layer: select all objects, group (cmd+G); repeat with "info" layer
  8. save; save as "ceramics3.indd"

Converting objects to buttons (on master page)

  1. go to "info" layer: select group
  2. 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
  3. window > animation:
    - name = info-bandana
    - preset = fadein
    - event(s) = on button event (on release)
    - animate = from current appearance
    - hide until animated = yes
  4. temporarily hide "info" layer
  5. repeat above sequence with "bio" layer
  6. temporarily hide "bio" layer
  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 ??
    - 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. make all layers visible
  12. window > SWF preview: play (cmd+shift+ENTER)
  13. file > publish online: range = ipadH:6
  14. save; save as "ceramics4.indd"
  15. window > pages: delete pages in left column
  16. save, save as "ceramics4.indd"

Making the slideshow

  1. temporarily hide "info" and "bio" layers
  2. page 8: "pic" layer: delete placeholder pic (cmd+shift+click)
  3. move text frames to pasteboard; style text
  4. move correct pic from p9 to p8; refine scale/crop (note p9 is now a blank page)
  5. "head" layer: unlink h1 text frame (cmd+shift+click)
  6. replace placeholder h1 with correct h1
  7. "info" layer: unlink "info-bandana" button (cmd+shift+click)
  8. window > buttons: name = info-christen
  9. replace placeholder text with correct text
  10. repeat with "bio" layer
  11. "interactive" layer: unlink "btn-info-bandana" button (cmd+shift+click)
  12. window > buttons: name = btn-info-christen; action = animation (info-christen)
  13. repeat with "btn-bio-bandana"
  14. make all layers visible
  15. window > SWF preview: play
  16. repeat with all even numbered pages from p10 to p36
  17. delete blank pages (odd pages)
  18. save, save as "ceramics5.indd"

Designing the other pages

  1. adjust layout to match examples: p1, p38, p40
  2. hide "info" and "bio" layers
  3. move text frames from "pic" layer to "head" layer (as needed)
  4. select tool: options > flyout: redefine scaling as 100% (as needed)
  5. unlink h1 text frame from master page (as needed)
  6. p38 only: pic transparency = 20%; text fill = 70% blackRGB

Designing the content page

  1. go to p3: apply "C-master" to p3 (RMB > apply master to pages)
  2. replace placeholder pic with image from p38
  3. split text into 4 frames (per example); apply styles, text fill = 70% blackRGB
  4. override "text" style for artist's names: 18/36 Frutiger 75 Black
  5. adding text anchors: window > interactive > hyperlinks:
    - go to page 6: select artist name (Bandana Pottery)
    - new hyperlink destination (flyout): type = text anchor
    - go to page 3: select artist name, create new hyperlink, choose destination
    - repeat with all artist names, h1 heads
  6. unlink "index" button from master page:
    - delete action "go to destination"
    - add animation: preset = fade in; event = on page load
    - change character color = white
  7. go to C-master: "index" button, change destination to text anchor "participating"
  8. window > character style: underline = on, weight = 2pt, offset = 6pt, type = janapnese dots; character color = 100C+70M
  9. window > SWF preview: play
  10. save, save as "ceramics6.indd"

Designing the curator's statement

  1. go to page 4: replace placeholder pic with image from p3
  2. split text into 3 frames (per example); apply styles, text fill = 70% blackRGB
  3. main text frame: add 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:4, allow users to download as PDF = yes

Fine tuning the document

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

 

BACK TO TOP
Last updated: 5/7/21