Дизайнер Facebook о процессе редизайна иконки «Друзья»

Дизайнер Facebook Кэйтлин Уиннер написала в своём блоге на Medium заметку о процессе редизайна иконки соцсети для обозначения списка друзей. По её словам, на это ушло несколько месяцев.

Штаб-квартира Facebook — это удивительное место. Бесплатные снеки, всегда сияет солнцем и все вокруг полны лучшими намерениями. За первую неделю пребывания там я встретила сотни людей, которые честно пытались сделать мир чуточку лучше. Я предвидела, что и мне самой будет просто приспособиться к этой новой норме жизни.

Я пообещала себе, что не буду никогда в жизни жаловаться, и в качестве напоминания о своем обещании повесила над своим столом плакат, на котором было написано «Будь скромным».

Девушка с зазубриной в плече

Но, к моему разочарованию, совсем не долго пробыв в Facebook в качестве дизайнера, я обнаружила кое-что в glyph kit компании, что меня очень расстраивало. В самом центре графического файла находились два векторных изображения, которые представляли людей.

Иконка, обозначавшая мужчину, была полностью симметричной, за исключением его взъерошенной прически, а в иконке девушки был изъян — зазубрина в плече. Я провела небольшое исследование и определила, что зазубрина размещалась как раз в том месте, где перед ней была бы размещена иконка мужчины, как в иконке «друзья», показанной выше.

Я не подозревала никого в плохих намерениях, просто кто-то был невнимателен, но меня, девушку с двумя нормальными плечами, эта зазубрина оскорбляла.

Я поделилась своим недовольством с подругой-дизайнером, а она показала мне на висевший рядом с моим плакат, надпись на котором гласила «Ничто в Facebook не может быть чужой проблемой».

Девушка на иконке нуждалась в плече, и я его исправила — так началось мое многомесячное падение в кроличью нору дизайна иконок.

После исправления её плеча, мне нетерпелось убрать с ее головы шлем а-ля Дарт Вейдер и придать прическе какую-нибудь форму.

Прическа в стиле «конский хвост» казалась мне достаточно современной, даже молодежной, но на картинке в 32 пикселя конский хвост превращался в хвост маленького грызуна и уже совсем не напоминал прическу. Силуэты с длинными волосами или слишком объемными прическами тоже было сложно различать при маленьком размере иконок, и, в конце концов, я остановилась на чуть более объемной, чем обычно, прическе «боб».

В сравнении с новой девушкой, иконка, обозначавшая прежнего молодого человека, казалась нескладной и устаревшей, поэтому я пригладила ему волосы и добавила небольшой уклон плечам.

Обновляя фигурку молодого человека я обнаружила много мест в Facebook, где одинокая фигурка использовалась для того, чтобы представить действие, например, иконка «добавить в друзья». Мне казалось, что будет нечестно, не говоря уже о том, что неправильно, сделать так, что только фигурка молодого человека представляет запросы в друзья, поэтому я нарисовала силуэт для тех случаев, когда гендерное различие в иконке было бы неуместно.

Дальше мне хотелось изменить размер и расположение женского силуэта в иконке «Друзья». Мне, как женщине получившей образование в женском колледже, было сложно не вчитаться в символизм актуальной тогда иконки — девушка буквально находилась в тени молодого человека, она не была в состоянии принять вызов.

Сначала мне пришло в голову нарисовать двойной силуэт — двух людей одинакового размера, чтобы между ними не было четких линий, по которым можно было бы понять, кто находится впереди. Десятки отладок спустя я отказалась от этой затеи, потому что мне так и не удалось создать иконку, которая не выглядела бы как двухголовое мифическое чудовище. И я сделала девушку чуть меньше, и поместила ее впереди молодого человека.

На старой иконке «Группы» присутствовали два молодых человека и девушка, девушка находилась справа позади более крупного молодого человека, расположенного в центре. Стало сразу заметно, когда я использовала для иконки три уникальных силуэта, и здесь, снова, я поместила девушку на передний план.

Действуем решительно — с помощью друзей

Я боязливо сохранила новую версию графических файлов, не уверенная в том, что не нарушаю каких-нибудь правил и ожидая, что группа рассерженных дизайнеров будет отправлять мне сообщения и спрашивать, чего это я лезу в набор глифов Facebook.

Вместо этого, будто по мановению волшебной палочки, новые иконки начали появляться в новых продуктах по всей компании и на многих наших платформах.

Мэтт Сейн, инженер из отдела технического проектирования, залил новые мужские и женские силуэты во внутреннее приложение Facebook для ПК, а затем представил их всему миру без лишней шумихи.

Лекси Росс, продакт-менеджер, внедрил некоторые необходимые дополнения в графу «Пол» при создании профиля и добавил туда соответствующие альтернативные силуэты. Брайан Фрик, создатель иконок, обновил целый набор глифов около полугода назад, переделав и добавив много новых иконок, таким образом, неофициально заимствуя новые иконки людей в свою работу.

Иконки друзей Брайана Фрика

Оказалось, что такой, начатый по собственной инициативе проект, далеко не единственный в Facebook. В прошлом году дизайнер Джулианна Лианг работала с инженером Брайаном Джу над тем, чтобы «неамериканская» часть мира получила точное видение мира с помощью иконок уведомлений. С тех пор была еще добавлена иконка с изображением Азии в центре земного шара.

Иконки земного шара Брайана Фрика

Символы имеют значение

В результате, после этого проекта я очень внимательно отношусь к символизму. Я стараюсь ставить под сомнение все иконки, особенно те, которые кажутся мне наиболее привычными. Например, можно ли сказать, что иконка с изображением портфеля — это лучший символ для графы «работа»? Какая часть населения носила портфели и в какое время? Какими другими символами можно передать концепт «работы» и какие ассоциации могут вызвать эти иконки у большинства людей на Земле?

Все те лучшие намерения, которые я видела в людях в первые дни работы были реальными. Мы все хотим сделать Facebook еще лучше, чем он есть, мы прививаем себе привычки делать что-то, а не жаловаться, строить компанию, где идеи могут распространяться совершенно органично и строить платформу, которая станет близка людям не только своими ключевыми характеристиками, но даже самыми маленькими иконками.