Weekly Report #13

T

Team Bugbear

Guest
All right, time for another weekly blog!

This week we’ll talk about how we approach designing menus, and how complicated it can get. This is topical, as we’re currently designing brand new menus for Wreckfest, and you’ll get to see them soon enough :)


The first step of the process is to recall this mantra: “Form follows function.” This means we want to have menus that look good, yes, but most of all are easy to use.

To get the ball rolling, we talk. A lot. What do we want is not as important as what we need? To map out what these needs are, the artists and game designers gather up – the designers explain what kind of flow they have in mind, and the artists pitch their ideas to the designers. This means a lot of meetings, and often quite a bit of arguing, critique and pondering. It sounds rougher than it really is, for most of it is really good natured! Plus, if you can’t back your ideas up with proof and/or solid points, it’s probably not that good an idea :)

This process is repeated over and over again, as it’s important to give everyone a chance to mull things over, and to spot mistakes and fallacies in their proposals. After all, this is just the very first stage, so even if the “core loop”, meaning the very basic game flow, and all the major menu items are already known, it’s easy to miss some crucial detail.

Once the basic frames are in place, the artists create a grey box prototype. No bells and whistles, no graphics, no nothing – just the basic functionality, so we can spot if this design really works.

Below you can see two screenshots of a work-in-progress garage. The first was created to play with the idea of what the in-game garage could look like if it was in an old brick building with huge windows. The second was created to play with the idea of what the garage could look like if it was in a basement. The style didn’t fit, so the concept was dropped early on.




When the result is good to go, we move on to the next stage: finding that right feel for the menus. For this, references are the key. What games got that right atmosphere we’re after? What newspapers have the right way of displaying information? What movies work that light and shadow magic just the way we like it? This can go as detailed as need be, e.g. we spot a game that has that 0.5 second fadeout with each menu click that looks real cool!

This is all references, mind you. It doesn’t mean copying others’ work 1:1! It means we gather inspiration from things we like, and build from that. Imitation is, after all, the sincerest form of flattery :)
We have a huge in-house reference library for just this purpose, so our artists don’t have to hit Google all the time, but can add items to the library that look sweet whenever they come across them, and then just check the library when the need arises. It makes the whole process a lot smoother, and allows for much faster prototype construction.

We also create tapestries of different reference materials to give us a sort of “mood board” that is not about particular details, but rather about the overall feel you get when you glance at it.

Below: A snapshot of reference library, and an example of a mood board.




The third step is creating a more finalized version of our menu prototype. At this point we already know what the menu flow will be, and what the style will be. This stage is all about detail. We hit Photoshop like nobody’s business and delve on minor changes of font size, line thickness and color/light gradient. We create as “final” version as we can, and check that it all looks good.

Fourth stage is motion design. Because menus are rarely just static, we do a mock-up so people get the idea of what our new menus will look like in action. This requires some 3D sorcery as well as placing lights and objects in the mock-up environment, and often this means improvising solutions as all the necessary bits and pieces are not in the game yet.

Below: a video of an early 2014 animated mock-up menu.

Click here for a video of an animated mock-up menu


The fifth and final stage of the design process is proof of concept. So, we have menu design that’s all the way up to how it will look, and we have a motion mock-up to give an idea what it’ll look like when you’re actually using the menus. If both look successful, we create a playable prototype: a collage of grey boxes that link to each other, but even if they look really rough, you can use them like you’d use the final thing. This stage shows if the whole design really, truly works or if (or, rather, where) it needs some more tuning.

Once we have the proof of concept prototype in place, too, we can start the hard part: actually creating the menus. We’ll go over that stage at a later date :)


Thanks for reading our weekly blog!
As always, stay safe, people.


- Team Bugbear
 

longtimeago

"When in doubt, flat out" - Colin McRae
It was an absolute joy to read this all! :D

That old-warhouse/garage pic on the left with big windows looks amazing, did that one drop as well?

Also, in my opinion I was always stunned with the Menu's of the DiRT 2 and GRID (1) games. They fit so perfectly with their style of games, so I imagine Codemaster went through a lot of meetings to get those menu's right, just as you guys are doing now. :)

Just one question: Will we be able to "upgrade" or just change the layout of our garage/home/workplace/etc? Maybe even buy other 'properties' with ingame money? Or is this still a bit secret/unsure? ;)

EDIT: Holy crap, I just totally forgot to watch the video. In my opinion it looks good, altough the menu looks a bit too "Windows 8-esque". I like the options and animations though!
 

Daystar

Gone in 60 seconds!
Thanks for the updated info!

Very cool how you described the processes that are involved. :)
 
The video is from an old mockup, just to show you that part of the process. It does not represent the final look or functionality of the new UI. :)
 

ETD

Member
Weeked Smasher
Heh, that mockup looks vaguely familiar...

http://community.bugbeargames.com/index.php/topic,6381.0.html

You guys were probably first to do it though :D

I like how the camera transitions from car to car. It might start looking weird if the player owns more than 3 cars though. The unending garage....

