SAP UI5 - A Photoshop template of GUI elements

[paschmann]

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.

  

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?).

 

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 :smile: . 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!) :smile:

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??? :smile: )

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)

[kkram]

Thx Paul! This is pretty neat.

[athavanraja]

Awesome Paul. Thanks for sharing.

Raja

[konstantin_anikeev]

Thanks Paul, great work..

[alsp80]

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

[Former Member]

Nice, UI mockups for SAP! Finally :smile:

[former_member214238]

great work and Thanks for sharing

[Jitendra_Kansal]

nice.. thanks for sharing. :smile:

[former_member191810]

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!

[tahir_z]

Thanks Paul, great work

[former_member1775]

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. :smile:

Cheers

Christian

[paschmann]

Hi Christian,

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

Cheers, Paul

[paschmann]

Hi Raul,

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

I look forward to your post!

Cheers, Paul

[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

[paschmann]

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

[robert_wetzold]

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

[former_member203750]

Excellent!!!!

[former_member186612]

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.

[paschmann]

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

[Former Member]

This is great!

[Former Member]

Great Resource!!!

[Former Member]

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 :???:

[Former Member]

Tedious work done easy...
thanks...

[Noel_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! :smile:

Kind regards,

Noel

[former_member186612]

Noel,

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

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

Thanks,

-Kenton

[paschmann]

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 :smile:

Cheers, Paul

[paschmann]

Thanks for this helpful link Kenton

[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

[kell_vagtholm1]

Exceptional work!

Regards,

Kell Vagtholm

[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

[paschmann]

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

[aditya_palekar]

ok. Thanks Paul.

[saschacutic]

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