Skip to Content
Author's profile photo Paul Aschmann

SAP UI5 – A Photoshop template of GUI elements

Mockup.png

For me (and I am sure many others!), UI5 has become a really useful toolkit for easily developing web apps and POC’s with little effort around the SAP Ecosystem. The OData support, rich controls and business inspired examples lend itself well to the mantra of “Don’t reinvent the wheel”. At a recent SAP Inside Track event in NY, I made reference to the fact, that while developing a mobile app, I, or a graphic designer, can spend close to 40% of the total design & development phase/hours on the UI. Building “consumer grade” enterprise apps is a different way of thinking for app developers. I am sure many of you, like me, started out with a redefined canvas of boring, grey .NET controls or a “Enjoy” SAP CXTAB_CONTROL. But times are changing and we should all look to the creative and vibrant consumer world of both web and mobile apps to reconsider our methods and processes for developing great apps.

When I started working with the UI5 toolkit, I would more often than not, start coding right away, without going through my traditional methods, and ultimately ended up in a frustrating muddled mess. Why wouldn’t you start coding immediately …. everything you need is right there? Wrong, planning is everything when it comes to design. Properly designing a app which is going to judged, by today’s standards, is not an option – but a requirement. I am not saying every application in your organization needs a UI Designer, but planning should start with sketches, process flows, and subsequently lead to the UI design and  development. When you have a toolkit which has some great looking components, its easy to skip this phase and get cracking. Don’t do it. Since I have spent a lot of time developing both web, mobile and traditional apps for the enterprise, my approach and system development life cycle (SDLC) resembles more of a artistic approach and design definition, than a “traditional” enterprise app. Yours can be entirely different, but the point is that I would like to encourage you to consider that a *great* design should be a part of your project goals.

The Reason

That’s the reason I developed the PSD file of UI5 elements. To make that design planning process quicker, easier and to encourage all of us collectively to make great designs and awesome apps.

   Screen Shot 2013-07-09 at 9.19.16 PM.png

The Process

I used the online test suite and replicated the majority of the objects using shapes in Photoshop. Each object has groups/folders categorizing and defining it, both for extensibility and this makes finding a component/object easier. Some objects are not included: Icons and some of the VIZ Charts are not individual objects. Maybe in the near future if I can get some form of ‘OK’ from SAP for not copying/redistributing their font I will consider it (hint?).

Screen Shot 2013-07-09 at 9.15.29 PM.png  Screen Shot 2013-07-09 at 9.20.44 PM.png

The UI Toolkit

95% of graphic designers will spend time working with a UX/UI in Photoshop prior to coding and this toolkit makes creating those mockups considerably easier. Each object is defined as a shape and can be moved, and styled as needed. Currently the file has 897 individual layers which makes up the +- 8.2 million pixels of UI goodness 🙂 . Building a new UI mockup should not take long … create a new file, duplicate the objects you need and get creative. (Please also consider the fact someone is going to need to code this and that your imagination, should be limited by *their* capabilities!) 🙂

Whats next …

I am hoping someone else interested in the UI/UX aspect will be able to contribute to the project and consider extending this file and its objects to cover all the aspects. I also hope that SAP will consider releasing its “Master” file to the community as ultimately it will encourage better adoption and use of the product.

My challenge to you ….

Does you/your company/partner have a UI/UX designer? Do you think its important to design a UI before coding? Do *you* have any great UI/Designs you would like to share? Post a link in the comments, or better yet, create a post here: https://experience.sap.com/ (SAP Why is experience.sap.com not directly integrated/on SCN??? 🙂 )

Downloads

You can download the file here (Please sign up for the newsletter to get the download link)

Don’t have Photoshop? Here are a couple of the elements split up and are available in PNG format: Download here (Please sign up for the newsletter to get the download link)

