2

My designer is working on a flat design for a gaming portal for World of Warcraft.

We want to use icons for a sub-menu and figured using icons directly from the game would be best from a user perspective. The problem is that the icons are all 3d. Here's an example:

enter image description here

We'd like the menu to look like it's a part of the flat style but we're not sure what to do to pull it off. Also using these icons breaks any type of uniformity that a menu usually has (since all the icons are fairly differently)

We can use random flat icons because the sub-menus ARE a little generic... but I still think that using something from the game would be best for users.

Does anyone here have any input that can help us come up with a workable idea to use?

| improve this question | |
  • Redraw the icons in a flat aesthetic. – DA01 Apr 29 '14 at 5:34
  • 2
    Are you thinking of creating a flat icon for every WoW icon? If so, that seems like both a lot of work and in the end just confusing. Since the icons will be very similar. – swdev Apr 29 '14 at 7:09
  • In the example you've given, the icons are directly next to the in-game glyph they're talking about - but you say "the sub-menus ARE a little generic". As a WoW player, the menu above makes sense and your own custom icons would be weird - but the real icons next to your own (possibly unrelated) site categories would also be weird, there I'd expect your own icons. – Rob Church Apr 29 '14 at 9:09
  • @pink-diamond-square Yeah they are categories like "Stat Priorities" "Gems & Enchants" "Spell Rotations" etc... They have icons in the game that could "resemble" that selection, but there isn't an icon that directly covers those categories. I wanted to avoid using something custom but I think it might be the best choice. – user22805 Apr 29 '14 at 16:41
  • IMHO, as a hypothetical user of said portal, I would prefer to have the actual icons from the game. I would instantly recognize the icons and therefore like your portal! – Douglas Denhartog Apr 30 '14 at 2:22
3

I'm feeling where you're coming from as far as making the users feel comfortable through familiarity, but ask yourself:

Will using icons that look just like what's used in game really be a good way to represent the functionality for my interface?

I suggest that you focus on using the color scheme and style of the game and icons in the interface to create a familiar feel, but keep the icons purpose-specific.

Look at the color scheme, image theme, and button style to format your interface and its icons. Decide on a happy medium between functionality and the desired theme.

Your users will be far more impressed by on-topic icons themed in the style of the game without copying the actual icon designs.

Edit: If the icons in question have exactly the same functionality / intended purpose as the ones in the game, then there's certainly nothing wrong with using the same designs in the style of your interface.

Good luck!

| improve this answer | |
  • I would prefer to have the actual game icons. Why force me (a user) to learn a whole new set of visual associations? – Douglas Denhartog Apr 30 '14 at 4:03
  • @ddenhartog OP mentions some of this stuff being "fairly generic." - If it were the case that these icons represented the very same in-game functionality, I would suggest using the icons that users know. I simply mean for the OP to not hinder the meanings of the icons by attempting to use in-game icons for purely decorative, style purposes, rather than functionality. – CuriousWebDeveloper Apr 30 '14 at 10:09
6

The icons should match the overall aesthetic of the UI. If you're going for a very flat aesthetic for your UI, the icons should follow along.

So if you're using this subject matter:

enter image description here

Redraw it so it fits your flat UI (really quick/rough example):

enter image description here

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.