Remastering a Classic | Building a Better UI for Fable Anniversary
Fable has a lot of games in the series. When a game is “re-mastered in HD” like Fable Anniversary, what is the scope of work that goes into the game when compared to creating a whole new game in the series like Fable: The Journey?
Even though the game is already designed and crafted, the scope of the work involved is still massive. You are given more of a starting point though!
First step is to play the original game as much as possible, getting to know where you would want to make changes and where it makes sense to keep things untouched. The workload gets generated based on these factors. When you are starting on a brand new game project there are so many extra details that need to be figured out beforehand.
A very small example of some questions that need to be answered are: Is it something that gamers would want to play? How many people do we need to do create this? Will it be fun?
Most of the Fable Anniversary UIs had a paper theme. How did this affect your color theory for the iconography and UI elements? For example, were there some icon designs you would’ve liked to have done for achievements but found they didn’t really fit well with the colors for the paper theme?
It was definitely a bit of a balancing act to get the iconography working well with the old worn paper theme. I didn’t want to change the icons too much as players are familiar with the original designs.
The Inventory menus make use of icons for navigating between screens, these were new ones which I created from scratch. I tried to keep them as simple as possible, they are just flat colours on paper textured tabs, helping the player to read them quickly.
I did tweak the colours of the full colour icons used, I kept them quite low in saturation which helped them fit in with the paper theme. With the achievement icons I turned them in to postage stamps, which I feel worked very well.
How do you typically handle creating making sure a design will actually look like you expected it to once it’s actually functional?
Once the concepts of the design are decided on I will start prepping the assets for the programmers. In this case I built the UI elements visually in Adobe Flash. I know some basic ActionScript so I was able to create timeline animations and a very simple mock-up.
I would pass the files over to one of our programmers along with a detailed description of how it should work and if there is a relation between other UI screens. Regular progress reports and feedback was given from both myself and the programming team.
If anything needed to be altered for technical reasons I could look at solutions as the problems arose. I believe good communication between a team and knowing what each person is working on is really helpful and can make projects run efficiently.
What software did you use for the different projects you worked on for Fable Anniversary?
The software I used on Fable Anniversary was Adobe Photoshop to create concepts and textures, Adobe Illustrator to create vector icons and Adobe Flash to create all the UI elements.
Functionality and good user experience is key with UI, so I always make it my first job to block out what information we need to display on each screen. This is usually a crude flat color layout of a screen being populated with dummy text. Keeping it simple early on really helps to develop a unified structure for the UI.
It also make gathering feedback on your designs a lot quicker as there is no pretty imagery distracting away from the functionality. Once a basic structure has been settled on, I can start playing with visual styles and making everything look pleasing to the eye.
The original Fable UI was interesting to remaster, the original menus had not aged very well if you compare them to other modern day games. It took a lot of clicks to navigate backwards and forwards through the original menus, this is not ideal.
I sat down with our lead designer and together we tried to figure out how we can simplify the menus and minimize the amount of button presses a user has to do on each screen. The Inventory menu was the biggest challenge as it contains so much information scattered through different sub-categories. I created a new layout featuring a tab based menu along the top of the screen which would allow for quicker navigation.
On the console version the Xbox 360 Controller bumper buttons control which section you are viewing and the triggers scroll through any sub-sections. The two thumb sticks and D-pad are put in control of filtering the content and reading item descriptions. Using this new layout players can quickly flick from choosing their equipment to reading about their current quest with minimal button presses.
This was a tough one as at the start of the project we were just focusing on a console version of the game. A PC version didn’t get green lit until near the end of the console production. I did come across some stumbling blocks within the UI, things that work well on a console don’t always translate well to a PC.
The whole team worked very hard on getting the game on PC, we made many improvements as we went along. Some of the biggest UI changes were creating new option screens to adjust graphical settings and keyboard binding options. We definitely learned a lot from the process and I am very proud with the result.
We were a small team which really helped with communication and keeping everything consistent. I was responsible for creating the initial UI concepts and visuals of which I would run through our lead designer. He would give me feedback and help suggest solutions to potential problems.
It is definitely worth having a set of fresh eyes review your concepts, looking at the same things each day can cause your eye to get stale and potentially miss things. Any feedback that was given I would update my concepts and see if it worked. Once we were all happy with how things were looking on paper, I would transfer my concepts in to flash ready to be passed on to the UI programming team.
Readability is the most important thing when it comes to typography, but it is also nice to select a font that suits your overall visual design. With the UI design being based on an old book I chose a fairly decorative font for any page titles and headings.
It was a long selection process as I wanted to retain some readability as well as decoration. We used Filibuster NF in the end, which I think has been successful.
