Hands in the air, people! Just like our tree friend up top. Reader UI of the Week takes a turn for the artistic today, showcasing Shikoba's user interface. Featuring some awesome custom art and a minimalistic setup, Shikoba draws from the ability to build a new graphical UI from the ground up. Interfaces that come from the minds of artists and design professionals always intrigue me, as their abilities in the professional world translate into cool concepts in their WoW world.

Shikoba is a website designer and graphic artist who has taken his talents from the workplace to Azeroth, crafting a beautifully simple addon area on the bottom of the screen. Tell us what's up, Shikoba:

Hey there,

I've always been into creating my own UI, but recently I sat down for a day (when my server was down for maintenance ...) and figured out how to fit everything I need into a compact little console.

In the end, this is what I came up with. I thought I would submit it for consideration.

Shikoba

Thank you for the submission, Shikoba. Kindly included with the image of the interface is another keyed version of the screenshot showing what addons are used in the construction of the UI. A custom Sunnart viewport combined with some simple configurations of addons you already know and love are woven together into this completed setup. Hopefully Shikoba can answer any of your questions in the comments, as I am sure there will be many.

The art of Sunnart

Sunnart is one of those addons that shaped my early UI tinkering by making it easy to add art to WoW's interface. Sunnart was easy to create and easy to set up, only requiring the artist to adhere to some simple image creation rules. I tried sticking all sorts of stuff on some of the default Sunnart panels, changed the colors to suit my taste and took out some of the pieces I did not care for. It was easy enough, and felt great to see my own little work in my user interface.

If you have an image editor, you're already 90% of the way to custom art in Sunnart. Simple instructions for image size and creation are available at Sunn's Curse or WoWInterface page.

Shikoba's custom panel dips and curves in just the right places, showing the painstakingly preciseness needed to achieve this type of result. I'm willing to bet that some preliminary drawings were used in addition to screenshot overlays, which I would love to see, just because I am that kind of curious. Those drawings would be pretty neat!

As I have said before, the key to a great custom user interface is knowing exactly what type of player you are and the ins and outs of your class, as well as having the forethought to design around what you need. Shikoba has obviously done exactly that, crafting the custom art around a single Bartender bar near the bottom. What happens if Shikoba needs an extra action button? The process and art gets tweaked. Remember, at the end of the day, this is a beautiful piece of "background" with addons overlaid. SpartanUI, the ubiquitous art panel UI, does just that.


Discussing things HUD and map

IceHUD is definitely a good choice in Shikoba's user interface, freeing the player and unit frames from the confines of the custom art panel. I can only imagine the pain going into designing the perfect spot for larger unit frames. This approach, however, negates that entirely, despite the portrait Shadowed unit frames above the main layout.

IceHUD is set up very simply and elegantly -- the colors are crisp and do not detract at all from the custom art panel. They serve two completely different functions and exist fairly harmoniously. Also, IceHUD provides the buff tracking for Shikoba, saving on the number of addons needed to get this UI off the ground.

The Sexymap border is also a custom piece of art, perfectly tailored to the rest of the user interface. I would not be surprised if Shikoba created the art as is, then removed the Sexymap area and turned it into a Sexymap border for use on the UI itself. Suffice to say, it is an awesome approach.

One of the many reasons people may use a simple, square minimap is that square minimaps fit snuggly into corners, to be used with user interfaces that create the row of addons at the bottom of the screen. Shikoba has stayed with a circular minimap, crafting a little space for just that in the corner. I really like the integration next to the chat as well. I will admit that it is a bit weird seeing chat on the right side of the screen instead of the left, where my chat has resided for as long as I can remember chat existing in games.

Many questions!

I cannot help but ask myself a million questions about Shikoba's user interface, mostly because it's the product of a mind geared for accessibility and simplicity. As a graphic designer, I am wondering what part of the interface gets designed first. The user interface, at its core, is a utilitarian device. The WoW user interface is kind of like designing pants. Do you design the concept of the pants you want to wear first, or what the pants are going to look like? Do both ideas come into being at the same time, not mutually exclusive?

The first thing I thought of when I saw Shikoba's UI was that a very definitive set of addons and abilities were planned out and modeled around. Frankly, I love that style of design. The user interface has a clear purpose and form, as opposed to slapping some addons together and calling it a day. If you have ever wanted to get really intimate with your playstyle, creating an interface from the ground up like this is a great exercise, even if you just brainstorm it out. And believe me, I have the least amount of skill there is with image editors like Photoshop, and I still managed to change the color on a few pre-made panels.

Little things are what to look for when scouring this submission for ideas. Notice the small mount bar over the Recount and Omen windows. Marvel at the tiny experience bar happily resting underneath.

My only personal issue (and really, when isn't it a personal qualm I have?) is that the sides of the user interface are not closed off to the sides of the game space. The movement that occurs in these spaces would disorient me when I tried a similar setup -- I felt that the UI pane was floating in mid-air and the world was spinning around it. That, and chat felt harder to read because of the movement so close to the sides of the chat box. Again, personal preference. It does beg the question, though, that if Shikoba added sides to the art, could he do away with some of the UI's height in favor of slim sides?

All in all, I love it. There is a good deal of information to take away from Shikoba's submission. The real take-away, however, should be that you can make your own art for panels. You can do it. If you can imagine it, you can draw it. And if you can draw it, you can create it. So that is your charge this week, dear readers. Draw something. Anything. Create it in a free image editing program like GIMP. Draw it on paper. Don't even care about how good or not so good it is -- just come up with something new. I bet you'll surprise yourself. Thank you very much for the submission, Shikoba, and I'll see you all next week!

---

Interested in getting the most out of your user interface? Come back once a week for more examples of reader UIs. For more details on individual addons, check out Addon Spotlight, or visit Addons 101 for help getting started.

---

Tags: add-on, add-on-configuration, add-on-examples, add-on-guide, addon-configuration, addon-examples, addon-guide, addons, featured, guide, ui, ui-configuration, ui-guide, user-interface, user-interface-guide, wow-add-on, wow-add-on-guide, wow-add-ons, wow-addon-guide, wow-addons, wow-guide, wow-ui-configuration

Filed under: Reader UI of the Week, Achievements