We’ve moved. Back40’s new address is 2513 S. Kelly Suite 120 Edmond, OK 73013

Twitter & Facebook icons: standard or styled?

A couple of Thursdays ago we launched the redesigned Oklahoma City Zoo Amphitheatre website. It went smoothly. The next day, we had no Zoo Amphitheatre phone calls. We like that. Then after a quiet weekend (we like that too), we received a revision request from the client. They wanted us to “standardize” the Facebook and Twitter icons we developed for the website.

By “standardize” the client meant that they wanted the logos to be displayed in their original look and feel – they reasoned – so they would be most recognizable. Did we miss something? We ask our clients about their social media plan. Always do. We want to know their social media strategy and how we can integrate the strategy into their redeveloped web presence.

Social media icon design - Girl Scouts OKC

Social media icon design - Casino guru

The Facebook and Twitter icons we used were color coordinated with the rest of the website and were positioned ‘top right’ and ‘bottom right’ in the web page layout. From the information we gathered during the design meeting, we felt that we had adequately addressed the importance (in graphic treatment and position) of the social media icons. The thrust of the site was promoting and displaying which bands are coming to the Zoo Amp. Everything else was secondary – but that leaves an awfully big “secondary.”

The client signed-off on the web page design. And the pages went into production and subsequently launched. And after we received the icon revision request we promptly reworked the icons as they requested and updated the website with the new graphics. At no charge to the client.

Social media icon design - Momma Counts

The issue at hand solved, but a bigger question lingers, what’s a web designer to do? Most of our clients want to promote their Facebook and Twitter accounts, but are we stuck with these icons ‘as is’ forever? Do our web designs always need to take into account these little standard squares in their original form? Does every website we design need to color coordinate with the Twitter and Facebook shades of blue? And what about other social media icon colors? Do our layouts need to accommodate these square elements? Or can we manipulate, mutate and torque these logos to be part of the design vision. If so, how far can we go? It seems to me we have two levels of re-development.

Redesigning while keeping a relational element:

  • Reduce the size of the icons. Reducing the size of the icons will help minimize their impact of other web page elements. You see this treatment often with a clumping of social media icons. Most often arranged horizontally all retaining their ‘factory’ colors and style.
  • Change the color of the icons to match the website theme. This is a very popular way to integrate the icons into the website. The icons are still recognizable in unaltered bounding shape and icon design – just now they’re purple or chartreuse. BTW, I saw the most lovely shade of chartreuse today.
  • Change the outside shape of the icons (square to circle). We’re seeing more and more of this abstraction. This is usually derived from the theme of the web page design elements. I’ve seen social media icons bounded by circles, ovals, hard edged squares and rectangles.

Social media icon design - Gordon Cooper Technology Center

Social media icon design - Farfalla Wine

Social media icon design - Stages Health OKC

All of the above transformations can be mixed and matched. But the interior of the icon (example: the ‘f’ for Facebook) will be left untouched and easily identifiable by the website visitor. These methods take the icons out of their most recognizable state, and in turn give the designers a little wiggle room to flex their creativity. When enhanced thoughtfully, the icons can add to the design direction, rather than fracture it.

Restyling without keeping much relational elements

Next level re-development can be called stylization. Taking the essence of the icon and redeveloping it completely to merge with the web page design. This takes more development time and should probably get some sort of approval by the client before undertaking, because if the client ‘no likey’ – you just ate some hours.

Social media icon design - Freymiller Trucking

Stylization of the icons may be more time consuming, but can help achieve a fully integrated custom look of the website design – and achieve a nice by-product for the the web designer: happiness. Amy Sharp shares, “As a designer I feel it’s important to pay attention to every element on a website design. Nothing should just be stuck on the page as an add-on. When appropriate I even like styling social media icons so that they are fully integrated into our clients custom website design.”

This may seem like a lot of talk for such little things, but we believe web pages have a purpose. And our mission is to focus the visitor’s attention – all 8 seconds of it – to whatever it needs to be.

Web Designer Suicide
Back to Blog