SAP UI5 – A Photoshop template of GUI elements
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.
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.
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?).
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??? 🙂 )
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)
Thx Paul! This is pretty neat.
Awesome Paul. Thanks for sharing.
Thanks Paul, great work..
Great work and thumbs up for sharing this with the community!
Nice, UI mockups for SAP! Finally 🙂
great work and Thanks for sharing
nice.. thanks for sharing. 🙂
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!
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!
Thanks Paul, great work
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. 🙂
Thanks, and I will create images for this - you make a good point 🙂
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.
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
Awesome! I have been looking for something like this for a long time already. Thanks for putting in the tedious work.
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.
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.
This is great!
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:
Once again thanks for sharing.
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 😕
Tedious work done easy...
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.
As for ROI on UX I would check out the HFI ROI calculators:
Thanks for this helpful link Kenton
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 🙂
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.
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?
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,
ok. Thanks Paul.
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