I’m a huge fan of the game Smite, a Multiplayer Online Battle Arena (MOBA) like League of Legends or DOTA 2. The main game mode is 5v5, but I often prefer the 1v1 duel mode. It’s much less played, and as a result there are fewer resources available online. Throughout the game, you gain gold and purchase items, called your build, and choosing the right items to synergize with your character and counter your opponent is key, but with 105 playable characters and counting the number of possible matchups is enormous. Because of this, one of the hardest things for new duelists (or maybe just me) is learning builds. I wanted a data-driven web app to help myself and other duelists make better decisions about what to build based on what was working for the top players, so I decided to make one about a year ago. I didn’t get very far.
Luckily, I was selected for the 2019 fall cohort of the ChiPy mentorship program, so I’m giving it another go but with help from my mentor Boris this time.
We had our first interactions on slack: a chat about the project and my goals. I wanted to create a Django site and fill it with content and add functionality as I went, but didn’t really know much about Django. He suggested that was a lot to learn and do just to get started, and suggested creating wireframes first. I’d heard of this before but didn’t know exactly what it was, so I looked it up. I found two great tutorials, A Beginner’s Guide to Wireframing, and Wireframing for Beginners.
The main idea with wireframing is that you’re creating a rough layout without any content in it. This gives you the look and feel of your site before you have any of the text written, any logos, pictures, etc. One of the things I ran across was a great tool called Wirify, which you can install in your browser and will convert any web page you’re looking at into a wireframe. I went to a Smite website right away to see what they had done, and then I went looking for the right tool to create my own wireframe.
After some searching, I had narrowed my choices to Balsamiq, MockFlow, and Pencil Project, all of which allow designs with some level of interactivity. Balsamiq and MockFlow are both web based which I wanted, and more full-featured than Pencil Project, which is nice but was probably unnecessary for me. Ultimately, though, Pencil Project had a trump card. It was free!
Once I had it installed, I was ready to get started, but I wasn’t sure exactly what to design, so I asked myself what do I absolutely need in the app to use it? Well, I need to be able to choose my character and my opponent’s character, and I need to be able to display a build. That’s it. As I was coming up with the actual design, though, I thought it might be cool to just be able to see what the most recent Grandmaster builds were for a character I wanted to play, which is where the Grandmaster Builds page came from.
Quick note: all of the playable characters in Smite are gods from different pantheons, like Thor or Zeus.
Here’s what I came up with:
A word about actually using the software. Using Pencil Project to create a wireframe felt a lot like using PowerPoint to create a flowchart, in that I pretty much just dragged and dropped shapes to create my page layouts. One particularly neat “shape” was a 12 column grid which I put in the background to make it easier to see how to translate the wireframe to a page layout using Bootstrap, for example.
Here’s a shot of Pencil Project’s UI:
As you can see I’ve got my shape palette on the left and I can switch between my page wireframes by clicking on them in the bottom pane.
Now that this is done, I’m ready for the next step, creating the actual page layout itself as a Jinja template, which I’ll be doing soon.
Here’s where my project, SmiteDuelHelper, lives on GitHub. Feel free to take a look at it. Currently, the wireframes are in there as is some code from my first crack at this project a year ago.
Til next time!
Dan
