Derik Schneider

UI/UX · Artist · Designer · Developer

Volition, Inc.

UI/UX Designer + Artist

SAINTS ROW 2

Breaking into the video game industry with my prowess in Flash animation, I quickly established myself as a problem-solving UI artist and competent scripter. Working with my senior UI artist colleague and mentor, we worked with our UI programmers, concept/graffiti artist, and, art director to establish the look and feel of the UI while our tools were being developed.

I adapted quickly to my first exposure to LUA, having prior experience with Javascript and ActionScript. Scripting and animating several menus/screens in game, and, parts of the HUD and various modals, quickly became second nature. Several highlights include the animated mission complete screens, Zombie arcade mini-game HUD (developed in a day!), shock animation for the revive mechanic during the Ambulance diversions, and car paint selection screen for which I developed a multi-layered approach to capture the various lighting qualities of the car paint.

For art, I created many solutions, including the layered bitmaps necessary in the car paint menu mentioned above. For the HUD and menu framing elements, I created special brushes and the technique to achieve the desired effect of the black transparent scratchy/inky paint effect adorning the UI, in addition to how to animate it properly in our tools, and, exporting optimized assets to reduce file size while maximizing usage. The worn intricate metal parts were rendered flat-shaded by our concept artist, from which I then applied specific painting methods and Photoshop effects. My hand-painted Photoshop art includes giant buttons, mobile phone, car paint spheres, weapon and food icons, eye colors, and more... shout out to Wacom for awesome tablets.

The radio station icons were created in Flash since I prefered how you could paint with its brushes. With a name and genre of music, and perhaps a smidge of why that radio station existed in the game, I invented or extrapolated more backstory for each logo to help tie them to the world, and, that made them even more incredily fun to create.

In addition to UI design and development, I established art production pipelines to be passed off to our concept artist or vehicle artist teams so they could help in the production of a huge amount of assets. I co-created a marketing style guide in html/css with my mentor and art director for use by our publisher, THQ. I helped establish the core concept, character poses, and fleur-de-lis art for the cover of EGM (July, 2011) for Saints Row 2.

RED FACTION: ARMAGEDDON

Hot off the final polish phase of Saints Row 2, I entered into pre-development on Red Faction: Armageddon and began laying foundations for the UX, wireframes, and concept art. Beginning with the user experience of our controller scheme and how it related to navigating our menus, a simple enter/exit paradigm using two buttons was established. Following that, I developed the look and feel of UI elements with my colleagues so we'd have a library of content with which to kitbash. Using Volition's proprietary UI tools and LUA, I animated and scripted interactive data-driven menus and screens for singleplayer and multiplayer modes.

Volition solidly believes in user-experience and user-centered design, so our team worked closely with the user research staff to improve UI/UX by attending play tests, studying data, and, incorporating feedback through our quick iteration processes - it's always a pleasure to see the results of your updated work in following playtests and continue the cycle.

Below you can see screenshots from the game, where most of my work went into the HUD, weapon iconography, power upgrade screen, multiplayer result screen, transition modals, and inventory.

Netherrealm Studios

UI/UX Designer + Artist

MORTAL KOMBAT + BATMAN ARKHAM CITY LOCKDOWN

Jumping into the middle of production on Mortal Kombat, I developed animations for end-game cutscenes and in-game UI screens, scripted interactive menus for use in ScaleForm, and, rescaled the UI for Standard Definition and PlayStation Vita.

I hand painted all of the icons for the slot-machine mode, "Test Your Luck" (both on Xbox360/PS3 and Vita), and, touched up or adjusted menu elements as necessary in Photoshop. As a special project, I posed, lit, and rendered chibi-like characters for use in the King of the Hill mode.

For the Playstation Vita, I also prototyped interactive versions of the Krypt and a new mode for browsing charactes and their stories using Flash. New icons were created for the Bonus Challenge Tower, and Vita specific game modes and interactive touchscreen elements.

On our first mobile game, Batman Arkham City Lockdown, I developed UI assets primarily in Modo and Photoshop. Some paint over jobs of textureless base models provided by Rocksteady turned out quite well as detailed icons after I was through with them.

INJUSTICE - WIRES

Wireframes for multiplayer/offline screens and menus, and, their UX flows were developed in Illustrator and Visio, respectively. One goal of mine was to set the ideal size of elements early on, thereby setting a precedent for how much content could possibly fit on screen, so using the font we had selected early, Futura Condensed, I established expected size of text and content while introducing innovative and intuitive layouts.

I strive for psuedo-realistic content in my wireframes. I feel it's the best way to set accurate expectations for the team and facilitate communication early on to ensure we're making what we really want.

Fostering community is very important to Netherrealm and myself, so, we incorporated ideas that supported those goals. I was just starting to watch Twitch before it became the enormous phenomenon it is today, and you'll see its influence in the chat section. In King of the Hill UI, you'll see the Dpad was to be used to toggle different sections so you could watch with as much or as little noise as possible during the match, with the main window changing size as needed.

Since progression and personalization was also important, we wanted to show how the user's profile could be customized with an avatar, portrait and phrase. Our stats screen was to be very detailed in one panel, but, simplified in another - these were all fun challenges to solve.

