[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "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", "tablet" ], "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", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "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-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } } ]
{ "author_name": "Редакция vc.ru", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d","facebook","\u0438\u043a\u043e\u043d\u043a\u0438","\u0434\u0438\u0437\u0430\u0439\u043d_\u0438\u043a\u043e\u043d\u043e\u043a","\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435_\u0438\u043a\u043e\u043d\u043a\u0438"], "comments": 64, "likes": 20, "favorites": 1, "is_advertisement": false, "section_name": "default", "id": "9167" }
Редакция vc.ru
11 723

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

Комментарии Комм.

0 новых

Популярные

По порядку

Прямой эфир

Хакеры смогли обойти двухфакторную
авторизацию с помощью уговоров
Подписаться на push-уведомления