UI and Graphic Design

ae. · Jan 2012

Hey Guys,

Just making this topic to see if there are people in this community that are into these two things.

I have always wanted to get into UI design and Graphic design in general making your own logos/text types and Game Icons i was wondering if there are any good Blogs, Sites and Books I could read or Browse that focus on these two things, even communities like polycount that are out there.

Thanks again,

Arman

System · Jan 2012

Two personal favourites;

www.faveup.com

www.greyscalegorilla.com - technically motion design rather than straight graphics but still a fun blog and some awesome podcasts too.

ae. · Jan 2012

wow those are nice thanks man

Ex-Ray · Jan 2012

I've got these books which are great:

[ame="http://www.amazon.com/Basics-Design-Layout-Gavin-Ambrose/dp/2940373345/ref=pd_sim_b_5"]Amazon.com: Basics Design: Layout (9782940373345): Gavin Ambrose, Paul Harris: Books[/ame]

[ame="http://www.amazon.com/Typography-Basics-Design-Gavin-Ambrose/dp/2940373353/ref=sr_1_1?s=books&ie=UTF8&qid=1327178087&sr=1-1"]Amazon.com: Typography (Basics Design) (9782940373352): Gavin Ambrose, Paul Harris: Books[/ame]

Some video game UI/icon related ref:

http://lucas.hardi.org/designing-the-warhammer-online-ui/
http://mattciaglia.com/r3.html
http://www.ludodoesjudo.com/

ae. · Jan 2012

wow those are great links as well Ex-ray thanks

RAL · Jan 2012

Here's a cool one:
http://www.jamiemartindesign.co.uk/Graphical_User_Interface.html

moose · Jan 2012

http://www.colinpost.com/

Fuse · Jan 2012

Haha, I actually have some relevant books from college. Typography etc .. I can dig them up and bring them to the office on monday

ae. · Jan 2012

eggscellent! that would be dope if you could

fmnoor · Jan 2012

http://www.colourlovers.com/

got some good places to start for picking out colors and patterns. I always go back to this when I am looking for something eye catching

Ben Apuna · Jan 2012

You might be interested in Stanford's upcoming Human Computer Interaction course starting at the end of the month.

I'm not too sure what the visual design to code design ratio will be, but I'm signed up for it either way.

Dan! · Jan 2012

http://www.bestflashanimationsite.com/archive/

archive of flash sites- tons of motion graphics and UI eye candy

Acumen · Jan 2012

Woa, I was always hesitant to open up a thread like that. UI game design is such a huuuge field, yet I only encountered one designated portfolio so far.
So 2-3 links in here are super precious. Thanks for bringing that topic up, ae.

Still can't believe there's so few focussed portfolios on game's UI stuff out there, though

Ged · Jan 2012

Most of the time if I have to design a ui or icon at work I just look at games and websites similar to the one we are making and see what they have done right or wrong and try to keep it simple and beautiful, also just reference the topic of choice eg paintball look up paintball gun design. There is a surprising amount of ui required for iphone apps, main problem I face all the time is feature creep eg you design the whole interface and it looks awesome and then people decide they want a coin shop and advert spaces on 2 of the screens and all of a sudden your neat little ui is screwed.

Eric Chadwick · Jan 2012

Cool links, added this to the wiki. Also, an older thread Interface design.

cptSwing · Jan 2012

digging the links. especially liked the breakdown by that Warhammer MMO guy..!

ae. · Jan 2012

yeah all the links are awesome im glad i made this thread :P

Ex-Ray · Jan 2012

Acumen wrote: »

Still can't believe there's so few focussed portfolios on game's UI stuff out there, though

Yeah I know what you mean, I've got a friend who's a graphic design who wanted to know more about UI for games. So I helped by trying to find examples for him, needless to say I didn't find that many.

Here's a few more game UI/icon related ref that I found:

http://vinceshayer.carbonmade.com/
http://www.renascent.nl/ (some Killzone stuff)
http://www.behance.net/gallery/Forza-Motorsport-3/658283
http://www.behance.net/gallery/Forza-Motorsport-4/2704011
http://www.gabrielmourelle.com.ar/web/home.html
http://hayleybrant.co.uk/projects/
http://www.behance.net/gallery/Ultimate-Marvel-Vs-Capcom-3a/2307788
http://www.behance.net/gallery/Deus-Ex-Human-Revolution-User-Interface/2465641

ae. · Jan 2012

Ex-ray those are some awesome links! giving me so much inspiration!

imyj · Jan 2012

I'm a Graphic Designer in games

I should really contribute to that bare Wiki page ;p

As far as HUD/UI design goes, I'd actually suggest looking at the following:

Symbol - [ame="http://www.amazon.co.uk/Symbol-Angus-Hyland/dp/1856697274"]Symbol: Amazon.co.uk: Angus Hyland, Steven Bateman: 9781856697279: Books[/ame]

Los Logos - [ame="http://www.amazon.co.uk/Los-Logos-v-R-Klanten/dp/3899552229/ref=sr_1_3?s=books&ie=UTF8&qid=1327279692&sr=1-3"]Los Logos: v. 4: Amazon.co.uk: R. Klanten, Hendrick Hellige: 9783899552225: Books[/ame]

Dos Logos - [ame="http://www.amazon.co.uk/Dos-Logos-R-Klanten/dp/3899552660/ref=sr_1_5?s=books&ie=UTF8&qid=1327279692&sr=1-5"]Dos Logos: Amazon.co.uk: R. Klanten, N. Bourquin: 9783899552669: Books[/ame]

