App UI Design Questions

dystopianghost

Hey Guys,
So I am sadly facing layoffs at my current company where I am an environment artist so I have begun looking for new ventures, I was contacted last night by a close friend, who asked if I would be willing to give app design a try I agreed that it wouldn't be out of the realm of possibility. I was just curious if any of you guys have done any app design, and if so whats your exp with it. Are there any great resources out there that I need to be familiar with? Any help is appreciated.

Eric Chadwick

Do you mean UI graphic design? Or designing what an app is going to do?

Eric Chadwick

I worked on some UI art for a few mobile apps. This is a great resource for designing app interfaces for the Google Play store.
http://www.google.com/design/spec/material-design/introduction.html
More: http://developer.android.com/training/best-ui.html
Apple has one for their store too.

MOAR
http://wiki.polycount.com/wiki/User_Interface

dystopianghost

Sorry UI Graphic Design 

Eric Chadwick

OK, renamed your thread title, should help you get more feedback on this. Good luck!

dystopianghost

Thanks Man, also thanks for that info

LiamWong

It's a pretty broad topic. Are there things specifically that you're looking to learn more about?

dystopianghost

Lol yeah, sorry about that. Specifically I am not sure I was really just trying to get a better understanding of what UI design for mobile apps entails. Mainly trying to find out softwares being used, a possible workflow. Stuff like that

Broadway

Sorry to hear about the layoffs man. It sounds like you're talking about a UI/UX (UX=user experience) position. If so, I worked in UI/UX at a big company on their internal software for 2 years so maybe I can point you in the right direction (if the position you're looking at is not UI/UX, ignore the rest of this post :P ). It's a pretty fun job and not that different from making UIs for games - really game UIs should have well-designed and researched UX the same as mobile/commerical apps, so the main difference in the process was just the visual design of the UI.

Please note that I'm NOT an expert in this field, just a guy who did it for a while. That being said I can try to give you a general outline.

A good place to start in getting an idea of the thinking behind UI/UX design is the book Don't Make Me Think:

http://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515/ref=sr_1_1?ie=UTF8&qid=1462514485&sr=8-1&keywords=don't+make+me+think

Although you can pretty much get the point without reading the book - users shouldn't have to puzzle over how to accomplish a goal by using your UI. It should be intuitive enough that they don't consciously focus on the UI, but only on the task at hand. That's basically the book in a nutshell. It also goes into how to run simple usability tests with sample users if you're unfamiliar with that concept. But that really just boils down to:

1. get a representative user to test your prototype UI 

2. ask them to complete a series of tasks without giving any hints about how the UI works

3. write down what they do

4. realize all the false assumptions you made when designing the UI, correct them in a new version, repeat

There are a lot of useful articles on https://www.nngroup.com/ that can give more info on testing as well as good and bad UI patterns for use in specific situations. They have done the legwork already when it comes to a lot of common UI pitfalls. Also the UX stackexchange is quite good: http://ux.stackexchange.com/ 

As for visual design that's kind of up to your tastes, but you can at least get a feeling for the current graphic design zeitgeist by checking out dribbble.com. I won't say that you'll get the same kick out of designing slick UI visuals that you would from making a badass Ice Dragon Knight model, but it IS quite cool to turn an ugly programmer-UI mess into a modern-looking sexy UI (sorry programmers .

That being said, in my experience (and IMO the correct way to do it) the visual design is waaaaaay secondary to the functionality/usability. Not to say you shouldn't make it look as awesome as you can, but it's hugely more important for it to work well.

Depending on the company, there may already be UX people, and they're only looking for graphic designers (UI people) for the visuals. In my experience it's much more common for there to be combined UI/UX designers, but bigger more tech-savvy companies are probably more likely to split the roles. When I had this job I did both at once.

When it comes to workflow, everybody's different but it usually goes something like this for me:

1. Understand what I need to build - what does the user need to accomplish by using this UI?

