Portobello's Campaign: UI Art Dev How-To

Hello all, I'm Jules, Neverwinter's UI Artist. I'm excited to share the results of our hard work on Portobello's Campaign. With many of Neverwinter’s updates our wonderful designers create campaigns to help guide players through the zone or event. It's my job to take their ideas and create an interactive design for the players with art themed to the content. That can be something as simple as unique background art and headers, or more creative designs like the one we've done for Portobello's Campaign.

We begin with simple black and white wireframes created by either by UI or design. These help us decide which interactive elements and information might be needed for each window. After that, I move to full Photoshop mocks, which will give us a clearer understanding of how the interactive element's visual states, layout, and art style will look once it's all implemented. This is where the fun begins!

As a fan of Acquisitions Incorporated, it was great to re-watch the games as research for work. I may have watched it quite a few times more than needed, “No guys, I swear, I’m working!” With the Portobello campaign UI we wanted to break the fourth wall by creating a fun design which mirrored the cheeky humor of the Acquisitions Incorporated live games and brought in pen and paper elements of tabletop D&D. Through many meetings and iterations we created a layout that does both of these things.

The task header art was particularly fun to design and I went through many iterations. Much of the art I work on only ever shows up very small in game so keeping it simple and readable is important. Here are a couple of the iterations of the headers along with the finals enlarged so you can see the details. I found the more complicated art made it difficult to identify all the elements so I decided to go with the simplified versions.

I inserted as much of the pen and paper feel of D&D as I could while still using the long established visual language of our campaigns. The top and daily heroic feat headers are both from recent D&D character sheet designs and the task backgrounds were given a paper texture. For the Die Nation task I couldn’t just do one side of the die, I had to make all 20. To maintain authenticity, I copied the layout from a d20 I had on my desk.

We also have some art from Flabbergast himself, he’s doodled on your evaluation sheet while waiting for you to finally do something worth noting. While I was discussing Flabbergast’s unique personality with Chris Perkins, he mentioned that Flabbergast thinks of himself as a naturalist, so the first set of doodles are of things he sees as you make your journey through the Underdark. The second set contains elements that stood out during the Acquisitions Incorporated games, from majestic doves to a lovingly crafted bucket. The last set are of his constant companion, Mr. Snibbly. Once the adventurer has done something worth noting, Flabbergast leaves a comment. As you’ll see, he’s difficult to impress.

Two of the last details I’d like to point out are the carefully chosen progress bar fill color (it naturally had to be green because, you know, "Green Flame!"), and the background art which is a top down screenshot of one of the wonderful Portobello maps. And if you look closely you’ll see character sheets in the corners.

My favorite part of designing this UI was the amount of story I was able to tell with the art, from all the details in the headers to Portobello’s personality in the doodles. Thank you for letting me give you a sneak peek into how we create the UI for the Portobello’s Campaign and I hope you enjoy being evaluated by Flabbergast!