Tres Logos - [ame="http://www.amazon.co.uk/Tres-Logos-R-Klanten/dp/3899551583/ref=sr_1_4?s=books&ie=UTF8&qid=1327279692&sr=1-4"]Tres Logos: Amazon.co.uk: R. Klanten, N. Bourguin: 9783899551587: Books[/ame]

They come fairly cheap, they're a huge source of inspiration and are perfect books for your coffee table / desk. I have them all on my desk at work and often look through them on a daily basis

I mainly just look at shapes, styles and colour usage and how I can interpret them to meet a brief. Same goes for branding and creating logos for real-world/fictional companies.

When it comes to game-specific Graphic Design / UI, there isn't really much documentation. This is something I aim to rectify (tutorials/notes/tips) since it's quite a niche area and there's a lot of demand for the role.

If you have any specific questions then let me know

megalmn2000 · Jan 2012

I've learned graphic design by observing other's works.

Behance network (CGHub for designers)
http://www.colinpost.com/

Some of my bookmarks you can get inspired:
- http://www.delicious.com/megalmn2000/motion%20design
- http://www.delicious.com/megalmn2000/graphic_design
- http://www.delicious.com/megalmn2000/motion_design
- http://www.delicious.com/megalmn2000/web_design

doc rob · Jan 2012

ffffound
Brand New

Books:
All of Tufte's stuff
Understanding Comics

ae. · Jan 2012

imyj wrote: »

When it comes to game-specific Graphic Design / UI, there isn't really much documentation. This is something I aim to rectify (tutorials/notes/tips) since it's quite a niche area and there's a lot of demand for the role.

If you have any specific questions then let me know

Yeah there seems to be a lack of documentation regarding game specific Graphic design, iv always wanted to make my own UI's for games that i play basic mods really.

Do you have any good start off points whats the best way to get started? what programs would i need to make a decent layout/designs/ui?

megalmn2000 · Jan 2012

Photoshop is the best for bitmap editing.
Illustrator is widely use for vector graphics (scalable graphics).
InDesign for page layout.
Flash for making interactive menus / ui.

imyj · Jan 2012

I'd say get to grips with Illustrator and Flash. Most people know Photoshop well enough to do the basic tasks of creating mock-ups. The real skill comes in being able to do everything you do in Photoshop; in Illustrator. The next step is taking your vector graphics from Illustrator into Flash and animating them. There are example files in the UDK SDK which I stumbled upon that give you a good idea of how HUD/UI elements work as well as any code attached. Not all companies use Flash/Scaleform so a solid grasp of Graphic Design is a good start. The main thing about Flash is that it's timeline-based animation, which is perfect for mock-ups. Even After-Effects is good to know for this.

The best way to get started is simply to give yourself some sort of brief to work to. When I was a student I used to make mockups for how I would redesign interfaces from my favourite games. By doing so, you'll gain an understanding of layouts. From there, you can play with colours and styles in order to make something entirely different. The most common issue I see in the portfolios of those looking to become a Graphic Designer in games is that they just put text on a background image and call it an interface. There's much more to it than that. Even down to things such as optimization of vector graphics in UI.

If you can't think of any briefs then you could sign up at: www.99designs.com and enter some competitions for fun or simply work to some briefs in your own time. They are live briefs and they cover all sorts of areas. They're a good challenge when you're running out of ideas.

ae. · Jan 2012

Hey Liam,

Thanks for the writeup man! really got me pumped to dive into UI creation feet first. I think taking your favorite game and redesigning the UI for it is a good point for me to start and grabbing the programs you listed and figuring them out.

Thanks again!

Eric Chadwick · Jan 2012

imyj wrote: »

I'm a Graphic Designer in games I should really contribute to that bare Wiki page ;p

Would love some help with this! http://wiki.polycount.com/HowToContribute

Omer · Jan 2012

Excellent advice Liam!

When you start looking at 2D game art there is actually a lot of content involved in the creation of menus / UI. Try and list all the elements you can see on a page splitting them into categories like this:

-Headings / Titles
-Content / menu items
-Icons
-Images
-Controller Buttons/hint text
-Backgrounds
etc.

Looking at menus you'll come across something that would fall into one of these. Once you know what elements are common, you can go about designing an initial layout for any given page and dedicate space for the worst case scenario (we always look at the longest translations with all button hints displayed at once).

With regard to HUD it will depend on the type of game, but will include some basic elements which again can be categorised in a similar fashion. For example, a FPS game:

-Ammo counter
-Minimap
-Objective icons
-interaction prompts
-subtitles / hints
etc.

I could go into more detail but I think the wiki would be a more beneficial place for that.

ev149 · Jan 2012

Surprised nobody mentioned http://dribbble.com/ yet. It's invite only to submit stuff, but you can sign up and view others' work, follow them, and like their "shots."

Xoliul · Jan 2012

ISO50

CompSchool212 · May 2012

If you're really interested in graphic design, you may want to consider going to school to learn more about it. There are a lot of things you could learn in the classroom that you wouldn't be able to discover on your own. Anything related to computer science is really good field to go into right now. If you need some help finding a school, check out my website, mastersinsoftwareengineering.net.

Chimp · May 2012

i disagree with picking up flash is on it's way out and I am personally focusing on getting a working knowledge of html5 which seems like it will be the standard for animated 'flash style' websites.

Pick up the demo of Hype for mac if you can- its actually very good- a design-focused editor with html5 tools (it has a timeline like flash)

UI and Graphic Design

Replies