2. Interview users and Subject Matter Experts to make sure you really understand the task at hand, and any necessary context for it (Subject matter experts - SMEs - are people who understand the problem domain - if you're making an app for accountants, you'll need an accountant to tell you what all the accounting terms mean. We don't need SMEs in games because, well, we're all game experts). Some companies have people whose entire job is to help you record all the stuff you find out in these 2 steps; they're called requirements analysts

3. Paper sketch of proposed UI that fits the user's needs and allows for the task to be completed - if possible, run this by the users/SMEs

4. Working prototype of the UI. I use a program called Axure for this, but there are lots of options like Balsamiq or just straight up HTML/CSS/jquery to name a couple. 

5. User testing with the protoype; iterate design based on test results

6. Mock up final "pretty" UI for coders to implement. We used Illustrator at my old gig since it was standard for the team but I prefer Photoshop.

There's also a lot of reviews with other UX team members (if they exist) as well as coders sprinkled into this process.

How this goes will really depend a lot on the team and the types of apps you're designing. Working with 2 coders in a startup office will be way different than working with 20 offshore coders in India who work while you're asleep.

It's a really fun job and very social since you're constantly interviewing people. It requires a ton of logical, organized thought and lots of problem solving. Most of the time it feels like piecing together a giant puzzle.

Much like art, you have to be great at accepting criticism. You'll also be working closely with coders, as you probably already are as a game artist, so being able to compromise effectively is hugely important. And of course by compromise I mean: always do what is easiest for the programmers, unless and until you are in a situation where you MUST ask them to do something really difficult, so they know you have their back and will be willing to help you out when you need it . 

Perhaps unlike art, your user testing will often give you concrete evidence that one design is better than another, so you can expect to sometimes defend your proposals when you can prove they're optimal.

I think it's a cool career path for sure. I only have a few data points from people I know personally, but based on those it seems to pay quite a bit better than game art. You will also probably find that your background in games is a big plus, particularly if you've worked on game UIs before. There are lots of great UI patterns in games that can be applied to other types of software and I believe people with gamedev experience bring a lot of unique perspectives to the table in commercial UX positions. By the same token, you'll probably find that the more rigorous UI/UX approach you'll learn in a job like this will be a HUGE help if you ever get back into games and need to make game UIs.

Anyway. I hope I'm describing the sort of position you're looking at instead of wasting your time with walls of text. Best of luck!

Eric Chadwick

What a great post! Thanks for sharing your insights Broadway.

dystopianghost

Thanks Broadway, awesome post and alot of insight into the world of UI. I just purchased the book you recommended, looks like it might help out alot.  

fearian

Hey, I'm a 3d artist at a small mobile studio but over the last year I've ended up helping out with UI on the project. I won't pretend to be UX expert and I don't do this every day. That said, here are some quick tips:

Get to know illustrator well. Vector graphics are super key. There are so many times you need x graphic but resized in a way you never considered when you first designed it.

Get to know the sprite sheet workflow for your engine of choice, or more likely unity. Similarly have a go at creating different action states for buttons, drop down menus - anything interactive. Creating animation and movement is nearly as important as the UI graphics themselves.

Pintrest and Behance for reference. There is some beautiful stuff out there. Just make sure you can keep a consistent style throughout a project!


Edit: also when I saw guys doing UI work a couple of years ago it looked quite tedious. Now I find it really fun! go figure.

cptSwing

Great information in this thread, cheers guys. Polycount for the win!

dystopianghost

Oh yeah POLYCOUNT FTW lol

Broadway

Cheers, glad you found it helpful!

Also I forgot to mention one thing, I found this book super helpful in getting more familiar with graphic design when I started that job:

http://www.amazon.com/Non-Designers-Design-Book-4th/dp/0133966151/ref=sr_1_1?ie=UTF8&qid=1462554835&sr=8-1&keywords=graphic+non+designer

It has a lot of pointers that I think can be applied to many forms of visual design, including stuff like concept art, so it's a win-win