UI Design Handover – HiFi Mockups

Matthias H. / June 26, 2018

High Fidelity (HiFi) Mockups - Purpose

• Motivation: Deliver a rigid specification for

developers
• Specify Spaces
• Specify Fonts
• Specify Colors

• Do not use for early design discussions!  use

Balsamiq mockups
• Quicker to draft LowFi mockups
• The unpolished look promotes discussions about changes

© 2017 SAP SE or an SAP affiliate company. All rights reserved. Public 2

HiFi Mockups - Versioning

• Stored in our SAP PLC SharePoint

• Has basic versioning support

• SharePoint Link

© 2017 SAP SE or an SAP affiliate company. All rights reserved. Public 3

How to structure mockups?

• Use Photoshop layers, layer colors and layer visibility to divide

mockup aspects

• Separate specifications (Color Spec, Font Spec & Spaces Spec)

and content

• For specs use Pink color to not interfere with regular PLC colors

• For spaces spec use varying opacities

(20%, 40%, etc.) to not completely hide
the underlying content

© 2017 SAP SE or an SAP affiliate company. All rights reserved. Public 4

Font Specifications

• Use exclusively the following 2 Windows fonts: (1) Segoe UI and (2) Calibri

• Segoe UI: all headers, titles, smaller texts

• Calibri: in table cells, longer texts

• More info: https://docs.microsoft.com/en-us/windows/uwp/design/style/typography

© 2017 SAP SE or an SAP affiliate company. All rights reserved. Public 5

Color Specifications

• All colors are specified in the Colors.xaml in the

Common.Themes Project

• Adding colors should be the exceptions (usually

leverage what is already there)

© 2017 SAP SE or an SAP affiliate company. All rights reserved. Public 6

Assignments

1. How can you view the version history of a specific HiFi

mockup? And how can you restore an older version?

2. What is the Photoshop shortcut (1) to group layers and to

(2) to copy layers?

3. Take an existing Photoshop mockup and transform it to the

desired format.

© 2017 SAP SE or an SAP affiliate company. All rights reserved. Public 7

Q&A

© 2017 SAP SE or an SAP affiliate company. All rights reserved. Public 8

Thank You!

© 2017 SAP SE or an SAP affiliate company. All rights reserved.