Prototyping Apps & Assets in PowerPoint

1. Prototyping Apps & Assets in PowerPoint Mark Miller markm@devexpress.com

2. Introduction • Prototyping • Value Proposition • Requirements • PowerPoint storyboarding • Laying Out an Application • Using Actions and Hyperlinks • Creating and Saving Custom Shapes • Alternatives to Storyboarding • Asset Creation • Value Proposition • Tool Comparison • Rounded Corners

3. Storyboarding Value Proposition • It’s modeling. • It’s a cheap way to explore, share, and sell your vision. • It’s approachable. • PowerPoint is reasonably easy to use. • More people can invest in the design. • It can guide developers. • An interactive visual spec • It’s reviewable. • Using PowerPoint’s Review tools

4. Storyboarding Requirements • PowerPoint (2007 or later)- and – • Visual Studio (2013 or later), or • Team Foundation Server Standalone Office Integration 2015 (free)

5. Sample Storyboard Restaurants space Find: z w s q a x e d r c f y b h k m i p g t v j u n o l / . &123  search

6. Sample Storyboard 1.2 atm 94% Oxygen: PSI 03:27 Time: Starboard Light Port Light

7. Collaborative Mixer Sample Storyboard File Insert View Format Channel 1: Channel 2: Channel 3: Home Channel 4: 3:00PM 3/14/2011

8. Storyboards can be Interactive 7:37 AM MyApp

9. Demo Creating Our First Storyboard…

10. Layout Pages • They are like master pages • Reusable backgrounds

11. Creating a Layout Page • Layout the background on a blank slide. • Switch to Outline View. Name the slide page. • Storyboard – Create Layout. • View - Slide Master. • Check the “Title” checkbox. • Move the Title to a corner, drop the font size, lower contrast. • Slide Master - Close Slide Master View • In Outline View, add more pages. Verify the title is placed correctly. • Delete the original slide (from step 1, above).

12. Storyboard Tips • Slide Transition – Clear the “Advance Slide | On Mouse Click” option. • You can add hyperlinks to elements on your layout (master) pages. • “=Lorem()” + Enter • Upload Shapes: • https://visualstudiogallery.msdn.microsoft.com/site/upload/view • Download Shapes from the Visual Studio Gallery • Click the link below the Storyboard Shapes window.

13. Storyboard Limitations • Multiple items are grouped before adding • Grouping destroys individual animations • Here’s one way to get around this limitation…

14. Storyboarding Tips • Name the slides in Outline View • Change the slide master so the titles are gray, small, and in the upper left. • Create Custom Slide Shows for slide sequences. • Use Empty Slides (with a duration of zero and advance slide after 0) to for animation sequences that need to be reset before showing again (e.g., for mobile page switch animations). • Use Sections to group contextually-related UI pages

15. Creating Assets

16. Creating Assets Value Proposition • They’re vectors. • Totally scalable to any screen size without any loss of resolution. • Can be designed to look good at low resolutions (very small scales). • They’re yours. • No royalties • No designer required. • They’re reusable. • PowerPoint storyboard prototypes. • XAML applications. • Web and Mobile applications via SVG. • GDI+ applications (requires converter).

17. Available Tool Comparison

18. The Essential Tools Blue rectangle selected first. Red ellipse selected first.

19. Why are rounded corners important? • Icons and buttons can be small, especially on mobile devices • Rounded corner shapes: • have a larger surface area • are easier to recognize, especially at tiny scales 33% more pixels Surface area: 11,217 pixels Surface area: 14,909 pixels

20. Why are solid/filled shapes important? • Open shapes are structurally similar to letters, especially at small scales. • When searching the visual field, thin lines can become effectively invisible in the peripheral and parafovea (lose parallel processing). • Open shapes are nearly twice as complex (visually) as filled shapes: Outer Perimeter 624 pixels Inner Perimeter: 585 pixels Edges: 1209 pixels Edges: 624 pixels 94% more complex.

