The character creation screen for World of Warcraft is notorious for being the most complicated in the game. To create a perfect, balanced class or race that you can be proud to play with friends and against enemies, the process takes hours. But recently Blizzard has made significant changes to make this daunting task more accessible by introducing new classes, races, visual customization options and more choices on how your character looks outside of graphics settings.
The “shadowlands new ui” is a redesign of the character creation UI that was released in patch 7.3. The new interface has been praised by players and critics alike for its simplicity and ease-of-use.
With the introduction of Shadowlands, a fresh chance to improve and simplify the character development process arose. Learn more about the thinking processes behind it by going behind the scenes with Senior UI Designer Jeff Liu. Greetings, Azeroth’s citizens! My name is Jeff Liu, and I work for the World of Warcraft User Interface Team as a Senior UI Designer. I’ve come to provide some details about the new Character Creation system that debuted with Shadowlands. We felt now would be a good moment to peel back the curtain on some of the behind-the-scenes design decisions we’ve made to the user interface, especially with all of the amazing new personalization possibilities that have just been released (UI). I previously worked on the redesigns of the Transmogrification System and the Auction House. Redesigning ancient user interfaces is by far my favorite sort of job, therefore I was ecstatic to work on the Character Creation screen. Exile’s Reach, the new player beginning zone, was included in the New Player Experience project. We wanted to update the Character Creation screen since it is the first screen a new player encounters with. The character art team was also working on a number of new customization choices for Shadowlands, so the UI upgrade came at the ideal time.
The New Design
To give you an idea of what the old Character Creation screen looked like, here it is: Splitting apart the class and race selection windows was one of the first things we attempted. On the first screen, you’d choose your class, and on the second, your race: In this case, if you wanted to play a Night Elf, you’d have to return to the previous panel, choose a new class, and then keep switching screens to view all of your possibilities. It was a little odd, to be sure. We almost ended up maintaining the previous layout and just changing the graphics since this didn’t work out. Crash Reed and Ray Ocampo, two of my colleagues UI Designers, suggested a proposal where the races were separated into opposing camps during a last-minute brainstorm: The fact that the face-off between the Horde and the Alliance quickly conveys the faction conflict is one of the layout’s highlights. We were smitten by the design’s simplicity and freshness, so we went all out!
Follow your instincts.
I reevaluated the quantity of information displayed to players on this screen now that we have a fresh layout in our pocket. The previous Character Creation screen included a lot of text descriptions that contained a lot of information: The disadvantage of providing too much information (even if it is valuable) is that it might impede someone from making a clear decision. The new Character Creation screen was created to aid novice players in avoiding analytical paralysis. We used graphics and music to illustrate the races and classes instead than using a lot of words. We’d rather to show you a wizard firing a fireball rather than tell you about it. The majority of new gamers will be acquainted with these fantasy motifs thanks to popular culture. A warrior is often shown as someone who holds a sword, wears somewhat heavy armor, and battles in melee range. We arranged the courses in a way that would make it easy for new players to find a class they could understand: The first three archetypes are the most powerful and well-known. The following three are a little weaker. Someone who has never played a video game, for example, may have no idea what a Priest does. The hybrid courses, which are more complicated, come next. It’s crucial to note that this design decision was made based on how simple it is to comprehend the principles behind what each class is and what they accomplish without the need for extra explanation. Races are mostly a matter of personal preference. We didn’t want new players to be concerned about racial abilities, so we defaulted to hiding them: It’s OK with us if a new player doesn’t establish their “forever character” right away. Playing the game will teach them much more about the races and classes than we could possibly describe on the Character Creation page. All we ask is that new players choose the coolest-looking race and a preferred class archetype, then get started!
Don’t tell, show
We set out to build new animations that could properly sell the class fantasy now that we’d eliminated all of the text. We started by determining how detailed the animations should be. We were particularly conscious of the time limit since we didn’t want it to go on too long. Lead Animator Ian Lang’s early prototypes were as follows: Note: the final film depicts an early idea we tested with a huge, textile backdrop and your figure standing on a pedestal. Here’s another version of it: Following our decision, the animation team built a sequence for each class, collaborating with the FX team to determine the appropriate special effects to match the shown talents. After that, a sound designer connected all of the animations to sounds. I believe you’ll agree that the animation, visual effects, and audio teams did an incredible job making these classes seem heroic. The animations were one of the most impressive aspects of the new Character Creation screen.
Maintain your concentration.
One of our primary objectives was to draw your attention to the character model in the center of the screen. It was important to us that you felt like you were constructing a superhero. Many of the choices we took in developing this screen were influenced by this mindset. We chose a more simple approach over the conventional WoW UI graphic style. Expensive art elements on the sides, like as the previous faction flags, were deleted because they were aesthetically intrusive and diverted attention away from your character. We created a vignette by casting a huge shadow on the screen’s edge to give the figure a spotlight effect. We have placed the UI components in such a way that they direct your attention to the area where we want you to look. Finally, when the camera zooms in during customisation mode, we blur the backdrop. This helps you concentrate on your character’s qualities by making the character stand out.
Players that are new
Character Creation is presented to new players in a different way than it is to seasoned players. For them, I wanted to create a simpler, cleaner experience. Only the primary races, for example, are shown, and their names are listed underneath the images. Then there are certain distinctions that are more subtle. As a seasoned player, the first character you’ll encounter is a completely random race/class combination. New players will always see a Human or Orc Warrior as their initial character (of a random gender). This relates to the principle of introducing new players to the game by showing them something more familiar. New players’ characters are also randomized differently. Because this may be their first encounter with the Warcraft world, I believed it was critical that each race be able to read well aesthetically. As a result, when the character is randomly produced, we disabled choices that disguise the face, such as tattoos, war paint, and headdresses. But don’t fret; once the user enters customization mode, they have complete control over those selections. Finally, on the customizing page, new players will see a hint: One thing we learned from user testing was that some new gamers were apprehensive about completing their character. Doesn’t it make sense? If you believe this is your last opportunity to design your character, you’ll take your time and make it great. This suggestion allows them to continue with confidence and enter the game more quickly.
Customization of Characters
Let’s have a look at some of the early prototypes for the Character Customization panel. You can observe how the design changed from the previous version: I tried a more free-form approach where the selections weren’t enclosed inside a box at one point: We didn’t like how crowded it appeared, but we loved how open it was, so I mixed it with some of the previous concepts where we categorized the options: We’re about there with the final layout!
The Option Picker
The settings in the final prototype are controlled via sliders, as you can see. During development, this UI component went through many versions. On the right, there were huge preview portraits in the former layout. It’s tough to detect the difference between the several face selections in these examples: They’re also not particularly scalable, and they go against our purpose of concentrating on your central character. As a result, we set out to discover a user interface control that might take the position of the portraits. I didn’t want to utilize a variety of controls (such as checkboxes, buttons, and color pickers) since I thought it would seem crowded and overpowering. I intended to utilize a single control that could handle all of the different options. The most essential purpose, though, was to allow you to swiftly switch between any two possibilities so that you could compare them. The initial few revisions didn’t meet that need, and navigating between alternatives that were too far away was a pain. Sliders allowed for fast movement, but not exact movement. Sliders are also often employed to transition between two extremes (such as short and tall), which was not the case with most of these selections. Finally, I came up with a multi-column dropdown that met all of our requirements:
- It allows you to easily choose between two alternatives.
- It allows you to view all of your alternatives at once.
- It’s a single, multi-purpose user interface control that may be used for both names and colors. We even blend the two kinds in the same option in certain circumstances.
- In the middle, your emphasis is focused on your character.
- And, perhaps most importantly, it allows you to preview alternatives in real time just by hovering your mouse over them.
On a side note, I’m a big fan of Overwatch. How many allusions to Overwatch can you spot in the option names?
Icons is a category of icons.
Each of the customizing choices falls into one of three groups. The following is a timeline of how the categories and their symbols evolved: I had intended for five categories at first, but after testing it in-game, I altered my mind. Hair choices being in the second category seemed cumbersome to me, as altering your hairdo is usually one of the first things you do. As a result, I put them in the first category, along with the facial alternatives. Because most races don’t have a lot of body and tattoo possibilities, I integrated the two categories. That’s how we arrived at the final three.
Barbershop
You may recall that the barbershop had an entirely different user interface from the Character Creation page. It made a lot of sense for us to utilize it in both locations after the revamp. Because the illumination was reliant on the surroundings around it, some barbershops were inconveniently dark. In certain situations, this led to inaccuracies in color perception. For example, a green might seem yellow. When you engage the barbershop chair, the art team fixed this issue by adding a perfectly neutral light surrounding your character. The illumination is now bright and true in color. You may now alter your character’s gender in the barbershop, which is a new function. Here’s a video showing the first gender switch, as captured by the engineer who carried it out.
Bugs
Throughout the course of this project, we had to work out a number of visual issues: The QA team wants to thank for protecting you from this nightmare fuel!
Until We Meet Again
Character artists, animators, producers, test analysts, sound designers, user researchers, and engineers all worked together on the Character Creation overhaul (see their previously published piece here!). We want to have created a flexible, contemporary UI that will allow millions more characters to be created in the future. I hope you liked this behind-the-scenes look at how the Character Creation interface was revamped. Thank you for taking the time to read this! World of Warcraft’s Senior UI Designer, Jeff Liu
The “wowhead character customization” is a website that allows users to create their own characters. The site has been redesigned with the new Shadowlands expansion in mind.
Related Tags
- demon hunter customization shadowlands
- wow pre patch character customization
- shadowlands character creation armor
- wow shadowlands character models
- wow character creator
