UI Designer
Hi all,
first, I'm a total beginner regarding Video Game Design.
In short:
Where can I find some training/tutorial/books regarding UI design?
I'm a beginner and would need to start at the very basics.
I would also appreciate it if you could tell me some forums regarding UI design or game design in general, I know this is more a Game Art forum, but someone suggested to ask this here.
Thank you all in advance.
first, I'm a total beginner regarding Video Game Design.
In short:
Where can I find some training/tutorial/books regarding UI design?
I'm a beginner and would need to start at the very basics.
I would also appreciate it if you could tell me some forums regarding UI design or game design in general, I know this is more a Game Art forum, but someone suggested to ask this here.
Thank you all in advance.
Replies
stuff like what kerning is, how elements transform and move (ease in and out) etc.
Basically I would like to be able to do everything from design to function.
I believe I'll learn design principles, page layout, typography, Adobe Illustrator, Photoshop first.
Does one use Flash OR Scaleform or are they both part of the pipeline?
Just to get a good overview: after that should I go with Unity or UDK to develope User Interfaces (I know, early to ask but still I would like to know it
I'm more interested in UI's for third person games than FPS UI's. Although I somehow would like to be able to create all kinds of UI's.
Thank you.
I HIGHLY suggest studying web design, especially rich media sites because every site is itself a UI. Page layout is useful, but UI's are not static pages, they're interacted with. Your goal will be to take a given problem, and design a way for a total stranger to solve it as easily as possible, without knowing exactly how that stranger will approach it.
As others have said, pick a focus; design or code. You'll learn both, but end up spending a lot more time with one than the other, so try and figure out which you want that to be. (You don't want to wrestle back and forth for years, trust me.)
For software: Flash, Photoshop, and Illustrator in that order.
For programming languages: Actionscript (Flash's programming language), Javascript, HTML, and CSS. HTML and CSS are the easiest, but Actionscript is the most serious/powerful. Javascript is a lot like Actionscript lite.
I know Flash is getting phased out in the web world, (I've stopped using it for most web jobs altogether) but it's migrating toward more heavy-weight tasks like small 3d games, UI's (duh), and standalone applications for desktops and mobile OS's.
Scaleform is actually an extension of Actionscript. Basically, you code your UI with Actionscript, in Flash, using the imported Scaleform code library (which supplies code for controller inputs, engine functions etc). You then compile your Flash movie into a SWF and drop it into the corresponding folder for your game. UDK reads the Flash movie and if all goes according to plan, you've got yourself a UI.
To get started, write yourself a portfolio site from scratch to post your work, no prefab pages allowed. It doesn't have to be amazing, just a well formatted place to put your projects for others to see. Google things like "learn HTML" or "learn CSS", there's plenty of resources out there. (The W3C site is particularly useful for getting started.)
When you've done that, get Flash and start doing tutorials from
http://www.gotoAndLearn.com
It's the single best Actionscript learning resource out there. (Scroll to the bottom for the more basic stuff.)
For books, I suggest the O'Reilly Cookbook series...
[ame="http://www.amazon.com/ActionScript-3-0-Cookbook-Application-Developers/dp/0596526954/ref=sr_1_1?ie=UTF8&qid=1333852819&sr=8-1"]Actionscript 3 Cookbook[/ame]
[ame="http://www.amazon.com/Web-Site-Cookbook-Solutions-Administering/dp/0596101090/ref=sr_1_1?s=books&ie=UTF8&qid=1333855009&sr=1-1"]Website Cookbook[/ame] etc.
There are plenty of design books out there. Points of interest are grid systems, typography, color theory etc. You can also learn a lot from blogs and looking at finished works. Here's some inspiration...
http://www.thefwa.com
There's a LOT to learn and understand, but when you're done, you're certainly not confined to just games. It's also a field that's constantly growing and changing significantly from year to year. It's a lot of fun though
Enjoy!
And last but not least, HTML, XHTML or HTML5... bit confused :-) I guess HTML5 and CSS3.
Same for CSS, always go with the newest if learning from 0?
Or rather, notepad++, which can be found here and has some nice features such as recognizing HTML/CSS tags, collapsible tags so you don't have to scroll as much and there are a bunch of plugins (but the official site is offline atm, dunno why).
HTML XHTML and HTML 5 are like American, British and Australian. You don't have to follow the rules for each super-duper strict. I think that 95+% of websites don't have perfectly valid html, and still work fine. The homepage of polycount for example, has a dozen or so 'errors' but that works just dandy. There are some new things in HTML5 that are interesting and which weren't found in earlier versions, but those tend to be more complex functionality so you might want to start at HTML 4.
CSS, I'd suggest you to start looking at CSS2, because A, most things of CSS3 haven't been finalized yet, B, the browsers haven't implemented them (properly) yet, and C, people haven't downloaded these browsers yet. Don't worry though, CSS3 is mostly an extension of CSS2, so it's not like you have to learn 2 completely different things.
And I also recommend looking at Flash. Probably even more so than HTML because it actually gets used in game workflows and HTML doesn't (well... it does, but rarely) but more importantly it's much quicker to throw stuff around in and it's much more active/animated. As a bonus, you can easily import things from illustrator.
Also, look for lots of reference, and read books and articles. Also ones concerning with physical interfaces (stuff like microwave buttons and dials) and ergonomic babble. That way you'll come across some really useful information.
Example: did you know the windows start button and the [x] are in the corners because those are the fastest to reach? You just throw your cursor in the right direction and it'll stop at the edge, instead of having to move, look, correct, look again, correct more, hit button. (also, but this is speculation on my part, it's the bottomleft and topright because those are the easiest to reach with a right hand, and humans are predominantly righthanded)
I've purchased[ame="http://www.amazon.com/Learning-ActionScript-3-0-Beginners-Guide/dp/059652787X/ref=pd_bbs_sr_1?ie=UTF8&s=books&qid=1208191030&sr=8-1"] this book[/ame] as Kindle edition.
So far it's pretty awesome.
*hits nail on head*
http://wiki.polycount.com/CategoryUserInterface
For games programming Scaleform is currently the most popular solution and as it was said previously it is Flash based. Iggy from RAD game tools is also Flash based and it doesn't appear to be very popular.
Of the HTML-based solutions Awesomium is the older one and is mostly used for in-game browsers.
Coherent UI (DISCLAIMER: I work there) offers full HTML5 and CSS3 support and high-performance rendering so is more suitable for general game UI design.
Both are free to try and have indie licenses so you can try them if you are curious to see how things work in game projects.
My suggestion is to work on your HTML skills as they can be put to use in many more areas of not only game development, but IT in general.
If you are interested in a visual editor take a look at Adobe Edge.