이모티콘 컨텍스트: HackerNoon의 이모티콘 신뢰성 지표 설계

HackerNoon에서는 독자와의 투명성이 작가와 독자 사이의 신뢰를 구축하는 열쇠라고 믿습니다. 독자들에게 가능한 한 많은 투명성을 제공하기 위해 우리는 독자들이 이야기를 읽기 전에 알고 싶어할 수 있는 정보를 빠르고 쉽게 전달할 수 있는 방법을 만들고 싶었습니다.

이는 독자에게 그 이야기가 뉴스 기사인지 아니면 사설 기사인지 알려주는 것만큼 간단한 것일 수 있습니다. 반면에, 작가가 자신이 글을 쓰는 회사에 기득권을 갖고 있는지 여부, AI를 사용하여 글을 썼는지 여부 등 우리가 독자에게 전달하고 싶은 더 복잡한 사항이 있습니다.

이러한 목표를 달성하기 위해 우리는 이모티콘 신뢰성 지표를 만들었습니다! 이제 Figma 커뮤니티 및 GitHub 에서 오픈 소스로 제공됩니다.

이모티콘 신뢰성 지표 설계

이제 Emoji 신뢰성 지표를 설계하는 과정을 살펴보겠습니다. David 와 편집팀의 초기 디자인 개요에는 컨텍스트/면책조항과 콘텐츠 유형이라는 두 가지 범주로 나누어진 22개의 이모티콘 신뢰성 지표(관련 읽기, HackerNoon의 모든 Emoji 신뢰성 지표 설명 )가 포함되어 있습니다. 설명 외에도 각 신뢰성 지표에는 디자인 영감을 위한 이모티콘이 할당되었습니다.

이제부터 우리(Me & Kien )는 상상력을 마음껏 발휘하여 이러한 이모티콘 표시기에 생명을 불어넣을 수 있었습니다. HackerNoon의 디자인 언어에 따라 Pixel Art Style을 선택했습니다. 그리드 크기에 대한 여러 옵션을 살펴본 후 원하는 세부 수준을 유지하는 픽셀화용 24px 그리드를 선택했습니다. 선택한 소프트웨어에 관해서는 다양한 파일 형식으로 내보낼 때 다양한 옵션이 있고 그리드 도구( Adobe Photoshop , Aseprite 및 Corel Draw에 익숙함)에 익숙하기 때문에 Adobe Illustrator를 선택하는 데 약간 편견이 있었습니다. 대안).

우리의 픽셀 아트 디자인 프로세스는 기본 모양부터 시작하여 세부 사항 그리기, 깊이 만들기, 획 추가, 모양 병합 및 다양한 파일 형식으로 내보내기의 5단계로 구성됩니다. 예를 들어 코미디/풍자 이모티콘 신뢰성 지표를 사용하여 이러한 단계에 대해 자세히 살펴보겠습니다.

기본 도형으로 시작하기

픽셀 아트/8비트 디자인을 할 때마다 우리는 우리가 염두에 두고 있는 아이디어와 조화를 이루는 기본 모양부터 시작합니다. 코미디/풍자 이모티콘 표시기('😂' 이모티콘에서 영감을 얻었음)의 경우 타원입니다.

도면 세부정보

그런 다음 방금 그린 모양에 더 많은 세부 사항을 추가합니다(이 경우 얼굴 특징 등).

깊이 만들기: 하이라이트 및 그림자

보다 사실적이고 덜 평면적으로 만들기 위해 얼굴에 하이라이트와 그림자를 추가합니다. 이 경우 광원은 전면 중앙에 있다고 가정하여 그림자는 가장자리로 이동하고 하이라이트는 중앙으로 이동합니다.

스트로크 추가

좀 더 정의하기 위해 획을 추가하여 마무리했습니다.

도형 병합 및 내보내기

더 유용하게 만들기 위해 모양을 병합하고 PNG와 SVG로 내보냈습니다.

그런 다음 이 전체 과정을 21번 더 반복하여 오늘날 HackerNoon에 있는 이모티콘 신뢰성 지표를 얻었습니다.

최종 제품: 오픈 소스 픽셀화 이모티콘 팩

결론적으로 Emoji 신뢰성 지표는 독자와 작가 간의 온라인 커뮤니케이션을 향상시키는 또 다른 단계입니다. 이러한 픽셀화된 이모티콘은 콘텐츠에 맥락을 추가하는 신뢰성 지표 역할을 할 뿐만 아니라 콘텐츠에 대한 사용자의 신뢰와 참여에 영향을 미쳤습니다. 이는 사려 깊은 디자인이 어떻게 복잡한 개념을 단순하면서도 직관적인 방식으로 전달할 수 있는지 보여주는 예입니다.

상황에 맞는 이모티콘을 찾는 탐구에 동참하고 HackerNoon의 The Emoji Credibility Indicators를 사용해 보세요.

창의성을 유지하고 아이코닉함을 유지하세요.