Also, can I just say I CAN'T EXPRESS WITH INOFFENSIVE LANGUAGE HOW MUCH I LOVE the bright garage. Seriously, it looks so much more inviting than the one we have right now. It should be the first one you unlock in the game (assuming you want us to be able to choose which garage we like best, kinda like Star Citizen will do with ship hangars). Since as they say, first impression is everything the first garage a player gets to see in the game should be reasonably good looking and inviting. The current one just looks kinda dark and cold.


<virtual washing of ETD's mouth with soap by Jori>
 

Needles Kane

Member
Weeked Smasher
Switchblade, Blaster XL, Chili! Cars from FO2.

Why video shows garage without colours? Was there some technical reason or is it just because you tested does it look ''cool'' without colours?

I like how the camera transitions from car to car. It might start looking weird if the player owns more than 3 cars though. The unending garage....
I also like it! One option to make it could be that there is three stalls for cars and when you change car #4 it goes back to where first car were but car is changed to 4th car and etc.
 

longtimeago

"When in doubt, flat out" - Colin McRae
Needles Kane said:
Switchblade, Blaster XL, Chili! Cars from FO2.

Why video shows garage without colours? Was there some technical reason or is it just because you tested does it look ''cool'' without colours?

I like how the camera transitions from car to car. It might start looking weird if the player owns more than 3 cars though. The unending garage....
I also like it! One option to make it could be that there is three stalls for cars and when you change car #4 it goes back to where first car were but car is changed to 4th car and etc.
Why not a "Active car" slots or something? Your first garage you can have 1 active car, upgrade your garage to 3 active car slots, etc etc. The rest of the cars are just 'stored in the parking lot in the back' or something. Bugbear wants you to focus on "your favourite" cars to race in, wreck in, upgrade them, etc. So you start out with a little garage where you tinker on your car, then you upgrade to a 2 slot garage so you can have one "oval" car and one "dirt-track" car?

The ideas with garages are endless! Well, not really, but I hope bb is still open for ideas. :p
 
Needles Kane said:
Why video shows garage without colours? Was there some technical reason or is it just because you tested does it look ''cool'' without colours?
Because it was just a concept of a menu, I didn't want to spend too much time with it, just enough to make the idea come across. So instead of making a garage that works in-game and all the camera transitions etc, I just used 3DS Max to make quick modifications to the garage model to make it bigger, removed all the textures, then made the camera transitions and rendered it quickly to show the idea. It was much faster to prototype like this instead of doing it all in-game.
 
Great post!! Guess I'm going to have more practice developing my patience and suppressing excitement about the update ;)

Can't wait for the new menus though, over the interim functional ones we have at the moment.
 

Ecclesiaste

Crashed more cars than times I saw finish line
Team Bugbear Member
Matrix404 said:
The garage on the left is dead sexy!
I absolutely agree !

Tero said:
The video is from an old mockup, just to show you that part of the process. It does not represent the final look or functionality of the new UI. :)
Does the new UI have the same "feeling" ? Because I find this one really cool.
 

findRED

Member
Full time wrecker
longtimeago said:
Needles Kane said:
Switchblade, Blaster XL, Chili! Cars from FO2.

Why video shows garage without colours? Was there some technical reason or is it just because you tested does it look ''cool'' without colours?

I like how the camera transitions from car to car. It might start looking weird if the player owns more than 3 cars though. The unending garage....
I also like it! One option to make it could be that there is three stalls for cars and when you change car #4 it goes back to where first car were but car is changed to 4th car and etc.
Why not a "Active car" slots or something? Your first garage you can have 1 active car, upgrade your garage to 3 active car slots, etc etc. The rest of the cars are just 'stored in the parking lot in the back' or something. Bugbear wants you to focus on "your favourite" cars to race in, wreck in, upgrade them, etc. So you start out with a little garage where you tinker on your car, then you upgrade to a 2 slot garage so you can have one "oval" car and one "dirt-track" car?

The ideas with garages are endless! Well, not really, but I hope bb is still open for ideas. :p
I like this idea, the 3 most used cars are in your garage (and you could also put a little used favorite inside instead if you wanted) and the rest are sitting around you "junk yard" or the parking lot out back! Those ones would most likely be partially complete with missing parts and possibly unfixed body damage. I like it alot! Bugbear you should do something like this!
 

Matrix404

Member
Tero said:
CrashsTestsFr said:
Does the new UI have the same "feeling" ? Because I find this one really cool.
Our goal is to have a modern look and feel on the UI. So, we'll see. :)
Personally I don't feel a modern UI with clean edges fits. I like a roughed up, and reliced look. make it look like the UI has been around as long as the garage painted and dented... like the car textures. I want to be amerced in the world, and when I think modern looking UI, my mind paints a very abrupt separation. Just my .02, I'm sure you guys will do something amazing.
 

Speedevil

Member
The mockup UI reminds me of Forza and I like that. I personally think the UI should look pretty clean, as opposed to the game. I don't know, I think it'd look nice.

BTW, if you don't want cars to pop in place of others in the garage, you could simply do it Grid 2-like: you see a side of the car, then the car starts to go out of the garage (the camera doesn't follow the car) then it disappears when it's off-screen, and the new car enters the garage the same way.
 
Top