Контекст эмодзи: разработка индикаторов достоверности эмодзи от HackerNoon

В HackerNoon мы считаем, что прозрачность с читателем — это ключ к укреплению доверия между писателем и читателем. Чтобы обеспечить читателям как можно больше прозрачности, мы хотели создать быстрые и простые способы сообщить читателю информацию, которую он, возможно, захочет узнать об истории, прежде чем читать ее.

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

Для достижения этих целей мы создали индикаторы достоверности Emoji! Теперь исходный код доступен в сообществе Figma и GitHub .

Разработка индикаторов достоверности эмодзи

Теперь давайте углубимся в процесс разработки индикаторов достоверности Emoji. Первоначальное задание по дизайну, составленное Дэвидом и нашей редакционной командой, включало 22 индикатора достоверности эмодзи (см. статью «Каждый индикатор достоверности эмодзи на сайте HackerNoon объяснено »), разделенных на две категории: контекст/отказ от ответственности и типы контента. В дополнение к описанию каждому показателю достоверности был присвоен смайлик для вдохновения дизайна.

С этого момента мы (Me & Kien ) должны были дать волю нашему воображению и воплотить в жизнь эти эмодзи-индикаторы. Следуя языку дизайна HackerNoon, мы выбрали стиль Pixel Art. Изучив несколько вариантов размеров сетки, мы выбрали для пикселизации сетку размером 24 пикселя, поскольку она сохранила желаемый уровень детализации. Что касается выбранного программного обеспечения, я был немного предвзят в пользу Adobe Illustrator, поскольку у нас есть множество вариантов экспорта в файлы разных типов + мое знакомство с инструментом сетки ( Adobe Photoshop , Aseprite и Corel Draw — некоторые хорошие инструменты). альтернативы).

Наш процесс создания пиксельной графики состоит из 5 этапов: начиная с основных форм, прорисовки деталей, создания глубины, добавления штрихов, а затем объединения фигур и экспорта в файлы разных типов. Давайте углубимся в эти шаги, взяв, к примеру, индикатор достоверности смайликов комедии/сатиры.

Начинаем с основных фигур

Всякий раз, когда мы создаем пиксель-арт/8-битный дизайн, мы начинаем с базовой формы, которая перекликается с идеей, которую мы имеем в виду. Это эллипс в случае индикатора смайликов комедии/сатиры (который был вдохновлен смайликом «😂»).

Детали чертежа

Затем мы переходим к добавлению дополнительных деталей к только что нарисованной фигуре (например, чертам лица в данном случае).

Создание глубины: блики и тени

Чтобы сделать его более реалистичным и менее плоским, мы добавляем лицу блики и тени. В этом случае предполагалось, что источник света находится спереди и в центре, что заставляет тени перемещаться по краям, а светлые участки — к центру.

Добавление обводки

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

Объединение фигур и экспорт

Чтобы сделать их более удобными в использовании, мы объединили фигуры и экспортировали их как в PNG, так и в SVG.

Затем мы повторили весь этот процесс еще 21 раз и в итоге получили индикаторы достоверности эмодзи, которые есть сегодня на HackerNoon.

Конечный продукт: пакет пиксельных смайлов с открытым исходным кодом

В заключение отметим, что индикаторы достоверности Emoji — это еще один шаг на пути к улучшению онлайн-коммуникации между нашими читателями и писателями. Эти пиксельные смайлы не только служат индикаторами достоверности, добавляя контекст к контенту, но и влияют на доверие пользователей и их взаимодействие с контентом. Они служат примером того, как продуманный дизайн может передавать сложные концепции простым, но интуитивно понятным способом.

Присоединяйтесь к нам в поисках эмодзирующего контекста и попробуйте «Индикаторы достоверности эмодзи» от HackerNoon.

Оставайтесь творческими, оставайтесь культовыми.