As a Power Apps consultant, I’m often asked by clients how to create PowerApp forms that look modern, sleek, and engaging.
The default form designs in PowerApps can look a bit dated and generic.
Thankfully, with a few simple tweaks, you can design modern-looking PowerApp forms that impress your users.
The key is leveraging the various design elements and controls available in PowerApps to create an experience reminiscent of consumer apps.
Things like transparency, cards, icons, colors, and fonts can completely transform the look of your forms.
Use Transparency for a Modern Look
One of my favorite tricks is to add transparency to form elements like galleries, cards, and shapes. For example, set the Fill property of a gallery to:
rgba(255, 255, 255, 0.75)
This makes the gallery have a subtle transparent background. Be creative and apply transparency to other elements like field labels, divider lines, etc. It creates a more modern, minimalist aesthetic.
Structure Forms with Cards
Another design strategy is to place key sections of your form inside Card controls. Cards visually separate parts of the form.
For example, you could put the address fields in one Card and the payment fields in another Card. This makes the form feel segmented and structured.
Experiment with the Card template and padding properties to find looks you like. Cards can really help modernize traditional stacked forms.
Use Icons and Illustrations
Integrating relevant icons and illustrations into your forms boosts visual appeal. Icons can replace field labels or be inserted next to inputs.
Illustrations visually reinforce processes and provide flair. For example, having an animated credit card image next to payment fields.
There are icon libraries you can leverage, like Font Awesome, or you can use PowerApps built-in icons.
Illustrations can be imported from sites like unDraw. Visually relevant images make forms pop!
Pick a Color Palette
Choosing a clean, modern color palette ties the look together. Avoid default colors like blue and experiment with bolder, monochromatic palettes.
I often pick a vibrant primary color for buttons and alerts then use its muted shade for backgrounds. Other elements like fields and text get high-contrast gray hues.
Having a consistent color scheme makes forms feel cohesive and designed. It’s a subtle but powerful design tactic.
Use Custom Fonts
Don’t rely solely on default fonts. Custom web fonts can make a huge design impact. Fonts like Lato, Open Sans, and Roboto have a modern, friendly vibe.
Use font pairing principles – combine a sans-serif font for titles with a complementary serif font for blocks of text. This looks cleaner than sticking to one font family. Follow these design strategies, and you’ll create modern-looking PowerApps forms that make your users smile! Let me know if you have any other tips. I’m always looking to up my form design game as a power apps consultant. What modern UI patterns are you leveraging? I’d love to hear!
