Соцсети Редакция vc.ru
11 781

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#Интерфейсы #Facebook #иконки #дизайн_иконок #создание_иконки

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Редакция vc.ru", "author_type": "self", "tags": ["\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435_\u0438\u043a\u043e\u043d\u043a\u0438","\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0438\u043a\u043e\u043d\u043a\u0438","\u0434\u0438\u0437\u0430\u0439\u043d_\u0438\u043a\u043e\u043d\u043e\u043a","\u0434\u0438\u0437\u0430\u0439\u043d","facebook"], "comments": 48, "likes": 20, "favorites": 1, "is_advertisement": false, "subsite_label": "social", "id": 9167, "is_wide": true, "is_ugc": true, "date": "Wed, 08 Jul 2015 21:45:17 +0300" }
{ "id": 9167, "author_id": 2, "diff_limit": 1000, "urls": {"diff":"\/comments\/9167\/get","add":"\/comments\/9167\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/9167"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199129 }

48 комментариев 48 комм.

Популярные

По порядку

Написать комментарий...
44

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

Ответить
8

Только что потратил 15 минут времени читая полотно текста совершенно упоротой девицы которая считает важным то что она делает. Кстати а что она делает?

Ответить
5

Не знаю что делает, но дома ее ждет 15 кошек.

Ответить
39

Девушка хотела равенства, но групповая иконка выдала тайные мотивы.

Ответить
35
Ответить

27

А потом бабы удивляются, когда их бьют

Ответить
6

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

Ее оскорбляет иконка 16х16px. Мир тронулся...

Ответить
9

Я тебе больше скажу, ее оскорбляет положение девушки на иконке группы, но ее абсолютно устраивает, если девушка стоит впереди двух МУЖЛАНОВ

Ответить
9

Когда слова "Дизайн" и "Facebook" стоят рядом, то это веит чем-то подозрительным.

Ответить
5

А как же негры?

Ответить
5

Да ладно негры. Трансы, педерасты, зоофилы, педофилы скорбят.

Ответить
3

Надо сделать иконку, переливающуюся всеми цветами, тогда никому не будет обидно!

Ответить
4

действительно, почему все фигуры белые? Там должно быть три фигуры- белая, желтая, черная

Ответить
0

Тот лысый слева и есть негр! Просто #402B26 (тёмно-коричневый) на #3b5998 (тёмно-сине-фиолетовом) был бы не заметен а это уже открытая дискриминация.

Ответить
5

Каждую секунду в мире ковыряются в носу 179 миллионов 589 человек одновременно

Ответить
2

179000590

Ответить
0

179000591

Ответить
6

"эта зазубрина оскорбляла"!
КАК?)))
Как эта зазубрина может оскорбить человека?
Может у мисс Уиннер просто умом потекла?

Ответить
5

Касаемо старой иконки, странно, что никто не предположил вполне простую идею, что среднестатистическая женщина ниже ростом мужчины с похожим геномом.

Ответить
5

Человек несколько месяцев тратил на это силы и получал зарплату. Теперь понятно что там делают тысячи работников, если на каждом висит по такой херне.

Ответить
5

Верните мне мой 12 век..........

Бабаньке, ну что же вы к иконкам пристаете, а не к комитету олимпийских игр с требованием убрать разделение программ мужчин и женщин?

Ответить
–1

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

Ответить
9

Потому что практической пользы от таких иконок - ноль. Если бы за это время она сделала дизайн фб, понятный нормальным людям - тут была бы куча лайков.

Ответить
5

[сексизм]Потому что борщи надо ебашить, а не в фейсбуках сидеть![/сексизм]

Ответить
4

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

Ответить

4

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

Ответить
4

Какого хера теперь тёлка на переднем плане?

Ответить

2

не вижу среди иконок гея и негра.

Ответить
2

и хача

Ответить

3

Мальчик, дышащий в затылок мальчику, вот это по современному. А эта небритая феминистка отстала от человечества лет на 50

Ответить
3

Устроилась работать дизайнером в Facebook
@
Нет другой работы кроме исправления СЕКСИСТСКИХ иконок

Ответить
3

Не будут же тебе в Facebook просто так деньги платить.
Работать надо.

Ответить
–3

Эк всех задела невинная статья о редизайне иконок, на святое покусилась, негодяйка!
Все правильно делает

Ответить
5

нет

Ответить
2

А иконки Австралии с южным полюсом сверху не будет?

Ответить
1

Это пока не сильно оскорбляет дизайнера австралийца в ФБ, видимо.

Ответить

2

Очередная феминистка. ГО МАТРИАРХАТ

Ответить

2

Новая иконка стала меньше походить на женщину.

Ответить
1

Посоны, почините уже лайки-дизлайки на мобильной версии сайта, ну.

Ответить

0

Боремся за свои права, а не за равноправие. Привет, все как всегда.

Ответить
0

Мда... Иконка оскорбляет ее -_-

Даже не знаю что сказать.

Ответить
0

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

Ответить
0

Радужный мальчик

Ответить
0

Лебедев со своим редизайном московского метро нервно размышляет над симметричным ответом.

Ответить

0

она больная

Ответить

0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления
{ "page_type": "default" }