Fable-Featured-Image

Remastering a Classic | Building a Better UI for Fable Anniversary

‌‌
A lot can happen in a decade. This is perhaps most true in the world of technology where ten years is an eternity. After all, it was ten years ago that a little website by the name of The Facebook was founded by some Harvard roommates. That same year, Lionhead Studios released their new game called Fable. Fast forward ten years and the team at Lionhead Studios, along with Microsoft (publishers) have just released what is now their seventh game in the Fable franchise. This time it's a completely remastered version of the game that started it all, appropriately named Fable Anniversary. The original game expected you to play it on a system with a whopping (said sarcastically) 64 MB of video RAM. Needless to say, there's slightly better hardware these days. Developed using Unreal Engine 3 and released on the Xbox 360 and PC (via Steam) one of the big areas that needed to be refreshed for Fable Anniversary to take advantage of today's hardware was the UI. To get a peek into how this was done, we reached out to Jenny Peers, Lionhead's UI Artist, to learn how she went about remastering the graphics for a decade-old game. Note: Using the slider in the images below will let you see the differences in the UI. Sliding to the left shows the new (16:9) UI while sliding to the right shows the original (4:3) UI.
Before After
Q

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?

Q

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.

Before After
Q

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.

Q

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.

Before After
Q
When you sit down to work on a UI, what are the key things you always tackle first?

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.

Q
When you’re working on a project like Fable Anniversary that’s based on an existing game, how much freedom do you have with the UI? For example, do you have to have the same number of menus? What’s some of the thought process that goes into what stays and what goes?

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.

Before After
Q
What are some of the biggest things you need to keep in mind when designing a UI that will be used both on a console and a PC?

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.

Q
Were there other UI designers that worked with you on Fable Anniversary? What are some of the ways you made sure the new designs stayed consistent across all of the designers working on the UI?

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.

Before After
Q
Can you explain some of the things you think about when working with the typography in your UI designs?

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.

Q
If you could give one tip to an aspiring UI artist wanting to get into the game industry, what would it be?
Start creating. A good portfolio can speak louder than words. Whether it is websites, games UI or graphic design that you create, it will all help you learn the basic design processes involved.  Set yourself a project, why not pick a game from your childhood that you love and have a go at revamping it to modern day standards?

Ready to skill up
your entire team?

10
Licenses
Continue to checkout Continue to checkout
Cancel

With your Pluralsight plan, you can:

With your 14-day pilot, you can:

  • Access thousands of videos to develop critical skills
  • Give up to 10 users access to thousands of video courses
  • Practice and apply skills with interactive courses and projects
  • See skills, usage, and trend data for your teams
  • Prepare for certifications with industry-leading practice exams
  • Measure proficiency across skills and roles
  • Align learning to your goals with paths and channels