Featured Arrow

Ongoing UI development – Dev Blog 18

Welcome to another weekly development blog. For the past week we have been focused exclusively on the UI of Fringe Planet, and this weeks blog post talks about the changes, as well as some of the design philosophy behind the new UI themes.

Old peon stats

Fringe Planet has always had a very minimalist but functional UI – sleek dark grey, with white and black fonts/icons. As much as this was functional, we felt that it didn’t lend itself to the feeling of the game.  We started research into the re-design of the UI a few weeks ago, when we posted this image on twitter:

Different themes

These were crudely put together photoshops, but we used this to garner interest and opinions on what people thought would be a fitting UI for Fringe Planet.  Fringe Planet is an ancient and magical place, full of hinted at horror and dark dreams – and we felt the UI should reflect this atmosphere.  The initial impressions from this tweet were very mixed – everyone had a very different opinion on which was the “best” and which would reflect the Fringe Planet atmosphere the best – but almost everyone agreed that the UI needed a re-design.

After several different iterations of rotten metal, carved stone and ancient parchment we hit upon an idea – in a game about ancient rituals and magically powered machines how about basing the UI concept around a timeworn magical spellbook?  This immediately resonated with us, and we spent some time prototyping various paper textures and font choices in order to find something that worked well together.

Magical UI

The rather text heavy UI worked exceeding well with this choice and just by updating the UI panels with a parchment texture and fonts with a more “olde worlde” typeface – the results felt very natural. As we continued to develop and refine the concept we got feedback from both our twitter community and our friends at indietopia (as well as few suggestions from a secret cabal of like minded developers) – and implemented a lot of the feedback we received. An example of this was with the peon “selfie” mode screen.  We decided to move away from buttons on this screen and focus more on the ideas of pictograms, which we implemented and the immediate feedback we received was that there needed to be some feedback on interaction with these icons (hover/click) – this was easily put into production (it is sometimes easy to miss the obvious when working on something so closely!) and the result felt very organic. Another bit of feedback we got on this screen was the lack of the sky for the background of the peon. We had removed this a while ago, to give a more interesting look – but the feedback we got when testing this screen was almost universal in nature – without the sky in the background it looked “unfinished”, “not polished”, “strange looking”. So we re-enabled the skies and do agree that it looks much better now :

Selfie mode - no sky

Selfie mode - sky

As mentioned, the UI is fairly text heavy, so we’ve gone through a process of removing text where possible (and where it makes sense). An example of this is on the detailed peon information screen, which did contain a long list of everything that the peon is wearing – we’ve replaced it with an icon system, which will indicate if a peon clothing slot is occupied and a mouse over will tell you specifics.

UI mouseover

Finally, and something we didn’t get to test yet with the UI is replacing the rather standard icons with hand-drawn icons. This will hopefully really add to the feeling that the UI is an occult tome of powerful magic, rather than just a way of interacting with the world – these icons should be delivered next week, so we are looking forward to sharing them with you!

UI

UI - crafting

UI - enter the voide

 

There is a lot more to read about Fringe Planet… why not try:

Leave a Reply

Your e-mail address will not be published. Required fields are marked *