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/
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
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.
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.
http://weare1910.com/
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.
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.
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.
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:
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".
I don't know much about it other than what I like and don't like.
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.
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
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).
http://www.jose-f.com
theres some good stuff on here
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.
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.
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