*What’s a skeuomorph? It’s something new, using design elements from an older version of itself. This GIF shows the design looks before and after adding the screen/lens effects.Īnd with this little skeuomorphic* touch, we’ve taken our simple, flat design and built it up into something that feels more physical and real, don’t you agree? This makes the menu look like it’s being displayed on a monitor with a convex screen. To make it fit in the game’s setting a bit more, I added a faint grid texture, and put some distortion and limb darkening around the edges. The base of this concept is, for the most part, a flat design. By incorporating them, I could control the balance between fantasy and science fiction as I put together the concept for the UI. Elements like this add a decidedly “analog” feel to the “digital” design. The decorations at the top and bottom of the menu screen were based on similar borders from the first NIER’s menus. (This is also echoed nicely in the colons in the game’s title and Pod dialogue – another symbol that also shows up often in musical scores.) Rather than including musical elements directly, the idea was to suggest them through symbolism.
Instead, I too inspiration from forms like staff lines, bass clefs, and the double-bar lines that conclude pieces of music. Now, when I say I added a “musical score” motif, I don’t mean to say I put in the flowing lines of a treble clef. This also helped strengthen the “fantasy” vibe of the design.
I decided to add to the “systematic and clean” part of the concept by slipping in a subtle “musical score” motif. But I soon realized that if I stuck too close to that idea, the final design would end up flavorless. At that time, I felt strongly that the best way to convey this would be to avoid ornate decoration and focus on giving it a clean, graceful and flat design. Mixing all of those aesthetics together, I arrived at my key concept for NieR:Automata’s UI: a design that was systematic and sterile, but also beautiful. I had several visual notions to work with: The previous game’s UI conventional sci-fi aesthetics 2B herself and the general idea of a luxurious and decadent world. When I put together NieR:Automata’s UI concept, I tried to make its sci-fi elements seem like a natural extension of the first title’s fantasy.
Step 7 micro win v4 0 sp7 series#
The world of NieR:Automata leans heavily towards science fiction, but the previous title in the series (NIER Replicant/Gestalt) had more of a fantasy aesthetic. Try out the UI in-game, looking for any adjustments or polishes that need to be made repeat until you’ve got a finished, high-quality UI!įor this blog, I’d mostly like to focus on 1 and 2 – concept and menu screen design.Prepare data for these UI elements and hand it off to programmers so they can put it in the game.Make several designs for menu screens and on-screen elements, meeting specifications from the director and game designers.Come up with a visual concept design for the UI.When I design a user interface, my process goes something like this: Modern games are filled with health gauges, dialogue windows, and all kinds of menu screens and pop-ups that convey essential information. I’d like to introduce my UI work on NieR:Automata’s UI, and give you a look at the sort of direction YOKO-san gave as well. NieR:Automata director YOKO TARO can be quite particular about what goes into his games, and UI is no exception. Game UI – that’s short for “user interface” – often goes largely unnoticed, so I was glad to hear that some fans saw some of our other NieR:Automata devblogs and asked for one about my work, too! While this isn’t my first devblog, it’s the first I’ve written since Bayonetta 2. I’m Hisayoshi Kijima, the UI and mecha designer for NieR:Automata.