By David Rose

THE GENERALIST

WHY UI ARTISTS ARE IMPORTANT

 • Provide valuable information to the player• Help carry the story-line/mood of the game• UI can intensify user-experience by keeping the user

in the moment• UI is the glue that binds our game to it's brand...it's a

visual reinforcement 

THE RULES OF USABILITY & VISUAL DESIGN

• Keep it simple• Keep it handy • Keep things organized• Try to keep with industry trends• Be project/brand consistent• Use dynamic menus• Focus test EARLY • Remember localization • Be consistent• Be clear• Don't forget your what they taught you in school• Know your user

 

AVOID COMMON UI ART MISTAKES

• Make those fonts highly readable• Remember the W's and localization  • Hide items • Design for best and worse case• Remember action-safe and title safe

UI ARTISTIC INSPIRATION

• Challenge yourself but don't reinvent the wheel• Evaluate the competition• Pay particular attention to the good stuff • Ask yourself what tools may have been used• Note user reaction

NON-GAME INSPIRATION

•  DVD Menus • Web Design• Sports/News Graphics• Movie Introductions and End Credits• Music Video • Print• Handheld Device • Information Signage

GO WITH THE FLOW

• Helps design• Points out flaws in usability• Outlines the screen types• Helps everyone keep track• Helps QA develop a test plan• Can be a visual guide for stage of completion

TOO MANY COOKS IN THE KITCHEN

• UI "stew" can be delicious if highly controlled• Document! Document! Document! • Don't spin your wheels• Raise the red flag! 

 

THE ART CRITIQUE

• Get early input and buy in• Get people to explain their feedback• Organize the feedback• Track the feedback• Remind everyone of the past

DEVELOPMENT TIPS

• Have a clear visual direction• Follow strict procedure • Talk with all departments• Learn from your mistakes• Communicate lessons learned• Make time for experimentation and iteration• Get in-depth feedback in user-testing• Prioritize

ITERATION - THE KEY TO GOOD PROCESS

• Learning is just as important as planning and implementing• Paper-prototype• Only implement what is absolutely necessary

IDEAL PIPELINE

1) 2)

3)APPROVAL

STAGE 1 - SKETCHING & DESIGN

THE DESIGN

• Get involved• Ask questions• Simple is better • Pictures can be louder than words • Let the artists art-direct• Ask who the desired customer is

STAGE 1 - SKETCHING

• Don't waste time• Start with lots of ideas• Get many people involved • Make the sketches clear• Help solve problems visually• Keep inspiration sources handy• Ask about the flow

Try lots of ideas quickly.

Use post it notes to keep elements fluid. This will come in really handy for early user flow testing.

PAPER TESTING

STAGE 2 - THE WIREFRAME

STAGE 2 - THE WIREFRAME

• Don't worry about making it "pretty"• Avoid font size surprises• Remember title-safe and action-safe• Make it interactive if possible

Wireframe Example

STAGE 3 - BUILD IT

APPROVAL

DESIRED TOOLS OF THE TRADE

• Easy ingame previewing • Access to basic scripting and navigation functionality• Key frame animation and scripting• Easy and flexible asset management• Effects and blending modes• Easy naming and tagging conventions

Here's a list of possible desired tool features:

Built Art Assets

A JOB WELL DONE