Assigned tags

      32 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Krishnakumar Ramamoorthy
      Krishnakumar Ramamoorthy

      Thx Paul! This is pretty neat.

      Author's profile photo Durairaj Athavan Raja
      Durairaj Athavan Raja

      Awesome Paul. Thanks for sharing.

      Raja

      Author's profile photo Konstantin Anikeev
      Konstantin Anikeev

      Thanks Paul, great work..

      Author's profile photo Alexander Sperling
      Alexander Sperling

      Great work and thumbs up for sharing this with the community!

      Author's profile photo Former Member
      Former Member

      Nice, UI mockups for SAP! Finally 🙂

      Author's profile photo Former Member
      Former Member

      great work and Thanks for sharing

      Author's profile photo Jitendra Kansal
      Jitendra Kansal

      nice.. thanks for sharing. 🙂

      Author's profile photo RAUL MIGUEL ROMERO GALINDO
      RAUL MIGUEL ROMERO GALINDO

      Hi.

      Great contribution for ui or web designers. This is a demonstration that UI5 is not only for developers, but also points to what every web designer wants.

      In my case, first I try to create gui samples with Pencil (http://pencil.evolus.vn/)... it's a great designer for mobile and tablet future apps. After that, I model o map those graphic features to my UI5 application via Dreamweaver o Webstorm.

      Hoping a new post!

      Author's profile photo Paul Aschmann
      Paul Aschmann
      Blog Post Author

      Hi Raul,

      It sounds like you have a similar process flow to me. For reference I am a big Dreamweaver fan too 😉

      I look forward to your post!

      Cheers, Paul

      Author's profile photo Tahir Öz
      Tahir Öz

      Thanks Paul, great work

      Author's profile photo Christian Neu
      Christian Neu

      Hi Paul,

      thanks for sharing this. It's a nice help for creating mockups.

      This should be also included in the UI5 DemoKit!!

      It would be also nice if you could prepare a png package for those who aren't lucky to get a Photoshop license, but also want to make some mockups in powerpoint. 🙂

      Cheers

      Christian

      Author's profile photo Paul Aschmann
      Paul Aschmann
      Blog Post Author

      Hi Christian,

      Thanks, and I will create images for this - you make a good point 🙂

      Cheers, Paul

      Author's profile photo Paul Aschmann
      Paul Aschmann
      Blog Post Author

      Hi Christian,

      Here are some of the files split up into PNG's. I was not able to do everything but please feel free to let me know if you need anything in particular.

      Cheers, Paul

      http://www.li-labs.com/sap%20ui5%20png.zip

      Author's profile photo Midhun VP
      Midhun VP

      Great work Paul.

      In my company there is no UI/UX designers. Based on the requirement we only used to design the UI of the apps ( Only Mobile apps ).

      - Midhun VP

      Author's profile photo Robert Wetzold
      Robert Wetzold

      Awesome! I have been looking for something like this for a long time already. Thanks for putting in the tedious work.

      Author's profile photo Stephen Mahon
      Stephen Mahon

      Excellent!!!!

      Author's profile photo Kenton Hankins
      Kenton Hankins

      Paul,

      First, excellent resource,  its nice to see more tools for SAP UX professionals there are so very few of us out there right now. 

      I am building Axure versions of UI5 which I think would be even more beneficial.  As a UX professional Axure really helps me build and simulate entire workflows before any line of code is written.  I have even ran usability tests with the Axure prototypes which can provide tremendous insight.

      Author's profile photo Paul Aschmann
      Paul Aschmann
      Blog Post Author

      Hi Kenton,

      Thanks for the comments and you are correct - resources are limited at the moment, as the demands on UX world of the enterprise transitions, I hope this will change.

      Re: Axure - The product looks great and I am looking forward to seeing the outcome. As with any design process their tends to be preferences and processes which every designer prefers and is effective with.

      Cheers, Paul

      Author's profile photo Former Member
      Former Member

      This is great!

      Author's profile photo Former Member
      Former Member

      Great Resource!!!

      Author's profile photo Simon Kemp
      Simon Kemp

      Thanks for this contribution Paul, very useful.

      In my experience very very few of the projects I have worked on in the enterprise space ever had a UI or UX designer (I can think of only one in 15 years actually). But as you say "the times they are a changin..." and I hope it will become more of a priority.

      Generally the issues I run into are that (in the past at least) people holding the purse strings fail to recognize the value of doing proper design and user testing, that is of course until they roll out their application and wonder why nobody is using it 😏 ... and by then it is too late all the money is gone and everyone moves on, leaving the poor user struggling to use a poorly conceived application, that actually makes their job harder and more frustrating! The other issue I run into is that the "business expert" seem to think they know exactly what the business users want - so you get what I like to call "Design by Dictator" ... and that rarely ends well either.

      Best advice I can give is:

      1. Allow enough in the budget for design it will really benefit your ROI and TCO and
      2. Get the end users involved early and often in the process - don't wait until UAT to show the user your masterpiece.

      Once again thanks for sharing.

      Simon

      p.s. would you consider a follow up video blog showing us how to use the template in photoshop? My photoshop skills are very lacking 😕

      Author's profile photo Former Member
      Former Member

      Tedious work done easy...
      thanks...

      Author's profile photo Noël Hendrikx
      Noël Hendrikx

      Nice blog! Also keep an eye out for the UI Theme Designer (UI Addon SP04, will be released soon I think).

      My experience with UI/UX experts on the project is awesome. For the last 8 years I don't use the standard portal interface anymore, but only a custom framework based on the customers needs. Usability is often an underestimated risk in big portal projects.

      My advise is: when your end users are not power users, use a usability expert for UX/UI design and even better, use corporate branding. Every application in the same look and feel, information integrated in the application - or when it is not possible to integrate, put it also in the same look and feel. Besides an UI/UX expert, also use someone of the communication department for clear language and use the same terms everywhere, thru all applications.

      Nevertheless... When I start with a project I will wait for the first concept of the UX designer. Then I start developing in html / php / css to make a framework and to see different options. Together with the designer we are finilizing the framework. When it is done (max 10 days if you ask me :P), the framework will be build into SAP portal. The UX designer will see if the result is what he/she expected. I also use fiddler to reverse proxy my local files like javascript and css files, less deployment like this, to speed up the development. And of course, the browser inspector is your best friend! 🙂

      Kind regards,

      Noel

      Author's profile photo Kenton Hankins
      Kenton Hankins

      Noel,

      As for ROI on UX I would check out the HFI ROI calculators:

      http://www.humanfactors.com/downloads/roi.asp

      Thanks,

      -Kenton

      Author's profile photo Paul Aschmann
      Paul Aschmann
      Blog Post Author

      Thanks for this helpful link Kenton

      Author's profile photo Paul Aschmann
      Paul Aschmann
      Blog Post Author

      Hi Noel,

      Thanks for the feedback as well as some insight into your design/development process. I like your advice regarding the power users, I believe more companies need to consider UI/UX as an important aspect of custom development, even for non-customer facing applications 🙂

      Cheers, Paul

      Author's profile photo Former Member
      Former Member

      As part of our PowerStory plugin for PowerPoint, we created a library of SAP UI5 controls for PowerPoint.  The UI Controls are created as basic PowerPoint shapes and are available as part of a library of almost 700 UI Controls that you can drag and drop onto your slides directly from within PowerPoint.

      Martin Crisp

      Author's profile photo Kell Vagtholm
      Kell Vagtholm

      Exceptional work!

      Regards,

      Kell Vagtholm

      Author's profile photo Aditya Palekar
      Aditya Palekar

      Hi Paul,

      I am about to start work on a UI 5 project and this tool is exactly what we need to build our mockups. I need some help. I downloaded the PSD file from the link provided and opened it in Photoshop Elements 12. However it opens as a flat image and I am not able to extract the controls I need. May be I am doing something wrong in Photoshop? Can you help?

      Thanks

      Aditya

      Author's profile photo Paul Aschmann
      Paul Aschmann
      Blog Post Author

      Hello Aditya,

      Unfortunately this file is for Photoshop CS6, as per some people's request I did create a PNG version of some of the objects which are available to download as well.

      Hope this helps with the elements version,

      Paul

      Author's profile photo Aditya Palekar
      Aditya Palekar

      ok. Thanks Paul.

      Author's profile photo Sascha Cutic
      Sascha Cutic

      Despite options with build.me and support for ppt and axure in 2019, I’d still like to see the PSD. Any chance to revisit the links and re-share it? Thanks a lot