21. Real-life Example Target Area: 8x3 pixels (12.6%) Visible Surface Area: 18 pixels (23%) Uses similar font stroke width: YES Uses similar font foreground color: YES Target Area: 21x7 pixels (788%) Visible Surface Area: 78 pixels (433%) Uses similar font stroke width: No Uses similar font foreground color: No

22. Example 1: Create a Callout

23. Example 2: Create a Person

24. Example 3: Create a Gear

25. Example 4: Create a Refresh Icon

26. Example 5: Create History Icon

27. Importing Vector Diagrams From Other Tools • Right-click PowerPoint Slide • Paste Options, Picture • Right-click image, Group | Ungroup • Do you want to convert it to a Microsoft Office drawing object? • YES. • Right-click image, Group | Ungroup Yes, we are ungrouping TWICE.

28. Importing Vector Diagrams from Other Tools Export to EMF, or copy to clipboard. In PPT, Insert Picture (EMF) or right-click and choose Paste Options, Picture. Select & Ungroup Answer Yes Optional Ungroup one more time Select parts and Union Style as needed

29. Bringing Vector Diagrams Into PowerPoint • Gotchas • Expression Design rasterizes vector shapes placed on the clipboard • Visio creates multiple (seemingly redundant) vector layers, including a dithered shadow layer which you will need to manually ungroup.

30. Importing Assets Into Visual Studio

31. Asset Creation Tips (1 of 4) • Re-aligning the rotate and resize controls – Drop another control, select both shapes and choose Fragment. • Rounded corners are better than sharp corners. Sharp corners (angles less than 90 degrees) don’t read as well at low resolutions. Recommend rounded corners or 90 degree or larger points. • Paste an image into the editor and trace over it with vector shapes. • Simpler icons are best. Fewer shapes, thicker shapes scale best (thin pointy shapes do not scale so well). • When scaling to very small, scale the stroke width accordingly.

32. Asset Creation Tips (2 of 4) • Design the icon big – because PowerPoint has limited zoom – then scale down to the desired size. • For precision design big, and zoom in all the way. • You can use the arrow (and Ctrl+Arrow) keys to nudge a large zoomed-in shape into the desired position. • Hold down the Alt key when rotating shapes to suppress snap-to. • When designing, lean toward symbols that convey their meaning without any lines or outlines. Outlines add complexity. • When scaling multiple in-progress shapes (to get more room to work), it’s okay to group, scale, then ungroup. • Use Group when multiple shapes of different colors are needed. • Use Union when the same fill/outline are used on non-overlapping shapes.

33. Asset Creation Tips (3 of 4) • Use outlines only when you need them. Otherwise avoid using outlines because they require more code to scale. • No skew in PowerPoint, so use Edit Points and do it by hand, or use Microsoft Expression Design. • If you need an icon smaller than the standard size (both height and width), place it inside a standard size rect, then delete the rect on paste. • You can use the Union feature to create a single outline around several shapes of different colors (duplicate the shapes first, then Union). • If you need to subtract or add reflective shapes, use the Arrange | Rotate | Flip commands.

34. Asset Creation Tips (4 of 4) • Adobe Illustrator’s Unite feature doesn’t really create a single shape like PowerPoint’s Union feature. The downside is you get more paths in your XAML export, which increases the line count and potentially makes the code harder to read and maintain. You can import AI shapes into PPT, and then use PPT’s Ungroup feature to turn the imported picture into a Microsoft Drawing Object. • If you need to subtract one shape from another several times, copy that shape to the clipboard first then paste it back after every subtraction. • Environment Setup: • Drop a shape, change the outline width to the thinnest setting. • Set Shape fill to 50% transparent. • Right-click the shape and choose Make Default Shape.

35. Third-party Tools to Make This Easier • Microsoft Expression Design • Excellent Export Abilities (XAML, SVG) • CodeRush • Direct Paste into XAML, SVG, or code (C# or VB). • AB4D’s Paste2Xaml • Converts WMF & EMF data on clipboard to XAML.

36. Please use Event Board to fill out a session evaluation. Thank you! Questions?