Designing for the Changing Web
by Dan Carvajal | September 24th, 2012
With last Tuesday’s announcement of the addition of “header images” to Twitter, another graphic design dimension has been added to the social network, but this time it’s different. Gone are the days when focus could be placed on designing graphics for social networks solely with consideration to the traditional web browser. Today, every platform must be considered, from smartphones to tablets. It’s a changing web out there.
The recent twitter changes produces two challenges for designers.
- Designing a profile icon that is recognizable and scales across multiple form factors.
- Designing a header image that works on multiple form factors.
The new header forces a change in the default profile photo size; on any twitter page with headers, the profile photo is now smaller. Because of this change, we are no longer able to use the old Market Aces profile photo. We designed a new one with emphasis on being recognizable whether someone is on the web or on a smartphone.
The photo went through a series of designs.
With these early designs, recognition was still an issue, particularly when scaled down on smartphone apps. A few designs later we came up with this:
It scales across devices, but is distinctly recognizable as being a Market Aces property.
The next challenge was the profile header. The header needed to contrast the bio text, which is automatically white, and to catch the eye.
The total package scales to multiple devices but maintains the Market Aces brand look and feel, a cross-section most organizations will have to feel around for.With many more likely changes coming how we connect digitally with people, designing for a multiple devices will be critical. See the whole effect on the MarketAces twitter page.