Intro

Do you want to present your SAP Fiori app to customers or users in a usability test? Follow this guide to create visually appealing images of your app.

Ideally, you should present an image of your app in a device frame. We provide SAP Fiori device frame stencils, as well as information on best practices for image composition, keyboard use, and for the use of the lab preview sticker. These are available for download.

Usage

You can use the stencils to show your work-in-progress state or finished SAP Fiori app to SAP Fiori users (for example, in the context of usability testing), to partners and customers. The stencils were created by SAP Design and are free to use internally and externally for SAP Fiori. You simply need to follow these rules to use them:

• These stencils are exclusively allowed to be used by official SAP Fiori apps. An official SAP Fiori app is one which strictly follows the design-led development process and has a SAP Fiori ID.
• Do not change the device frames. No stretching, compression, or color or form changes in any kind. The device frames were checked and aligned with SAP Legal. If you change them in any way, you are no longer on the safe side.
• Do not use the device frames for SAP Fiori for iOS. SAP Fiori for iOS is a different SAP Fiori product which does not run on SAPUI5. It exclusively runs on Apple’s iOS devices and is part of the partnership with Apple, Inc.

Basics

App Image and Device Frame

We distinguish between the app image and the device frame. The device frame is the frame that is placed around your app image. The app image itself simply shows the SAP Fiori screen. Have a look at the visualization below to see the difference.

Difference between device frame and app image

App Image Sizes

SAP Fiori is adaptive and can basically run on any device. Four app image sizes were picked to represent the current industry standard for each device category: smartphones (size S), tablets (size S, M), phablets (size S, M), hybrid devices (size M, L) and desktop-based devices (size L, XL). Each device frame has a recommended image size in pixels. Use the recommended image size and your SAP Fiori app image will fit perfectly into the corresponding device frame.

The image sizes are as follows:

• Size S for smartphones, small hybrid devices, and small tablets.
  Pixel size: 375×667 px.
• Size M for tablets, hybrid devices and phablets.
  Pixel size: 1024×768 px.
• Size L for desktop based devices such as laptops.
  Pixel size: 1360×896 px.
• Size XL for larger desktop-based devices such as monitors.
  Pixel size: 1600×900 px.

The device frames for all sizes are visualized below.

Device frames: S (smartphone), M (tablet), L (laptop) and XL (monitor)

Device Frames

These are all device frames which come in three perspectives: front, left side and right side. Each device frame is available in a web and print resolution. All have a white frame by purpose. White is calm, positive and does not draw attention away from the image’s main focus spot: the SAP Fiori app.

All device frames: front and side perspectives

Keyboards

We do not recommend showing keyboards on your images because this covers the actual SAP Fiori app. So, if you are in the need of visualizing keyboard interaction because this is relevant to showcase your use case, please use the generic keyboards. They are available in English and German for size S and M. They are part of the SAP Fiori device frame stencils.

Size S example and keyboard variations

Size M example and keyboard variations

Lab Preview Sticker

Guidelines

Generic Data for Your SAP Fiori App Images

You should show realistic dummy data in your images. SAP provides generic data for text and dummy images for your use.

Text

• You can find generic first and last names in the SAP Style Guide for Technical Communication (see section 6.9):
  HTML version
  PDF version
• Do not use real names of popular/famous people (such as Marilyn Monroe), fictional names (Donald Duck), or funny names as data in your app image.
• If your app requires text examples for generic company names, please use Company A, Company B, and so on.
• The following company names can also be used, but please be aware of the context of your transaction (for example, Danish Fish Trading Company would likely not sell smartphones):
  HEPA Tec, African Gold and Diamond Corporation, DelBont Industries, Danish Fish Trading Company, Developement Para O Governo, Brazil Technologies, Florida Holiday Company, Angeré, Pear Computing Services, PC Gym Tec, Anav Odeon, Robert Brown Entertainment, Mexican Oil Trading Company, Russian Electronic Trading Company, Indian IT Trading Company, South American IT Company, Entertainment Argentinia and Quimica Madrilenos.
• In exceptional cases, you can also use SAP as a company in your image. If so, always present our company in a positive way. For instance, do not show a fictional bank account in red owned by SAP, and do not show SAP selling items such as printers.

Dummy Content Images

• If you show images as content in your SAP Fiori app, SAP should have the rights or license to use it. You can use license free dummy images from the SAP Brand Media Library as content for your SAP Fiori app image. This is useful if you show profile images (for example in the timeline or feed and notes), product images (in lists) and image galleries (in a carousel), for example.

Step-by-Step Guide to your Final Image

Is it your first time creating an image composition? Follow this step-by-step guide to designing a visually appealing image that is sure to please your users. You will be guided through the following steps:

1. Think about the purpose of your image
2. Prepare your SAP Fiori app
3. Take screenshots
4. Create your image composition
5. Save and done

Step 1: Think about the purpose of your image

Keep in mind that presenting your app means representing our company and showing SAP’s latest piece of design. Whether it is a final SAP Fiori app or a mock-up, present your great work with pride and demonstrate the value of your app.

Before you start creating your images, think about the purpose of your final images. Ask yourself the following questions:

• Target group: Who do you want to address?
• Expectations of target group: What does your target group expect?
• Your goal: What do you want to achieve with this image? What do you want to show? Do you want to emphasize something such as simplicity, responsiveness, a feature, or a new user workflow?

Think about these questions and prepare your app accordingly.

Step 2: Prepare your SAP Fiori app

Your app is the highlight of the image. Make sure your app looks well-designed and behaves properly. Check out the following points to ensure that you are presenting your app in the best manner:

• Google Chrome: Install Google Chrome if you do not have it so far. It is easy and comfortable to take the screenshots in this browser.
• Image editor: Do you already have an image editing software? We recommend you use Adobe Photoshop. This software is available via Order and Purchasing. Alternatively, you can use Apple Preview on Mac OS X and Microsoft Paint on Windows.
• Version: Always show your app in the latest SAPUI5 version, if possible.
• Trial Run: Check out each app page you would like to show. Does every page looks well-designed and behave properly?
• Device frames: Download the device frames to your computer.

Step 3: Take Screenshots

Your app screenshot should have a realistic screen ratio and image size. Follow the image size requirements of the device frames to showcase your SAP Fiori app perfectly.

We recommend taking your screenshots with the Google Chrome browser, which allows you to emulate different screen sizes using the developer tools.

After taking the screenshot, you can adapt and fine-tune the size using photo editing app such as Adobe® Photoshop. Afterwards, save your image as a PNG file (.png).

The image sizes are as follows:

• Size S: 375×667 px
• Size M: 1024×768 px
• Size L: 1360×896 px
• Size XL: 1600×900 px

Step 4: Create Your Image Composition

• There are plenty of image compositions possible to present your SAP Fiori app. Picking the best one for your use case mainly depends on what you would like to show.
• Look back to step 1 and remind yourself of the purpose of your image. Based on this, you can have a look if one of the best practices compositions provided by the stencils fit your needs. If not, build an image composition from scratch. We recommend to go for this solution only when you are familiar with basics of image compositions such as the rule of third and Gestalt psychology.
• We assembled some best practices for compositions to provide you an overview of what’s recommendable for a certain purpose. You can download these variations in the Download section.

Best Practices for Image Compositions

Overview

You want to provide an overview of what your apps looks like on different devices? This composition might be a very good fit.

Mobile Focus

Detail

Works Greatly from Mobile to Desktop

Desktop Power User

Download