아야 by ICONS8: 시스템처럼 작동하는 스타일 라이브러리

게시 됨: 2025-11-18

요약

제품, 웹, 이메일, 문서, 광고 전반에 걸쳐 하나의 시각적 음성을 원합니다. 또한 예정대로 배송하고 싶습니다. 모든 화면의 맞춤 아트는 확장되지 않습니다. 스톡 사진이 충돌합니다. Ouch는 스타일 패밀리를 통해 이러한 격차를 해결합니다. 각 가족은 하루 만에 채택하고 몇 달 동안 확장할 수 있는 작은 시각적 언어입니다. 보상은 간단합니다. 화면이 서로 연결되어 보이지 않고 마치 하나의 제품처럼 읽기 시작합니다.

상자에 무엇이 들어있나요?

아야는 작품을 일관된 스타일로 그룹화합니다. 스타일 내에서 문자, 개체 및 배경은 비율, 선 두께, 간격 리듬 및 색상 논리를 공유합니다. 조각은 솔기 없이 결합됩니다. 랜딩 페이지를 위한 히어로 장면, 설명자를 위한 중간 장면, 비어 있는 부분, 오류 및 성공을 위한 작은 부분, 그리고 레이아웃을 깔끔하게 유지하는 중립적인 배경을 얻을 수 있습니다. 파일은 제어가 필요할 때 SVG로 도착하고 드롭인이 필요할 때 PNG로 도착합니다. 둘 다 밀도가 높은 디스플레이를 유지합니다.

팀이 실제로 이를 사용하는 방법

제품 디자인. 빈 상태는 작은 부분과 하나의 명확한 조치를 취합니다. 온보딩은 시작, 진행, 성공이라는 세 가지 비트로 구성됩니다. 특집 페이지는 수행할 작업을 암시하는 중간 장면을 차용합니다. 사본을 예술 작품 가까이에 두어 의미가 한 쌍으로 전달되도록 하세요.

마케팅. 한 명의 영웅이 캠페인을 주도합니다. 자르기는 정사각형, 수직 및 수평 프레임에 준비되어 있습니다. 반복되는 캐릭터나 소품은 채널 전반에 걸쳐 인지도를 전달합니다. 이메일은 압축률이 높은 PNG를 사용합니다. 소셜은 다른 비율로 동일한 아이디어를 얻습니다.

문서 및 도움말. 복잡한 단계는 콜아웃 옆에 간단한 장면을 표시합니다. 장식용 보풀이 없습니다. 비주얼은 계속 유지됩니다.

디자인 시스템에 적합

Ouch 스타일을 유형, 토큰, 아이콘 및 그리드 옆의 하위 시스템으로 취급하십시오. 안정된 집과 한 페이지의 규칙 세트를 제공하십시오.

 /브랜드/영상/

  /아우치-스타일-a/

    읽어보기.md

    토큰.json

    영웅/

    장면/

    반점/

    배경/

README에서는 배치, 허용된 자르기, 내보내기 크기 및 예약된 용도에 대해 설명합니다. 토큰 맵은 채우기와 획을 브랜드 색상에 바인딩하므로 테마 변경 시 새로 내보낼 필요가 없습니다. 소유 화면 옆에 자산을 저장합니다. 분위기가 아닌 소유자로 이름을 지정하세요.

맛이 아니라 증거로 선택하세요

귀하의 카피와 레이아웃으로 4개의 실제 화면을 구축해 보세요. 아트만 교환하세요.

홈페이지 히어로
가격 설명선
온보딩 1단계
제품에 하나의 빈 상태

프로젝트에 참여하지 않는 5명에게 두 가지 후보 스타일을 보여줍니다. 각각 세 가지 형용사를 물어보세요. 음성 안내에 맞는 스타일을 유지하세요. 다른 세트를 보관하세요. 어느 날 오후에 결정됩니다. 무드보드가 없습니다. 토론이 없습니다.

