Home Career & Education

UI Artist Portfolio

If you were looking for a UI artist to make assets for your game, what skills and qualifications would you be looking for? When looking at a UI Artist portfolio, what stands out to help make your decision for hire?

In my portfolio I have icons, art assets for a fantasy game, and a sci-fi menu (with a .swf example of how it works). I'm looking at making them more presentable as well as working on ideas for my next project. I don't want to get ahead of myself and go in the wrong direction. So I am asking Polycount what I should be doing. Thanks in advance!

My Portfolio
http://mitchbanks.wordpress.com/

Replies

  • Mark Dygert
    I don't mean to be an ass and I hardly know anything about UI design, but you lost me at "bevel and emboss".
  • Mitchell Banks
    Alright, fair enough. That is simply just a step to get to the look I wanted.
  • Mitchell Banks
    Mark - Is there a reason why "bevel and emboss" got you lost?
  • artstream
    Offline / Send Message
    artstream polycounter lvl 11
    I think the biggest thing for a UI designer to show is how everything will come together on the final screen, whether it's an actual game prototype, or if it's just a mock-up of the ideal final game's UI layout. You showing your process is a good start, but showing how all the elements come together would help to sell your process more. You currently have this, for your DGPX UI, but it takes a few clicks to get to the available example. Show your work first, then talk about your process. Give the viewer something to look at first, then, if they're interested in knowing more, they have your process to follow it.

    In terms of your Trollbane UI, I'm not sure what most of the icons are supposed to represent. I'm assuming the blue and orange symbols are some kind of health/mana meters, but I can't be sure. This is where something like a mock-up screen showing where your UI would lay would help to sell your work.
  • Surfa
    Offline / Send Message
    Surfa polycounter lvl 12
    I am not sure why Mark is lost with Bevel and Emboss I thought those layer options were common knowledge in photoshop.

    Anyway I like the work on the spell icons and the game trollbane but I find the DGPX to be too dull and grey. Also in the flash version there is a lot of unnecessary menus to get to final options. Throw some colour into the design and try to show off more of your flash skill as it is quite important nowadays for UI with scaleform.

    Also I would probably add some more variety to your pieces as two out of three are adventure style. Getting a good range from grunge (horror) to some very clean (minimalistic designs) is very important as employers will want to know that you can do the whole range of skills.

    Another option is to show off some css html skills as quite a few ui libraries can be skinned with css and a little html but I guess still photoshop take precedent. I wouldn't take me word for this being entirely handy though as I am not a UI artist and I am not sure what UI libraries are common practice in industry, this is just from my personally coding experience.
  • ZacD
    Offline / Send Message
    ZacD ngon master
    I'd expect a well designed website, interface design should have some cross over. If you want to go over the top you could do some mock up UI's in flash that are animated. But I'd expect some mock screenshots and you may want to use UDK's scaleform. http://udn.epicgames.com/Three/Scaleform.html
  • Snefer
    Offline / Send Message
    Snefer polycounter lvl 16
    A friend of mine is godlike at UI and crap, this is what their company portfolio looks like:

    http://weare1910.com/
  • Sandro
    http://www.behance.net/EricBellefeuille

    Check portfolio of Eric Bellefeuille. He has some personal illustration pieces there, but there are couple of cool UI projects, one of them being interface for Deus Ex.

    http://www.behance.net/gallery/Deus-Ex-Human-Revolution-User-Interface/2465641

    Behance is very good place for finding cool UI art by the way. After all, UI design is quite broad discipline and it doesn't necessarily have to be related with game art.
  • Mitchell Banks
    artstream - Thanks for your wisdom! Seriously, all of this makes quite a bit of sense to me. As far as the Trollbane UI goes, you are correct about the health/mana meters. Also, I should have assembled them correspondingly where they rightfully belong on the screen like you mentioned. I will fix that right up.

    Surfa - I'm happy that you like the icons and The Trollbane elements! I agree that DGPX is dull and grey, unfortunately, that shade of grey is what was asked of me (by the producer) as well as the design flow. More variety is a great idea, and I do like the horror theme that you mentioned, I think I will do that. I am working on learning more about HTML as well. What do you think about making a video of the UI in action?

    ZacD - Yes, a well designed website, I agree. I'm still working on making my own website, it's hard to customize some of these wordpress themes to my liking. You know what, I do have menus working in UDK with scaleform, do you think a video example would be a good thing? Or is screen shots enough?

    dustinbrown - Good recommendation, I will more into indie game teams. Thanks for the wisdom and UI examples.
  • Mitchell Banks
    Snefer - Oh yeah, saving that for reference. This is nice and clean, easy to nav around. Thanks for the reply.

    Sandro - First off, Eric Bellefeuille... awesome. I remember being at Pax and seeing his work displayed when Deus Ex was being showcased. Secondly, this website is great, you have no idea how long I have been looking for something like this. Thank you so much.
  • imyj
    Offline / Send Message
    imyj polycounter lvl 8
    Hey Mitchell,

    Here's an essay for you (I don't expect anybody else to read this so I'll address it to you! ;)

    There's little to no documentation on this area so I'll make a start now. It's too big for me to look through properly but I'll update it if I have anything to add :)

    I do a bit of UI art at work so I figure I'd chip in. Graphic design and UI go hand in hand. I've been on the hiring side so here's my advice.

    What skills would I look for?

    Graphic design skills are the top priority for me. I like to see pieces of art which not only show that the person is capable of using 2D applications but also someone who shows that they have experimented a lot and demonstrate that they are creative.

    I tend not to focus too much on how much experience people have with different programs. My opinion is that Illustrator is the toughest, so I'd put that first. Most artists tend to know Photoshop reasonably well but a small percentage know Illustrator. Surprisingly, I actually don't mind if somebody doesn't have much Flash knowledge. If you have somebody to learn from, Flash can be taught in a week or so and developed from then onwards. The real skill comes from the artist and how they put together the design.

    What qualifications would I look for?


    As with most areas in Art, portfolio comes first. I know a bunch of people without degrees.

    If I was being honest, I would look at past experience and hope to find some Mod work or some games created in your free time. I like to see something visual and maybe even functional even if it's just a video or some flat images.

    What stands out to make your decision for hire?

    If I was hiring again, I would be looking for somebody who could offer knowledge in all areas of 2D art. I looked through loads of applications and I found that I was looking for a portfolio which showed the following:
    • Experience with Photoshop/Illustrator/Flash/After-Effects
    • Vector artwork
      • Show anything as long as it looks good and isn't from a tutorial.
    • Logo design
      • Perhaps you made a logo for a family member? Or yourself? Include it in your portfolio.
    • Icon design
      • Despite looking simple, Icon Design takes a lot of work to get right. Being able to sketch ideas or freestyle™ will make you an awesome asset.
    • Web design
      • If somebody was previously a webdesigner but loves games. Or, a side project for a friend - anything is valid.
    • Promotional Artwork
      • Perhaps work created on a mod, or for a personal project, even just screenshots from your favourite game. It's the ideal place to show off how detail-oriented you are.
    • HUD/UI Mockups
    • Motion graphics
      • Perhaps you're straight out of college or new to looking for a job. You have some mock-ups but no examples of animated mock-ups. Show some motion-graphics even if it's simple text animations or a short clip with a spinning logo.
    • Photo-manipulations
      • I used to do a bunch of these and they're good because they force you to experiment with the tools available to you in Photoshop. I know for a fact that I would never have used Masks, Adjustment Layers, Smart Objects and those type of things if I never messed around with stock photos. These skills come in handy when texturing or creating mock-ups or promotional material.
    Another thing worth keeping in mind is that there are different expectations when it comes to 2D/UI art, depending on the company you choose to work for. I'll do a quick pass but I'll come back and edit this eventually.
    • Graphic Designer
      • Focuses on anything related to presentation.
    • UI Artist
      • Creation of Front-End/HUD artwork.
    • Graphic Designer / UI Artist
      • A mix of both. The best position to be in IMO.
    • UI Designer
      • Expected to take ownership over the user experience/flow. In some cases, UI Designer might also refer to somebody who purely implements the artwork that the UI Artist creates.
    All of those aside, there are a few things which will seriously set you apart from the rest:
    • Use of grids and guidelines
      • If I open up your mock-up in Photoshop and start drawing in grids, does it line up? Does your logo have any format to its layout? Using guides in Photoshop as a designer is a must. The majority of HUD mock-ups I see are quite sloppy and by doing this, you'll avoid that.
    • Animated Mock-ups in Flash
      • Might be an obvious one but it's not actually something you see that often and they're usually quite bad.
    • Animated Mock-ups in After-Effects
      • Who needs to fiddle around in Flash or Scaleform when you mimic the same effect in After-Effects? Tilt your boring, flat PSD file and 3D-alize it! Add some glows and scanlines then ship it!
    • Scaleform
      • Sure, if you can invest the time to learn how to get it working then by all means go for it but know that there are simpler ways to have the same impact :) Not all companies use Scaleform, a lot of them actually use their own software.
    • A basic understanding of ActionScript.
      • Protip: don't join a company where you're expected to create art and do code; unless you enjoy that sort of thing.
    • Localization considerations
      • Anybody who has ever worked on UI knows how much of a pain in the ass localization is. Imagine you create a box, and in this box you have to fit some text - simple right? Well not really. Different languages have different spacings and different phrases may contain more words when translated. Hint at this to win mega brownie points! Show it in a different language, who cares if you used Google translate and it's not entirely accurate? That's somebody elses job eventually.
    • Safe areas considered
      • If you use guides, then this won't be much of a problem. Different platforms have different safe areas. Even a slight hint at this being considered is mega bonus points!
    • Styleguide
      • Show me a mock-up which breaks down all of the elements which can make up a graphic. Why? Because this is how we break down what the game is about. The front-end is the first thing the player will see, so it needs to be an accurate representation of what the game is about, consider things such as the target audience and genre whilst also looking at other games like it and breaking down what it is that makes them unique to their brand?
        • Which font/s are you using? Why are you using those fonts? Did you look at other fonts? Show me them.
        • Which shapes are you using? Why are you using them? Did you explore other shapes? Show me them.
        • Which colours are you using? Why are you using them? Did you try different colour swatches? Show me them.
        • Now when you combine all of the above... how are you using these elements to communicate to the player. Do different colours appear when you roll over? Do the shapes change? Does the font become bolder? Have you considered colours and their meanings? What do the transition animations look like? Are they glitchy? Do they have static noise? Are they grungy or bloody?
        • Outline all of this stuff and break it down within an awesome looking PowerPoint presentation and send it alongside a portfolio and tell them you'll start on Monday.
    • Variations
      • Like all areas of games development, it's an iterative process. Show different colour variations, different fonts, different layouts. If it's a detailed icon with bevels and such then show a black and white silhouette version alongside the worked-up version. If it's a UI( mock-up, show the safe areas, the wireframes, the grids and the guidelines.
    • Challenge other games
      • This is something you see a lot of in the 3D world but I rarely see anybody redesign an existing game with new ideas. I did it for any company I ever had an interview for and this is what I feel made me stand out. I still have a 100% success rate so I'm putting it down to this. As an example: Are you applying to Ubisoft? What would the next Assassin's Creed interface look like? What would Assassin's Creed look like if it was an FPS? What would MediaMolecule logo look like if it was redesigned? Redesign the achievement icons for Team Fortress 2. Be original and it's easy to make up a brief based on your favourite game.
    • Spelling mistakes
      • Everyone makes mistakes, but if you're expecting to get paid to deal with text on a daily basis then make sure that all of your portfolio is free from typos; it's like a 3D artist having terrible topology or visible seams on a texture; it's just not cool.
    So... what did my portfolio have?

    I finished university and I was always into graphic design, I loved Photoshop, I knew a bit of Illustrator and my Flash skills were terrible. (I hated Flash)

    Despite a lot of peoples expectations when it comes to somebody labelling themselves as a 'graphic designer', my portfolio wasn't what you would expect. It was (and still is) a long ass scrolling page of images. Nobody ever told me it was bad so I keep it like that :)

    My portfolio had everything in it. Concept art, 3D Maya/Sketch-Up models, icons, logo, web design, HUD mock-ups, UI mockups, promotional artwork for Mods. At first glance, anybody would think that it wasn't clear which area I was looking to get a job in, people might have told me that it wasn't clear to an employer if I wanted to be a 3D artist, Concept artist, UI artist or Graphic Designer, however my graphic design skills were prominent in each and every piece. Amongst the usual graphic design pieces in my portfolio, I also had things such as character/vehicle concepts, with logos, patches and decals. A 3D environment filled with graphic design; fictional companies, banners, advertisements and interactive Flash elements. Even just the way I laid out my images it would be clear to the viewer that I took pride in the presentation of my artwork without the need for a fancy website.

    Where's my portfolio now?

    SOON.

    So I end this essay with what I started with. What's the most important skill? Show you know graphic design.

    Here's the UI Wiki I put together: http://wiki.polycount.com/CategoryUserInterface

    TL;DR:

    OH7CA.png
  • Kwramm
    Offline / Send Message
    Kwramm interpolator
    Games UIs aren't different from most UIs - usability, interaction feedback, readability are all important. Make sure your art supports this. I'd say learn traditional UI design and how to translate it into visuals. Once you're good at that, move towards game art UIs. Keep in mind that many studios hire an UI Artist and expect him to be part designer too. Or they combine both professions, or they just have no idea who does what (seen it all).

    I've seen great visuals on UIs for games, which in the end still made the UI suffer because there was no thought about the basics - usability, readability, etc. Don't fall in that trap.

    Don't just post static art - explain the thought process. Explain how "usable" your UI might be. Mock up animations and usability cases.

    I think you might do the same mistake aspiring "game art" students do. They skip the classical foundations (life drawing, anatomy, etc) and jump right into making "game art".
  • Jeff Parrott
    Offline / Send Message
    Jeff Parrott polycounter lvl 19
    Here's a good UI/HUD Artist portfolio for reference: http://hudartist.com

    I don't know much about it other than what I like and don't like.
  • JacqueChoi
    Offline / Send Message
    JacqueChoi polycounter
    Some of the talented UI artists I've worked with:

    http://www.pixelsurgery.co.uk/#/home
    http://www.carlosvk.info/
    http://www.davidicus.com/
    http://danamacdesign.com/welcome/my-work/

    And as Sandro mentioned before, Eric is pretty awesome (super cool guy too):
    http://www.behance.net/EricBellefeuille


    mmm yeah that's about it. Nobody else seems to have a website.



    :/
  • schneller
    Offline / Send Message
    schneller polygon
    Always been interested in UI design. It's really amazing how much there is to it, things that most people never consider such as usability. On my current project we've gone 'round and around on the UI, and poor design can really bring down the whole experience.

    Mitchell, I think you have a good foundation, but for me there's no "wow-factor" right now. Keep going though! You have some supremely badass inspiration in all these links.

    While this isn't strictly UI design, here's a cool folio of a friend of some friends:
    http://johnlikens.com/index.html
  • Mitchell Banks
    imyj - This is a great essay. But seriously, thanks for taking the time to type this up. This is actually going to help me, it has already motivated me to start new projects. I'm looking forward to reading more future edits. You mentioned a Styleguide, can you elaborate more on this? Are their other options than making a powerpoint? Thanks.
  • Mitchell Banks
    Kwramm - "learn traditional UI design and how to translate it into visuals"
    Can you give an example? I'm not sure I follow. I agree with you about not just posting static art. I'm looking into videos and/or interactive flash files (.swf).
  • Mitchell Banks
    Jeff Parrott & acqueChoi - Thanks! Some good examples in these portfolios.
  • Mitchell Banks
    schneller - Yeah, there is quite a bit more than I thought there would be when I first started looking into being a UI artist/designer. I agree, for most people the user experience is the most important, and I would have to agree with them. If it doesn't work or flow smoothly, then it doesn't matter how awesome the art looks.
  • jose.fuentes
    Offline / Send Message
    jose.fuentes interpolator
    Man, I'm glad I found this thread, though even if its super old. I have been a UI artist for over 5 years now, all of my work has been mobile so far. But I'm def looking to connect with other UI artists. Any feedback on my portfolio is definitely welcome

    http://www.jose-f.com
  • jose.fuentes
    Offline / Send Message
    jose.fuentes interpolator
    Here's the portfolio for a UI artist I worked with.

    http://www.bazpringle.com/?page_id=4297

    theres some good stuff on here
  • lefix
    Offline / Send Message
    lefix polycounter lvl 11
    I would say that making good looking art is a secondary skill when it comes to UI design. Your primary skill is being a problem solver.

    You have to come up with good solutions to fit alot of information into your screen, while making it look clean and tidy. Your work goes hand in hand with the game design, your job is to create a good user experience.

    Make everything intuitive. Draw the attention to the right places, or vice versa, place things where the player would expect things.

    Traditional layouting skills come in handy, knowing which fonts and font sizes to use, putting everything on a invisible grid, good spacing and use of colors. Creating consistency, which means you need to come up with a theme or style that works with different types of menu screens: Winscreens, Inventories, World Maps, etc.

    Then there is visual feedback for players. Your ability buttons probably want to flash up briefly when their cooldown has passed.
    A build button might do a quick wiggle when you don't have enough resources.
    When you take damage, the health bar doesn't just update, it highlights the amout of damage you've taken in the health bar, then it slowly shrinks away. All these kind of details.

    UI design is a conceptual challenge. A couple nice looking buttons and icons don't really do the trick for me. I expect to see multiple finished screens and how they interact. Either through many screenshots or maybe a gif, webm or youtube/vimeo video.
  • Hakaeshar
    I'm the UI artist over at Torn Banner Studios and have been doing UI for just over 4 years now. Doing things ranging from mobile to PC to console games. What I find to be one of the most important things to building an effective UI is research. Look at every medium (ie. websites, Apps, games) because it can all give you inspiration. I'm currently working on PC game UI but I look a lot at mobile apps because they have a strong sense of interactivity and need to convey their content in the most simple way possible.

    If anyone has any questions feel free to ask. Also here is my website portfolio http://thecreativecog.com/ I've found it's worked very well for me because the website itself is part of the portfolio and grabs a lot of attention.
  • ljsketch
    Offline / Send Message
    ljsketch polycounter lvl 6
    Hey everyone, I know a lot of this information was directed at Mitchell but I found it to be helpful as well. 

    Mitchell - no idea if you're still looking or not since this is an old thread. But doing mockups for the company you're applying to would help a lot, especially if you land an interview. That'd be a good way to jump the gun on getting handed a design test. I'll refrain from repeating a lot of info since the members before me made a lot of good points. The only thing I may be adding is to look outside of games for inspiration. Lots of websites, especially large companies, have great design and usability sense. Retail, communication, and technology all seem to "get it" when it comes to UX and UI, and how it relates to the customer/user.

    Here's a few of my favorite sites outside of games:
    http://www.sochi2014.lifefitnessrussia.ru/?lang=en
    http://www.burtsbees.com/
    https://www.dominos.com/en/ (the mobile app more so than the desktop site)
    http://www.fleeangrybear.com/


    @imyj - I really liked your write up! I found some similarities in myself from reading your response. I'll be revising my folio a bit more because of that :)
Sign In or Register to comment.