As DLC is inevitable in AAA games and I wanted to show players what they were missing out on, I promoted an integrated method to showing the DLC in the game's main screens. This included showing the locked DLC characters in the character select screen with a prompt to buy the DLC, or, to try them for a limited time.

INJUSTICE - CONCEPTS

For several months on the pre-production phase of Injustice and while juggling responsibilities on MK VITA and the Batman mobile game, I created concepts for the UI primarily in Photoshop, but, with supporting art such as 3D rendered characters and some UI elements rendered from Maya or Modo. I pushed for 3D rendered and animated characters in the menus and loading screens from the beginning of development after my success of rendering and lighting characters on Mortal Kombat proved to be successful. You can see the influence of this idea in Injustice and Netherrealm's other games that followed.

I borrowed our concept artists' character portraits as placeholders for rendered assets for my character select screens and melded them on top of metallic UI elements I modeled and rendered in Modo. Other screens I developed carried the metallic geometric theme and paired that with glowing geometric indicators or energy effects to relay status and interactivity.

I established and utilized custom lens flares, glows, energy effects, and gradients as a core theme that were adopted by the other UI artists in their concepts.

Before the game was formally titled as 'Injustice', I used a placeholder logo to demonstrate how the title could be incorporated into background movies in the main menu. The idea here being to show the simplest yet most attractive menu possible with the movies enforcing the cinematic feel that was originally intended.

Fonts

Featured in:

As a fan of sci-fi who played way too much Mass Effect, I found my fonts had a distinct lack of spaceship adorning capabilities. With a new goal in mind, I created ISL Jupiter with my usual character set (upper/lowercase, numbers, some punctuation) and released it on dafont.com.

I think it was over a year before I was notified that Ralph Lauren wanted to use it in their branding - in fact they already had. After coming to an agreement, it wasn't too long before others were contacting me about it's use in videogames, (or discovering that they had used it), other media/products such as indie t-shirts and boardgames, and, another huge license - for use in Pacific Rim Uprising.

The popularity of ISL Jupiter has implanted the idea of creating a more professional quality version, but, I've decided to put that energy in a new direction for a massive fully featured font family that is still in the works - you'll see it used extensively in my new website.

Featured in:

The setting behind this was to create something you would find on a PCB or computer screen, harkening back to vector fonts that I faintly remembered from my family's Brother Type-o-matic.

The name 'Andvari' comes from the original PlanetSide, where the base of my outfit, Xen of Onslaught, was considered to be stationed - which we always took pride in defending, so the name stuck with me. I threw in a few special characters I thought might come in handy back when I was designing certain parts of our website.

Featured in:

Combine a squared off version of Bank Gothic with Bladerunnner, and here comes Fade to Blak. A shout out to the sequel of a game that I spent countless hours playing, Flashback, but sadly never played. I still thought the name was great, and, happened to be one of my favorite Metallica songs.

Featured in:

One of my favorite fonts of all time, discovered when playing the Wipeout series for Playstation. I wanted to recreate this font as authentically as I could, and, add some extra weights as well.

There are several clones out there, but, none that quite so accurately capture the design. I haven't released this to the wild, yet. One side of me wants to so there's a more accurate representation of the font out there, and, on the other I feel it's almost sacriligious to do so.

Health Alliance Medical Plans

UI/UX Designer

PORTAL - WIRES

I re-entered the web industry after a little more than five and a half years in game development, and discovered how much HTML, CSS and Javascript had advanced in that time. I was lucky enough to get some freelance work at a company that allowed me to get up to speed on those skills as I worked in UX Design on their healthcare portal.

Over the next six months I developed much of the UI/UX wireframes and flows with my lead from requirements developed by our business analyst.

PORTAL - CONCEPTS

As my contract neared completion and we were wrapping things up, it was time to establish the look and feel. The first screenshot here shows a theme that could be customized by our users, where they could update the background and upload a profile photo. The flat-colored theme was created by my lead, which ended up being selected and so we worked on developing more concepts together in this style.

BIO

About Me

As a self-taught multidisciplinarian in art, interface design and development, and, user-centered design and user experience, I use my powers for good: to craft brilliant art and amazing user interfaces, while blending in my passion for great user experiences.

Self-improvement is my core tenent - I have been nurturing these skills since childhood, mostly with self-determination and hard work, but, also a bit of guidance and encouragement along the way. Growing over time like a katamari, learning bits at a time, as I roll from one thing to the next.

With this accumulated mass of experience, artistic prowess, and, an unrelenting passion to craft incredible user experiences, I bring multi-faceted value to companies and customers.

DESIGN + ART Skills
  • UCD / UX / UI Design
  • Wireframes / Concepts / Flows
  • Digital Art / Graphic Design
  • 2D Animation
  • 3D Modeling / Rendering
  • Fontography / Iconography
  • Mobile First / Responsive
Software
  • Photoshop / Illustrator / Flash
  • Axure / Visio / Balsamiq
  • Modo / Maya
  • Font Studio
DEV Skills
  • Javascript / HTML5 / CSS3
  • LUA / ActionScript
  • React / jQuery
  • PHP / MySQL
DEV Tools
  • Node.js / XAMPP
  • Sublime
  • Github / TortoiseSVN
  • JIRA / Agile Development