배송 막힘을 해소하는 스타터 키트

모든 티켓이 동일한 블록을 사용하도록 다음 릴리스를 위해 작은 키트를 동결하세요.

사이트 또는 주력 기능에 대한 하나의 영웅
제품 및 콘텐츠에 대한 두 개의 중간 장면
공백, 성공, 오류의 세 자리
초점을 훔치지 않고 레이아웃을 채우는 하나의 배경

프로젝트 중간에 팀원은 어디를 검색하고 적용 범위를 확인할지 묻습니다. 검토하는 동안 사용자가 볼 위치에 깨끗한 포인터를 고정하십시오(그림).

코드 검토 이후에도 지속되는 접근성

이미지는 모든 사람이 페이지를 사용할 수 있을 때만 도움이 됩니다. 끌어오기 요청에 대한 검사를 작성하세요.

대체 결정. 이미지에 의미가 있는 경우 아이디어를 설명하는 짧은 대체 텍스트를 작성하세요. 장식용인 경우 보조 기술이 이를 건너뛸 수 있도록 빈 Alt를 사용하세요. 인라인 SVG에는 간결한 제목과 유용한 경우 설명이 포함되어야 합니다.

 <svg role="img" aria-labelledby="td" width="512" height="256">

  <title>분석 목표를 정의하는 팀</title>

  <desc>동료가 차트와 스티커 메모를 옮기는 동안 다른 동료는 결과를 확인합니다.</desc>

</svg>

대비와 상태. 아트워크에 텍스트가 포함되어 있거나 의미를 위해 색상을 사용하는 경우 WCAG 2.2 비율을 따르세요. 경고 및 버튼에 사용되는 동일한 토큰에 채우기 및 획을 연결하여 성공과 오류가 아트와 UI에서 동일한 방식으로 읽혀지도록 합니다.

대표. 포용적인 캐릭터와 일상적인 활동을 선호합니다. 진부한 표현을 피하세요. 청중을 반영하는 소그룹으로 테스트하십시오.

트래픽에도 유지되는 성능

사진이 무거워요. 예산이 있는 코드처럼 취급하세요.

텍스처가 필수적이지 않은 경우 SVG를 선호합니다.
렌더링한 크기로만 PNG 내보내기
레이아웃 변경을 방지하려면 항상 너비와 높이를 설정하세요.
스크롤 없이 볼 수 있는 부분 아래의 게으른 로드
실제 페이지에서 콘텐츠가 포함된 최대 페인트 측정

프레임워크가 없는 반응형 래스터:

 <사진>

  <출처 유형="이미지/avif">

  <출처 유형="이미지/webp">

  <img src="/hero-ouch.png" alt="분석을 검토하는 동료들" width="1280" height="720" loading="eager">

</사진>

테마 변수에 연결된 인라인 SVG:

