[Abstract] According to Derek Sakamoto, it took about 1 year to finalize the concept of the current version of Hearthstone, and as he said in his speech, UI design was carried out at the same time as game planning.

User interface (UI) design is usually neglected before the final stage of game development. However, a little thinking about UI issues at the beginning of the project can bring great help to your R&D process. Today, the reporter found a speech by Derek Sakamoto, a senior UI designer of Hearthstone, at GDC 20 15.

In his speech, he explained in detail how Blizzard designed, modified and redesigned the UI in Hearthstone, a free card game. According to Derek Sakamoto, it took about 65,438+0 years to finalize the concept of the current version of Hearthstone, and as he said in his speech, UI design was carried out at the same time as game planning.

It is worth reading for any game planner, artist and anyone who wants to improve the visual performance of the game project. Please look at the speech prepared by the reporter below:

First, thank you for your participation. I'm glad to see you here. My name is Derek Sakamoto, and I am a senior UI designer for Hearthstone Project. What I'm going to talk about today is how to create an immersive UI.

Here is a brief introduction. Up to now, I have worked in Blizzard for over 12 years. My first job was UI design for World of Warcraft, and I participated in Wrath of the Lich King. More than six years later, I ushered in a career change, and I was very lucky to participate in the Pegasus project, which is now the hearthstone legend.

So in the next 30 minutes, I will talk about some advanced principles in hearthstone project creativity. It is precisely because of these that Hearthstone's UI and the game itself have become what they are today. The first part is about how to find the seeds of the project, the second part is about making a quasi-materialized style, and the last part is about the synchronization of UI and game design.

Part I: Looking for the seeds of the project (ideas)

What are the seeds for finding the project? For me, it may be an idea, a picture, a movie or a song, which can let your team members know the development direction of the project. So before we show our seeds, let me tell you how we worked before we got the core concept of Hearthstone. At that time, because there were only five people in the team, and the scale of the team was still growing, many people might not know much about this project.

The initial user interface is as follows.

So let me introduce the Legend of Warcraft to you first. This idea contains elements of Warcraft such as ice and fire and orcs, but it is obviously not the result we want. Our other idea is to make a map of the world, where you can travel and unlock new areas, do solo tasks, and then unlock new content. We initially made a creative prototype with Flash, but because it is a stand-alone version, we didn't invest too much. The picture below shows my visual effect goal before my first test. Maybe many of you will say, fortunately, this goal has not been achieved.

This effect looks lifeless and super complicated. Later, we tried many ideas one after another, such as WoW maps, adventure books in stand-alone mode, 3D cards and even holographic cards.

The picture below is the matching pattern we made before. When we matched, we knew that we didn't want to encounter on the map and needed the feeling of searching, so the initial matching was like this (below). Some people think it's not bad, right?

The past version of Hearthstone is very different from the present version, so the project seeds are needed. This process is very long, and we are constantly trying what we can do and what the desired effect is.

A previously designed box (which can be opened to get a matching map)

We also made another pattern matching. The opening is a box (above). You can click to enlarge the player map, choose your own hero, click in to get the matching opponent, and then zoom out to start the game. This feeling may look a bit like hearthstone, but it's not the same. It just gives some reference to the current game. This idea may be well done.

"Box" version of the battle opening interface

The idea of the box mentioned above has been recognized by the team, and these ideas are like roots, which eventually make the hearthstone blossom and bear fruit. Our current game start interface is a box, and people who have played the game should know it better.

After the box, we have a basic UI framework and want to make it feel like a jewelry box or a music box, so we naturally add elements such as buttons and trees, including the later loading interface.

The key art design: the door before the table appeared

Then, the question came: the box was always on the table, and one day we wondered, where should the table be put? So we came up with a new idea, so we made a loading interface like the one below, which looks like a door. When the server is busy, it will display' table full', and players need to wait for a certain period of time before entering the game.

The following is our key art, with a poker table with the theme of Warcraft in the background, which makes players feel that they are playing Hearthstone in the big environment of World of Warcraft. This idea makes us very excited and feel better. At the Blizzard Carnival, we also specially designed a scene for this purpose, hoping to get more inspiration, but there is no better idea yet.

Some people may ask, how did you find a good idea? This is a really big question, but in fact, I don't have an answer. The only hint I can give is to find it myself. At the beginning, our UI looked like this (below), and it looked ugly, just like it was found in the garbage.

First edition user interface

Then we thought, maybe this game should be made in 3D. Later, we wanted to make it more solid, add more magic and attract people, so we made many patterns.

3D user interface

Finally, we agreed that we should make it look more structured and valuable, so we got the current UI main interface.

End user interface

So the experience of finding project seeds is: there is no way to get them directly unless you are super lucky or very talented; You should look for it at the beginning of the project, because it will make your project research and development smoother; It can make everything better, make all elements look appropriate, and combine them like a complete game; Moreover, if you want to make an attractive game or a unique genre, you must find this seed.