Examples of Visually appealing Responsive Canvas design

[Anonymous]

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. 

[wyotim]

Welcome, @Anonymous! 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]

@wyotim Thanks for the mention

@Anonymous - 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]

---

@wyotim wrote:

Welcome, @Anonymous! 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