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
- download starter files, examine downloaded files
- download the free desktop version of Font Awesome
- download and install Universal Scrolling Frames Extension (already installed in D019)
- open "ceramics1.indd" in InDesign, examine pages
- save as "ceramics2.indd"
- layout > create alternate layout: page size = ipadH (1024x768 px),
liquid page rule = scale
- window > workspace > interactive
- pull out and close the following windows: page transitions, cc libraries, media
- add the following windows: styles > character, paragraph, object; interactive > animation
- InDesign > preferences: units: horizontal/vertical = pixels
- view > extras > show edges
- window > swatches: new process colors: "blackRGB", "gray50" (RGB = 128)
- rename "default" layer as "pic"; add new layers:
-
head
- rules
- info
- bio
-
interactive
- window > pages: view pages by alt layout (RMB); rename "C-Master iPadH" (RMB > master options); delete right page icon
- save, save as "ceramics2.indd"
Creating the master page
- "pic" layer: cut/paste image from p7 to C-master, delete guides, refine scale/crop (note p8 is now a blank page)
- cut/paste text frames from p6 to C-master; move text to appropriate layers (head, info, bio, interactive)
- select all text frames: options > flyout: redefine scaling as 100%
- "interactive" layer: spec paragraph style: "buttons": 13/18 Frutiger 55, centered, fill = gray50
- object > text frame options: height = 60px, vertical justification = centered
- duplicate text frames to make additional buttons: "index", "info", "bio", left/right arrows
- window > styles > objects: new style "button"; apply to all buttons
- copy/paste "info" button to "info" layer; type fill = white
- repeat with "bio"
- browse to fontawesome.com/icons: search for "caret", copy/paste into InDesign; repeat with "x"
- spec paragraph style: "arrows": 31/31 Font Awesome, horiz scale = 250%, centered, fill = gray50
- "head" layer: spec paragraph styles:
- h1: 44/40 Adobe Caslon Pro Ital, tracking = -30; fill = blackRGB, tint = 10%
- "box" layer: delete existing box, draw rectangle 1024 x 60px, fill = blackRGB
- "rules" layer: add 1pt rules, stroke = gray50
Creating "overlay" buttons (on master page)
- 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
- draw overlay box, snap to edges; fill = blackRGB, opacity = 75%; send to back
- refine position of all objects
- "bio" layer: apply "text" styles; spec character style:
-
text+bold: Frutiger 75; apply (size = blank)
- copy/paste overlay box and "x" from "info" to "bio" layer
- refine position of all objects
- "bio" layer: select all objects, group (cmd+G); repeat with "info" layer
- save; save as "ceramics3.indd"
Converting objects to buttons (on master page)
- go to "info" layer: select group
- 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
- window > animation:
- name = info-bandana
- preset = fadein
- event(s) = on button event (on release)
- animate = from current appearance
- hide until animated = yes
- temporarily hide "info" layer
- repeat above sequence with "bio" layer
- temporarily hide "bio" layer
- go to "interactive" layer
- select text frame for "state..."
- 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
- 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
- make all layers visible
- window > SWF preview: play (cmd+shift+ENTER)
- file > publish online: range = ipadH:6
- save; save as "ceramics4.indd"
- window > pages: delete pages in left column
- save, save as "ceramics4.indd"
Making the slideshow
- temporarily hide "info" and "bio" layers
- page 8: "pic" layer: delete placeholder pic (cmd+shift+click)
- move text frames to pasteboard; style text
- move correct pic from p9 to p8; refine scale/crop (note p9 is now a blank page)
- "head" layer: unlink h1 text frame (cmd+shift+click)
- replace placeholder h1 with correct h1
- "info" layer: unlink "info-bandana" button (cmd+shift+click)
- window > buttons: name = info-christen
- replace placeholder text with correct text
- repeat with "bio" layer
- "interactive" layer: unlink "btn-info-bandana" button (cmd+shift+click)
- window > buttons: name = btn-info-christen; action = animation (info-christen)
- repeat with "btn-bio-bandana"
- make all layers visible
- window > SWF preview: play
- repeat with all even numbered pages from p10 to p36
- delete blank pages (odd pages)
- save, save as "ceramics5.indd"
Designing the other pages
- adjust layout to match examples: p1, p38, p40
- hide "info" and "bio" layers
- move text frames from "pic" layer to "head" layer (as needed)
- select tool: options > flyout: redefine scaling as 100% (as needed)
- unlink h1 text frame from master page (as needed)
- p38 only: pic transparency = 20%; text fill = 70% blackRGB
Designing the content page
- go to p3: apply "C-master" to p3 (RMB > apply master to pages)
- replace placeholder pic with image from p38
- split text into 4 frames (per example); apply styles, text fill = 70% blackRGB
- override "text" style for artist's names: 18/36 Frutiger 75 Black
- 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
- unlink "index" button from master page:
- delete action "go to destination"
- add animation: preset = fade in; event = on page load
- change character color = white
- go to C-master: "index" button, change destination to text anchor "participating"
- window > character style: underline = on, weight = 2pt, offset = 6pt, type = janapnese dots; character color = 100C+70M
- window > SWF preview: play
- save, save as "ceramics6.indd"
Designing the curator's statement
- go to page 4: replace placeholder pic with image from p3
- split text into 3 frames (per example); apply styles, text fill = 70% blackRGB
- main text frame: add paragraph space after = 20pts
- 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
- file > publish online: range = ipadH:4, allow users to download as PDF = yes
Fine tuning the document
- go to page 1: add invisible button (entire page), on release = next page
- copy/paste "btn-right" from C-master to p1: rename "btn-right-p1"
- p3, p4, p38, p40: unlink "info" and "bio"buttons from C-master, object > interactive > convert to object
- delete all odd pages (except for p1, p3)
- reveal "info" and "bio" layers
- file > publish online: range = all, allow users to download as PDF = yes
- link published URL to your process page for grading