Unsure of where to begin when designing for SAP Fiori? Below are some tips to help you get going!
SAP Fiori Guidelines: Whether you’re designing for Native iOS or device-independent, SAP has guidelines for designing for Fiori. This is a great place to kickoff to get to know Fiori and how it functions.
Device-independent – https://experience.sap.com/fiori-design-web/foundation/get-started/
Icons: Creating icons can be time-consuming when constructing an app. SAP has a library of icons that speed up both the design and development process when building an app. Download the Icon Font here. Use the SAP Fiori Icon Explorer to browse through icons. You can also copy and paste icons from this page once you have the icon font downloaded.
Stencils: Sketch Templates are available for iOS-based designs here.
Sketch templates for device-independent designs are not available yet, but are coming soon from SAP!
Sometimes it’s easier to see a certain element in action to get a better idea of how it works. Click here to interact with samples of Fiori UI elements
These are the three main design programs being used in the industry currently. While all of these design tools are very similar (and there are even more than this), it all depends on what works best for you.
Want to learn more about the comparison between the programs?
Some of the tools above incorporate prototyping in their applications, but InVision can be used no matter what design tool you use. It integrates with Sketch and Adobe Photoshop through the Craft Plugin, but you can upload screens manually to your prototype as well. InVision allows you to share a clickable prototype with users and gather feedback from them. You can also use the Freehand feature to collaboratively sketch ideas with teammates.
Once your design is complete, you can easily apply your theme to SAP Fiori applications through the Theme Designer!
Now you’ve got the resources to help you start designing for SAP Fiori. If you have any other questions, reach out in the comments!
If you are interested in viewing similar articles, visit our blog, here.
View our LinkedIn, here.