Configure It Out: Wireframes? Where we’re going, we don’t need wireframes! (Part 1)
D: Hey @JenniferAcunto! One of my New Years resolutions is (of course) to build more apps, and it's high time for another Configure It Out post. Maybe we should share a bit about how we get new apps started, to kick off the year?
J: I know you are a big fan of wireframing or sketching out app designs before you start building customer work. I’m curious if you take that same approach when working on your personal creative projects.
D: You know, I think it depends for me. I’m super into the idea of wireframing or sketching out an app or popup design to settle in on a layout. I find that otherwise, if I just start in the app builder, I tend to stick to what I’m comfortable with. I also think that wireframes are important when you need to involve others in the design process. But, sometimes it can be helpful to use the builder as a sandbox, especially when you’re trying to wrap your head around what a widget can and can’t do.
J: That’s an interesting take. I’ve never thought of wireframing as a way to break out of your comfort zone. I personally jump in and start building with only the vaguest sense of a plan and see what happens. Take the opposites challenge app for example. I had the general idea of an app ‘split in two’, but no idea what that would actually entail. I just get in there and start throwing spaghetti at the wall to see what sticks.
D: It turned out so great, and with so many fun, thoughtful, opposites-y easter eggs – I would have assumed you’d have sketched this out before building. But maybe there’s a method to the madness, and you can convince me on your “just build it” strategy.
But before we get there, I have to ask.. How on earth did you pull off the dark/light split in the map?! It can’t be the basemap, because the split stays in the same place even when I pan and zoom.
J: It was a lot of trial and error to get there, that’s for sure. I started by making my basemap slightly transparent. Then, I made use of the new ArcGIS Experience Builder theme settings to make the widget containers transparent.
I once again used my patented maneuver of using empty text widgets to create color and stacked them on top of one another like a ziggurat. From top to bottom:
- Map widget
- Black and white text boxes for map background color
- Blue and orange text boxes for map border color
- Black and white text boxes for application background color
Once I had solved the puzzle of figuring out how to do the bi-colored map, I then created the rest of the app to justify creating a bi-colored map. Which is more or less my process for my personal creative projects. I’m not looking to build an app. I’m trying to figure out how to do some weird idea and then the app comes secondary. Definitely not best practices for app building but works great as an exercise in out of the box thinking.
D: Whoa. First off, I definitely had to look up what a ziggurat was (for the uninformed, get ready to fall into a rabbit hole of ancient Mesopotaminan history).
Secondly, I’m starting to think that the Text widget might be the most powerful one we’ve got! I love the idea of making the basemap and widget containers transparent to let what’s below show through the map; that’s really clever!
I’m starting to see your point about where wireframes fall short. Clearly, you wouldn’t have been able to figure out if the transparent map + container pyramid would work in a wireframing tool like Figma or Lucidchart; that hypothesis would have to be tested in the ExB builder.
I think this is a great takeaway for anyone who chooses to participate in our zany challenges – start with an idea of how to push the technology really far in one direction, and if you can pull it off, build the app around it. That trial and error process is a great way to learn what can and can’t be done, get comfortable with hitting dead ends and trying again, and in the end, who wouldn’t want an opportunity to ditch the requirements we all work with day to day and just see what sticks!
J: Speaking of zany challenges, the challenge we had prepared for this topic will be presented with Part 2. Turns out, we had a lot to talk about when it came to wireframing, so we’ve split it into two parts. Stay tuned for the epic conclusion coming soon!
