The fundamental aspect of all my designs for Excerion Games and Dark Gale incorporate one of the things I’ve been pushing for a quite a while: a touch friendly UI on both tablets and desktop. Not only is this a by-product of me having owned a convertible laptop for most of my time in college, but more of something that more and more people have finally jumped on.
I’ve been an avid pen-based tablet fan since high school (I’ve owned a Wacom Tablet since that time). Why? Because all of my notes and books could be stored on a single portable medium: the hard drive or the cloud (Skydrive). I’m glad companies are pushing towards touch tablets, because it will only get cheaper and commoditized.
In this post I want to introduce my final push of layout designs for Excerion Games and Dark Gale.
It is clean and Windows 8, iPad, and Android Tab ready. One of the biggest positives about this? An adaptive layout using css media queries (responsive design in other circles). You’ll notice the mostly plain ‘flat’ UI approach I’ve taken. Well, I’m a programmer and don’t spend much time making art assets + most of the product experience is text with touches of graphics. That may not be excuse-worthy, but product focus is more important. Let’s discuss both designs.
Excerion Games
Excerion Games is all about bringing together a community and providing services to this community. That’s why we have the headline/about and then the news view. First goal is to inform the user that what we want is exactly what they want and the next is to keep the user informed without ever having to login. It also provides a way to show new users what is going on and why you should join or login!
I’m not completely sure when I decided when Excerion Games was going to be blue themed, but blue and orange clicked as good contrasting colors; Hence the Login with Excerion Central button is born! Colors are always a big thing for me when looking at what I create. I don’t care for the meaning of the colors, but rather how well it contrasts and complements black and white text. Blue is fantastic with white text. I can’t believe how well its various shades both contrast and complement both text colors. Blue doesn’t let white text bleed at all, which I found particularly attractive.
The news view is an interesting one. It looks more like comment replies than anything else. I’ve made mockups of what it should look like and this design takes partly from the mockups. It is weird because I am getting away from reading comments on various websites. You’d think I’d get away from the comment look, but you know? I am starting to think the people who will visit my site are used to seeing that design and will actually read the news and stay informed!
Dark Gale
Dark Gale is very simple as the game should and will continue to be. The front page has only one goal! To tell the user what the game is about and what your goal should be. The goal of any game is to get to the top just like any arcade game you’ve played (high scores anyone?). Dark Gale is exactly like that except it is like that in various facets to accommodate as many player types as there is. Some people want to gather and be social and others want to battle and be asocial.
You may be wondering why I chose green and that’s valid. Dark Gale has been green since it’s inception and I’ve continued to use green for the duration of development. For some odd reason, I tend to associate gale storms with green and maybe they are green. Green in the sense that they are natural. No, that one was a joke! Seriously though, my association with words and colors drove this color pick and needless to say I’m pretty happy about the choice.
Seeing as this is only a peek. Let’s show how it will look on your phone!
By now, you can see, that I am going BIG with this by going with an adaptive layout. This peek does not clearly highlight the best aspect of this design, but it certainly shows where I’m headed with this. No mobile app to develop meaning no mobile code to separately maintain. I want a uniform experience across all devices and will take almost any necessary approach to do that even if that means dropping support for past devices. Things should just work. I just can’t wait till it is publicly released.
Leaving the past behind
Below you see two designs of Excerion Games that I’ve left behind (Wish I had earlier pictures 
). When I had done these, I thought they were the best designs that I’ve ever done in the world. The ideas behind them still live in the final design though! This is why i tell people not to attach themselves to their code just because they made it. Things will change and once you’ve experienced that change, you’ll often find yourself asking why you were so attached.
