Web design for M’Diro Fantasy RPG

Inspiration

One of the major inspirations for this particular web design are the layouts and designs of several of the big MMO sites and CRPGs.  These games all start out in the same place, as concepts, and have to build a huge fan-base before ever having a game to release.

They do this by releasing bits and pieces of information about the game (concept art, trailers, design processes, etc) to build anticipation and give potential fans something to follow along with.

Since that is the approach that M’Diro is planning, I decided to work very heavily off of these prior web design concepts as well.

Layout

The layout for this project was fairly simple.  I wanted a single sidebar on the left side of the page that would serve as navigation.  I chose to drop some basic social networking follow links on this bar as well in order to give users a quick and easy way to connect to outside sources of info regarding the M’Diro community.  Building out the bar a bit further, including the most recent Tweets from the company seemed like a natural inclusion.

A secondary sidebar, on the left side of the page, comes and goes as needed based on page section and content.  On the main page it is a display of the most recent media postings, one each for Concept Art, Videos, and Desktop Wallpapers – a series of freebie downloads that serve as off-site advertising for the game and site.  Further into the site, this side bar reappears on pages for Character Races, Character classes and most of the media pages in order to provide additional information that doesn’t fit well into the body text of the page.

The main content for each page sits on a dark gray field in the center of the page.

Graphics

Graphic choice for this web design were fairly simple.  I was asked to work with reds, black white and jewel tones.  With that in mind, I used a very simple tiling background of mottled burgundy and black for the overall background.  A gray stone-work pattern worked well for spill-over background to fill any unused screen real-estate.

The mottled backdrop, however, required an overlay to be placed under any text elements that would appear on screen.  Because white on black is very hard on the eyes, I opted for a light gray on dark gray while still keeping with the darker layout that the client requested.

One place I did get to play a bit in terms of graphics, was in creating icons for use as placeholder images for the Character Classes section.  Eventually once all of the concept and artwork is finalized, each character race and class will have an illustration accompanying the article describing it.  At the outset, however, there were no such illustrations completed, so some sort of stand-in was needed.  For this I designed a set of ten icons that would serve as graphical identifiers for each character class.  Then I incorporated each of those icons onto a shield (playing on the medieval fantasy motif) for use as a stand-in illustration.

The use of these icons / shield graphics can be seen in the following illustration