cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
SR1992
Level: Powered On

Examples of Visually appealing Responsive Canvas design

I'm a UX designer and am building a responsive app using the Canvas. 

 

I am trying to see if anyone had great visual examples of clean responsive canvas apps? In conjunction, how are you managing consistency in the UI grid. Trying to see how far someone has pushed PowerApps. This would help me show the engineers how far folks have gone. I saw a great visual example before in the forum of the Twitter app that someone recreated. 

 

By example, the WSIWYG editor is great for non technical folks, but there doesn't seem to be a grid model like a design tool has so it is very easy to misalign elements which is causing a lot of inconsistencies in the UI. This is why I thought to approach the responsive grid as it would be smarter based on the content size of blocks of copy, forms, tables etc. 

 

Below are some visual examples of my patterns and im trying to ensure the engineers stay as consistent as possible so our app will scale well. 

 

2.pngAnnotation 2020-01-29 120706.png

3 REPLIES 3
Super User
Super User

Re: Examples of Visually appealing Responsive Canvas design

Welcome, @SR1992! You might want to check out this template app by @KickingApps. It's the only grid-style system I have seen in Power Apps. She is on Twitter as well (@tianaranjo), where she has posted a bit on the process as she developed that template and an app she has been developing that uses it. Here is one example of the grid in action. You might check out the Community App Samples area as well. I think that Twitter app may be in there.

 

To maintain consistency, I assume most people use dynamic positioning (relating X, Y, and size properties of objects to other objects and/or conditions), which can be pretty time- (and occasionally math-) intensive. Grids would make it a lot easier for sure! Personally, the only things I don't give a dynamic position to are items that are at the X=0, Y=0 point of a gallery or something like that. 

 

Great pattern examples by the way! One item on there that I haven't found a good way to implement easily is the margins around the text in a button or text box. It's a very manual process currently if you really want to nail it! The rest of those patterns could be done fairly easily using dynamic positioning though.

KickingApps
Level 8

Re: Examples of Visually appealing Responsive Canvas design

@wyotim Thanks for the mention

@SR1992 - let me know if you'd like to connect and I can explain how I am creating responsive app. I'd love to learn from you (as a UX designer) how to improve the fluid grid I created.

 

I also hope to get my hands on the responsive feature that will be available in the (June) release.

GuestOnaQuest
Level: Powered On

Re: Examples of Visually appealing Responsive Canvas design


@wyotim wrote:

Welcome, @SR1992! You might want to check out this template app by @KickingApps. It's the only grid-style system I have seen in Power Apps. She is on Twitter as well (@tianaranjo), where she has posted a bit on the process as she developed that template and an app she has been developing that uses it. Here is one example of the grid in action. You might check out the Community App Samples area as well. I think that Twitter app may be in there.

 


ty

Helpful resources

Announcements
New Ranks and Rank Icons in April

'New Ranks and Rank Icons in April

Read the announcement for more information!

Better Together’ Contest Finalists Announced!

'Better Together’ Contest Finalists Announced!

Congrats to the finalists of our ‘Better Together’-themed T-shirt design contest! Click for the top entries.

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

thirdimage

Community Summit North America

Innovate, Collaborate, Grow - The top training and networking event across the globe for Microsoft Business Applications

Top Solution Authors
Top Kudoed Authors
Users online (4,779)