In today’s post, I’m giving you 5 handy resources that you can use to improve the GUI in your canvas apps!
#1 – Box shadows
The first handy tool I’m going to share which I use constantly is this website which gives you 93 different box-shadows that you can utilise within div containers in a HTML text control in your canvas apps! Just select the box shadow you like the look of and it will copy it for you to be able to paste into the styling of your div container!
93 Beautiful CSS box-shadow examples – CSS Scan (getcssscan.com)
#2 – UI Goodies
UI goodies is an awesome website which like this post, puts loads of UI resources in one place. You’ll get a few more than 5 though… 😉
This gives you a bunch of accessibility resources, fonts, backgrounds, svgs, icons and so much more! If you want your canvas apps looking gorgeous… this is a no brainer to bookmark!
UI Goodies: All the best resources for designers in one place.
#3 – Generated Photos
Do you need to demo an already gorgeous looking app that might have a list of people in it for example, but you don’t want to actually put real people and their photos there? Check out this awesome website where you can generate images that look like real people but it’s all made with AI!
Generated Photos | Unique, worry-free model photos
#4 – Image colour picker
This is a tool I use constantly! Do you ever come across those cases where you’re building an app for a client but they haven’t supplied you with a branding pack for their organisation and you don’t have HEX codes for the colours of their brand?
This website lets you upload images and pinpoint areas of the photo to identify the HEX code of that area. Using this you’ll be able to upload companies logos and graphics to identify the colours they use, so you can implement their brand in the design of your app!
👍 Color Picker online | HEX Color Picker | HTML Color Picker (imagecolorpicker.com)
#5 – Figma
My final tip is to get Figma downloaded on your device! Figma is an awesome UI design tool that I constantly use for mockups, thumbnails and all sorts more! Using the Power Apps Figma UI design kit you can even design an app in Figma and import it into Power Apps to generate a canvas app!