<스타일>

  :root { --accent: #2563eb }

  @media (선호 색상 구성: 어두운) { :root { --accent: #7c3aed } }

  .hero [data-accent] { 채우기: var(--accent) }

</style>

<svg class="hero" role="img" aria-labelledby="ab" width="480" height="240">

  <title>성장 차트 상승 추세</title>

  <desc>간단한 그리드를 가로지르는 선</desc>

  <path data-accent="" d="M10 200 L120 140 L220 160 L360 80" fill="none" 스트로크="var(--accent)" 스트로크 너비="6"/>

</svg>

역할 기반 플레이북

웹과 UX

의도를 명확히 하기 위해 이미지를 사용하십시오. 빈 상태는 하나의 작업과 짧은 문구를 전달합니다. 온보딩은 동일한 출연진과 설정으로 시작, 진행, 성공으로 깔끔하게 읽힙니다. 빠른 테마 전환을 위해 SVG를 디자인 도구의 구성 요소로 변환하고 채우기를 색상 스타일에 연결하세요. 좁은 레이아웃에서는 바쁜 장면보다는 작은 지점을 선택하세요.

마케팅 및 SMM

정사각형, 수직, 수평 프레임으로 소셜 그리드를 구축하세요. 해당 비율로 장면을 미리 자르고 브리핑 옆에 변형을 저장합니다. 회상을 위해 시리즈 전반에 걸쳐 반복되는 캐릭터나 소품을 하나 유지하세요. 클라이언트는 여전히 다양하기 때문에 이메일은 신중하게 압축된 PNG를 사용합니다.

개발자

저장소의 버전 아트웍입니다. 자산을 렌더링하는 구성 요소 근처에 자산을 유지하세요. 인라인 SVG를 사용하면 새 파일을 내보내는 대신 CSS 변수를 사용하여 테마 토글에 반응할 수 있습니다. 중요한 경로에 무거운 이미지를 넣지 마십시오. 모션이 필요할 때 벡터에 애니메이션을 적용합니다.

교육

아야는 수업 시간과 LMS에서 일합니다. 학생들은 무에서 그리는 대신 장면을 리믹스하여 계층 구조와 리듬을 배웁니다. 스타일 팩, 고정 팔레트 및 3개의 대상 화면을 제공합니다. 포트폴리오가 규정을 준수하도록 코스 저장소에 라이선스 영수증과 귀속 메모를 저장하세요.

스타트업과 중소기업

한 가지 스타일을 선택하고 4분의 1 동안 동결해 보세요. 사이트, 덱, 스토어 목록, 상품 상단 화면에 적용해보세요. 오늘의 응집력. 시그니처 기능을 위한 맞춤형 장면.

드리프트를 방지하는 거버넌스

풀 요청에 체크리스트를 추가하세요.

필요할 때 대체 텍스트 표시
올바르게 표시된 장식 이미지
레이아웃 변경을 방지하도록 설정된 크기
페이지 예산에 따른 파일 크기
대상 페이지에서 LCP가 확인되었습니다.

작은 규칙이 큰 리팩터링을 이깁니다.

가치를 입증하는 지표

실행 가능한 경우 SVG로 전환하기 전과 후에 영웅 아트의 페이로드 공유
출시 후 기본 방문 페이지의 LCP 추세
세 번의 스프린트에 걸쳐 일관되지 않은 이미지에 대한 검토 플래그 수
캠페인에 대한 간략한 설명부터 처음 승인된 모의 작업까지 몇 시간

당신이 계획하는 한계

틈새 시나리오에는 때때로 부품의 합성이 필요합니다.
모션은 여전히 애니메이션 스택에 있습니다.
간단한 결정 규칙 없이 대규모 카탈로그로 인해 팀 속도가 느려짐

이메일

라이센스 및 기록 보관

Icons8은 명확한 사용 조건을 게시합니다. 무료 요금제에는 일반적으로 크레딧이 필요합니다. 유료 플랜은 속성을 제거하고 사용을 확대합니다. 게시자 사이트의 현재 정책을 읽어보세요. 브랜드 폴더에 영수증을 저장하세요. 각 자산이 배송되는 위치를 추적하세요. 법적인 요구가 있을 때, 당신은 흔적을 가지고 있습니다.

결론

하나의 스타일을 채택하십시오. 컴팩트한 키트를 만드세요. 토큰에 연결하세요. 검토 시 접근성과 성능을 강화합니다. 아야는 일정에 맞춰 배송되고 의도적으로 설계된 것처럼 보이는 시각적 언어를 제공합니다.

참고자료

텍스트 대체 및 대비에 대한 WCAG 2.2용 W3C WAI 문서
SVG 접근성 및 임베딩에 대한 MDN 문서
반응형 이미지 및 이미지 성능에 대한 Web.dev 가이드
UX에서의 시각적 의사소통과 이해에 관한 NN그룹 연구
Shopify Polaris 및 Google Material Design의 일러스트레이션 지침