Configure It Out: Where we’re going, we definitely need wireframes! (Part 2)
Configure It Out: A recurring series where we discuss how to foster and apply creativity, out of the box thinking, problem solving, and more to app configuration and design.
______
J: In our last post we discussed wireframing, specifically about breaking free of wireframes and letting your creativity flow directly in the app. Today, we’re here to discuss how else that conversation could have gone.
Sad to report that only one half of this dynamic duo caught the Clue reference.
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: Huh, I’m feeling the strangest sense of déjà vu hearing that question!
I don’t think I could ever imagine a world where I don’t wireframe. Wireframes help me rein in my scattergun creative approach – they help me really focus in on how each element contributes to the vision I have for an app. And I still think I have to tap into my creativity at times to figure out how to make something important fit with the rest of the theme.
I view wireframing in two categories – low fidelity, and high fidelity. Low fidelity wireframes are great for just getting a general idea of placement and positioning. They are quick and dirty, and I can go through a lot of them on a single design. Like that one you showed me on your dinged up whiteboard, Jen – that’s super low-fi!
J: "Super low-fi"? I think you mean “super lovely.”
Jen's super lovely wireframe
And here’s the final ArcGIS Experience Builder result.
"Low-fi wireframe" Psssh this looks exactly like in the design!
Sorry, I couldn’t resist. My final result is actually this one item list in an ArcGIS Dashboard.
Ok. On second thought, that was a pretty low-fi wireframe.
I’m quite happy with how it turned out. The card is actually quite dynamic, with the background image and weather icon changing depending on the data. There is a lot of HTML and Arcade behind the scenes, which is actually why I was wireframing to begin with.
That quick and dirty wireframe I showed above is the type of wireframes I use most often in my creative side quests. I need to have some sort of visual reference when writing more complex HTML. I also don’t write my HTML directly in ArcGIS. Instead, I use an online editor that allows me to instantly see how my HTML will look. Of course, since I am outside of the ArcGIS ecosystem, I don’t have access to the data fields and Arcade that will populate a lot of the dynamic values, so I just throw in some generic placeholders.
D: I definitely meant “super lovely”! I think this is a great example of where wireframes can help you get the abstracted creative vision out of your head before starting the complex side of the work. I feel the same way about using wireframes for any front-end app elements or pop-ups that rely heavily on arcade/html – it’s really hard to start writing code from a blank canvas.
The one place I differ is that I will sometimes start with a higher fidelity wireframe, with lots of detail, to make sure I’m really happy with the colors, positioning, text types, and more for a design before I start writing code. That way, I am not having to cut-and-paste Arcade or HTML to try to adjust the design in real time. Then, I’ll actually write the code to do the low-fi wireframe. This allows me to focus on element positioning and responsiveness before introducing color, images, and data. Usually, I’ll find some really garish colors so that I can differentiate the different components of my design and easily see how everything relates to each other. Finally, I’ll ‘hydrate’ the low-fi wireframe with data, actual icons and images, and dynamic data. Here’s an example of this high-fi -> low-fi code -> hydrate process:
High-fidelity Figma pop-up wireframe
I initially made a high fidelity wireframe in Figma. This let me dial in the pop-up elements and customizations in an environment where I can quickly iterate and make changes.
Low-fidelity HTML-based pop-up wireframe based on the previous high-fi mockup.
Back to low-fidelity. Getting the element positioning right using HTML in VSCode. At this stage, I only care about positioning, and use very obvious colors to quickly understand and adjust the underlying structure of the <div> containers in my popup. For example, the yellow boxes represent any icons I want to include.
Final Arcade-driven pop-up, in the app context. Who knew there were so many bigfoot sightings in the Denver metro?!
And here’s the final pop-up, configured using Arcade-driven dynamic HTML. Using the high-fidelity mockup as a starting point helped me make sure my design fit the app before I sunk time into writing code. Then, the low-fidelity HTML wireframe made it easy to transfer into Arcade, where I replaced the various elements with live links to the data.
J: I too use some pretty out there placeholder colors! It makes it easier to see where everything is, and it also makes it pretty apparent if you forget to swap them out for your actual design. I’ve never thought of that initial HTML build-out as another form of wireframing. I guess it turns out that I’m wireframing all over the place. Who would have thought?
Challenge
Our challenge this time is to do the opposite of what you normally do. If you are firmly on team wireframe, try the sandbox, anything goes approach. If you normally take a more laissez faire approach, try adding more structure to your creativity through wireframes.
Check out the rest of the Configure It Out series for more tips, tricks, and discussions on creative problem solving and out of the box thinking in ArcGIS.
