Facebook has given its friends icon a feminist redesign

&Tab;&Tab;<div class&equals;"wpcnt">&NewLine;&Tab;&Tab;&Tab;<div class&equals;"wpa">&NewLine;&Tab;&Tab;&Tab;&Tab;<span class&equals;"wpa-about">Advertisements<&sol;span>&NewLine;&Tab;&Tab;&Tab;&Tab;<div class&equals;"u top&lowbar;amp">&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;<amp-ad width&equals;"300" height&equals;"265"&NewLine;&Tab;&Tab; type&equals;"pubmine"&NewLine;&Tab;&Tab; data-siteid&equals;"111265417"&NewLine;&Tab;&Tab; data-section&equals;"2">&NewLine;&Tab;&Tab;<&sol;amp-ad>&NewLine;&Tab;&Tab;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;<&sol;div><p>When Facebook design manager Caitlin Winner started at the company&comma; she noticed something about the Friends icon on the site&period;<&sol;p>&NewLine;<p>She felt compelled to act&comma; and has now spoken about how she went about changing the look of the icons&period;<&sol;p>&NewLine;<p>&OpenCurlyDoubleQuote;As a woman&comma; educated at a women’s college&comma; it was hard not to read into the symbolism of the current icon&semi; the woman was quite literally in the shadow of the man&comma; she was not in a position to lean in&comma;” she says in a post on Medium explaining the change that has been made&period;<&sol;p>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;londonglossy&period;com&sol;wp-content&sol;uploads&sol;2015&sol;07&sol;image95&period;jpg"><img src&equals;"http&colon;&sol;&sol;londonglossy&period;com&sol;wp-content&sol;uploads&sol;2015&sol;07&sol;image95&period;jpg" alt&equals;"Facebook Feminism" width&equals;"600" height&equals;"208" class&equals;"aligncenter size-full wp-image-77051" &sol;><&sol;a><&sol;p>&NewLine;<p>Winner has now flipped the position of the two silhouettes&comma; as well as replaced the &OpenCurlyDoubleQuote;Darth Vader-like” female outline by giving her a &OpenCurlyDoubleQuote;slightly more shapely bob”&period;<&sol;p>&NewLine;<p>The move comes after a subtle re-design of the main Facebook logo last week&comma; and also with the debate over the gender gap in the world of technology continuing&period;<&sol;p>&NewLine;<p>&OpenCurlyDoubleQuote;Much to my dismay&comma; not long into my tenure as a Facebook designer I found something in the company glyph &lpar;logo&rpar; kit worth getting upset about&comma;” said Winner of discovering the problem&period;<&sol;p>&NewLine;<p>There in the middle of the photoshop file were two vectors that represented people&period; The iconic man was symmetrical except for his spiked hairdo but the lady had a chip in her shoulder&period;”<&sol;p>&NewLine;<p>The female part of the icon did indeed have an indent on one shoulder where the male icon would slot in next to it&period; This was the first thing to go&comma; she explained&period;<&sol;p>&NewLine;<p>&OpenCurlyDoubleQuote;My first idea was to draw a double silhouette&comma; two people of equal sizes without a hard line indicating who was in front&period; Dozens of iterations later&comma; I abandoned this approach after failing to make an icon that didn’t look like a two headed mythical beast&period; I placed the lady&comma; slightly smaller&comma; in front of the man&period;”<&sol;p>&NewLine;<p>The end result has also been applied to the Groups logo&comma; with the new silhouettes being user here too&comma; with the woman again pushed to the front&period;<&sol;p>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;londonglossy&period;com&sol;wp-content&sol;uploads&sol;2015&sol;07&sol;image94&period;jpg"><img src&equals;"http&colon;&sol;&sol;londonglossy&period;com&sol;wp-content&sol;uploads&sol;2015&sol;07&sol;image94&period;jpg" alt&equals;"Feminism Facebook" width&equals;"600" height&equals;"181" class&equals;"aligncenter size-full wp-image-77050" &sol;><&sol;a><&sol;p>&NewLine;<p>&OpenCurlyDoubleQuote;The old &OpenCurlyQuote;groups’ icon featured two men and one woman&comma; the woman sat in the back right behind the larger centered man&period; It was an obvious refresh to use three unique silhouettes instead and&comma; here again&comma; I placed the lady first&comma;” said Winner&period;<br &sol;>&NewLine;All her work was apparently done unofficially&comma; but quickly caught on among staff&period;<&sol;p>&NewLine;<p>&OpenCurlyDoubleQuote;Timidly&comma; I saved out a new version of the glyph file&comma; not sure if I was breaking any rules and half expecting a bunch of angry designers to message me asking why I was messing up Facebook’s glyph kit&period; Instead&comma; and somewhat magically&comma; the new icons began to appear in new products across the company and our many platforms&period;”<&sol;p>&NewLine;&Tab;&Tab;&Tab;<div style&equals;"padding-bottom&colon;15px&semi;" class&equals;"wordads-tag" data-slot-type&equals;"belowpost">&NewLine;&Tab;&Tab;&Tab;&Tab;<div id&equals;"atatags-dynamic-belowpost-68ed53bb7cdcf">&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;<script type&equals;"text&sol;javascript">&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;window&period;getAdSnippetCallback &equals; function &lpar;&rpar; &lbrace;&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;if &lpar; false &equals;&equals;&equals; &lpar; window&period;isWatlV1 &quest;&quest; false &rpar; &rpar; &lbrace;&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&sol;&sol; Use Aditude scripts&period;&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;window&period;tudeMappings &equals; window&period;tudeMappings &vert;&vert; &lbrack;&rsqb;&semi;&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;window&period;tudeMappings&period;push&lpar; &lbrace;&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;divId&colon; 'atatags-dynamic-belowpost-68ed53bb7cdcf'&comma;&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;format&colon; 'belowpost'&comma;&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&rcub; &rpar;&semi;&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&rcub;&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&rcub;&NewLine;&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;if &lpar; document&period;readyState &equals;&equals;&equals; 'loading' &rpar; &lbrace;&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;document&period;addEventListener&lpar; 'DOMContentLoaded'&comma; window&period;getAdSnippetCallback &rpar;&semi;&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&rcub; else &lbrace;&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;window&period;getAdSnippetCallback&lpar;&rpar;&semi;&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;&Tab;&rcub;&NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;<&sol;script>&NewLine;&Tab;&Tab;&Tab;&Tab;<&sol;div>&NewLine;&Tab;&Tab;&Tab;<&sol;div>


Discover more from London Glossy Post

Subscribe to get the latest posts sent to your email.

- Advertisement -
Exit mobile version