Badge and indicator styles changing? [closed]

Question

I've noticed a change in badges and topic or product indicator design. It seems design is moving away from graphic images (such as a FourSquare type badge) to more generic looking visuals that still have a distinct difference. A couple of examples of the generic look are the badges used in all StackExchange groups and the StackExchange footer where each group has a colored square vs an icon. My guess is this is to allow easy readability on mobile and for easier programming (no image required.) Is this a design direction that is happening? I cannot find any research.

Answer 1

I think what you're noticing is a variety of things:

• Sites are minimizing the use of graphics in order to optimize for performance: fewer graphics often means a lighter page weight and faster pages overall.
• Sites are opting for HTML page elements instead of graphics to optimize for mobile: as you mention, mobile is a factor--fewer graphics means less need for resizes for smaller screens.

And finally--and most importantly in my opinion:

• HTML5 and CSS3 are playing the role graphics used to play: the adoption of both technologies is making it easier to create richer, "graphics-like" interface elements without the need for graphics. See Dan Cedarholm's all CSS button article for a great illustration of this.