Power Apps: Recreating… Instagram

/ Charles

Software Engineering is more than writing efficient and reusable code. An underutilized discipline of the field is user-centered design. This area of Software Engineering focuses more on building beautiful and intuitive interfaces. Unfortunately, I don’t often see Power Apps with clear investments into their UIs.

Though, with a bit of effort, Power Apps could easily resemble some public facing apps. For instance, building a Power App to look similar-ish to Instagram with dark mode enabled…

To start things off, Instagram essentially looks like two galleries:

  • 1 Vertical gallery
  • 1 Horizontal gallery
Figure 1 – Power App Studio tab to Insert gallery Layout(s).

Along the top, drop in a horizontal gallery. The vertical gallery fills up what remains of the app screen:

Figure 2 – Power App with blank galleries added to the canvas.

For simplicity, this app will leverage two very, very basic data sources. The data could pull from SQL or a SharePoint list, but switching things up, Excel tables get some attention today:

  • Data Source #1: IG stories along the top.
    • ProfileName
    • ProfileImage
  • Data Source #2: IG feed listed in the body.
    • ProfileName
    • ProfileHandle
    • ProfilePicture
    • PostPicture
    • PostDescription
    • PostLikes
Figure 3 – Power App sample data source for IG feed.

Now, with some data populating the galleries, adjust and size the gallery elements. Each gallery should include multiple picture and text elements. What’s more, the app should include some IG icons along the top:

Figure 4 – Power App home screen mock-up.

With the app coming together, tweak the element colors to “enable” dark mode. Also, hide (or delete) app icons that are no longer needed:

Figure 5 – Power App home screen slightly refined.

NOTE: Icon rotation is available under Properties.

Figure 6 – Power App elements are rotated in the properties.

Similar to PowerPoint, canvas elements are layered. To recreate the IG add button, the plus icon is layered with a rectangle and some transparency:

Figure 7 – Example of icons and shapes being layered.

Layering some additional elements, the profile circles are composed of two image elements. Both images are rectangles, but the top image has a circle transparency:

Figure 8 – Example of images being layered w/ transparency.

Finally, populate the data sources with some real-ish data and run the app. Honestly, there could have been a third data source for user profiles, but two are sufficient for a proof of concept…

Figure 9 – Example of final Power App w/ some tweaking.

Conclusion:
Overall, the app only took an hour or so to mockup. This includes building the data sources, creating the layout, and gradually tweaking the aesthetics. Power Apps have a lot of feature potential, but design shouldn’t be sacrificed…

“The vote is necessary, but insufficient.”

Courtland Cox

#BlackLivesMatter

3 thoughts on “Power Apps: Recreating… Instagram”

  1. Pingback: Power Apps: Recreating… Netflix | console.log('Charles');

  2. Pingback: Power Apps: Recreating… Office App | console.log('Charles');

  3. Pingback: Power Apps: Recreating… Twitter | console.log('Charles');

Leave a comment