그래픽 디자인의 이야기를 들려줍니다

스케치 UI 구성 요소에서 매력적인 이야기를 만들어 봅시다. 우리는 컬러, 타이포그래피, 치수와 같은 요소를 해부하고 시각, 청각, 촉각과 같은 다양한 청중을위한 이야기로 번역합니다. 목표? 매력적이고 쉽게 이해되며 기억에 남는 경험. 명확성과 일관성이 가장 중요합니다.

내 동료 인 Katie는 UI 구성 요소를 선택했습니다. 나는 그것을 주석을 달 것입니다 (우리의 주요 도구는 SCSS, Twig 및 Craft이지만 템플릿 언어는 중요하지 않습니다). 그녀는 피드백을 제공 할 것입니다. 이상적으로는 대부분의 세부 사항을 올바르게 얻을 수 있으며 핸드 오프 동안 정보를 잃을 수있는 방법을 설명하기 위해 몇 가지 오류가 있습니다.

화이트 라벨 또는 프레임 워크 프론트 엔드 개발에서 우선 순위는 유연성과 적응성입니다. 코드의 궁극적 인 목적지와 목적은 알려져 있지 않기 때문에 내용과 스타일은 크게 불가지론 적으로 유지됩니다 (제품 경계 내에서). 그러나 최근 웹 디자인 대행사로의 전환은이 초점을 뒤집 었습니다. 여기서는 고객의 특정 요구 및 대상 고객과 깊이 통합 된 맞춤형 디자인에 중점을 둡니다.

Katie와 같은 그래픽 디자이너와 밀접하게 협력하여 와이어 프레임이나 초기 이야기 대신 세 심하게 제작 된 픽셀-완벽한 UI로 작업하는 것은 학습 곡선입니다. 그러나 나는 The Table : Document Design 에 귀중한 기술을 가져옵니다.

문서 디자인 (본질적으로 핵심 접근성을 갖춘 의미 론적 웹)은 그래픽 디자인을 통신 시스템으로 취급합니다. 우리는 색상, 타이포그래피 및 레이아웃의 기본 목적을 접근 가능한 선형 및 탐색 가능한 DOM으로 변환합니다. HTML, 평범하고 단순합니다. 그러나 놀랍게도이 기본 원칙은 종종 간과됩니다.

Katie는 Artboards와 명확한 디자인 사양으로 가득 찬 스케치 파일을 제공했습니다. 내 분석은 유사한 카드 패러다임을 사용하는 6 개 또는 7 개의 구성 요소를 보여줍니다.

• 카드는 사이트 페이지에 대한 메타 데이터를 제공합니다.
• 이미지/미디어 및 메타 데이터 (미디어 객체)가 포함되어 있습니다.
• 비슷한 객체의 그룹 내에 표시됩니다.
• 이 그룹은 지속적으로 입력됩니다 (검색 결과, 뉴스 기사 및 클래스의 혼합 없음).
• 각 객체에는 단일 페이지 링크와 다른 작업이 없습니다.
• 각 객체에는 행동 유도 문안 (예 : "Book")이 포함됩니다.
• 선택적 요소 : 시간, 카테고리, 배지.
• 필수 요소 : 미디어, 제목, 링크.

카드는 기본 내비게이션 요소입니다. 사용자는 최상위 페이지 ( "What 's On", "클래스")를 기반으로 카드 세트에서 선택한 가이드 경로를 가로 지정합니다. 대화식이 아니라 오히려 가이드, 인덱스 카드,이 경우 쇼 티켓을 구매하는 경우 사용자를 목적지로 이끌어냅니다.

이 비유를 고려하십시오 : 전화로 쇼 플라이어를 설명하십시오. 무의미한 세부 사항부터 시작하여 텍스트 verbatim을 암송하지 않습니다. 당신은 단지 색상과 글꼴을 설명하지 않을 것입니다. 당신은 필수 정보를 전달할 것입니다. "화요일 오후 7시 30 분에 가장 위대한 쇼맨 입니다. 이것이 문서 디자인의 본질입니다.

수, 그룹 및 이름

각 카드를 목록 항목 내에 구조화합시다. 제목으로 소개 할 수있는 계산 가능한 그룹이 필요합니다 (<h3></h3> ). 이를 통해 스크린 리더 사용자는 다음을 수행 할 수 있습니다.

1. 제목 개요에서 목록을 식별하십시오.
2. 항목 수를 선불 확인하십시오.
3. 다음 목록 항목/카드로 이동하십시오.
4. 그룹을 건너 뛰고 다음 페이지로 진행하십시오 (Pagination은 다음에 표시된 랜드 마크입니다).

---

================================================================================================================ ============================================================================================================================================== ================================================================================================================ ============================================================================================================================================== ================================================================================================================ ============================================================================================================================================== ============================================================================================================================================== ==============================================================================================================================================

닻

각 카드는 앵커 요소로 감싸게됩니다 (<a></a> ). 이는 링크의 우선 순위를 정해 관련 카드를 식별하면 즉시 클릭 할 수 있습니다. 큰 클릭 가능한 영역이 유익하지만 사용성 트랩이되어서는 안됩니다. 이 카드의 관대 한 거터는 우발적 인 클릭을 최소화하기에 충분한 간격을 제공합니다.

제목

쇼 제목은 제목이 될 것입니다 (<h3></h3> ), 시각적 명성을 반영합니다. 제목을 빠르게 스캔 한 사용자는이 주요 정보를 쉽게 찾을 수 있습니다. 이미지는 제목보다 우선합니다. API를 통해 이미지 설명을 사용할 수 없으므로 alt 속성은 비어 있습니다.

메타 데이터의 경우 :

• 배지
• 날짜/시간
• 카테고리

배지

배지는 장소 별 정보를 강조합니다. 사용자 혜택이 즉시 명백하지는 않지만 시각적 강조는 포함을 영위합니다. 비 시각 브라우징 중에 놓치지 않으려면 일관된 접근성을 위해 제목 바로 뒤에 직접 배치 할 것입니다. 대신<abbr></abbr> , 브랜드 색상은 장소 소유권의 명확한 지표 역할을하기 때문에 일반 텍스트를 사용하겠습니다.

<p> HAC 하이라이트</p>

배깅은 조직 별이며 외부 조직이 주최하는 사내 이벤트와 분명히 구별됩니다.

날짜/시간

날짜는 중요하며 a<h4></h4> 특정 날짜 또는 시간에 대한 빠른 스캔을 용이하게하는 요소. 그만큼<time></time> 요소는 보조 기술에 의한 적절한 날짜/시간 해석을 보장합니다.

카테고리/태그

카테고리는 배지와 날짜를 따르는 시각적 비정규 화를 반영합니다. 우리는보다 일반적인 정보에 특정 정보를 배치하여 반복을 피합니다. 간단한 태그는 명확성을 위해 카테고리 목록보다 우선합니다. 하드 코딩 된 간격은 텍스트 압축에도 불구하고 회화를 방지합니다.

<p> 카테고리 : {카테고리의 범주의 % % () %} {{category}} { % loop.last %} / { % endif %} { % endfor %}</p>

기본 범주의 색상 코딩은 구두 설명이 필요하지 않은 비언어적 큐이므로 CSS에서 처리됩니다. 기존 범주는 기존 카테고리 필터가보다 효율적인 선택 방법을 제공하므로 기본 범주는 먼저 배치되지만 명시 적으로 레이블이 지정되지 않습니다.

행동

Call to Action ( "Book", ""Learn More ")은 스팬으로 스타일이 있으며 카드의 끝을 알리기 위해 마지막으로 배치되었습니다. 이렇게하면 데이터가 작업을 따르는 데 아무런 데이터가 없습니다.

결론

이 마크 업은 카운팅, 그룹화 및 명명 데이터를 우선 순위로 삼아 선형 및 비선형 상호 작용을 모두 가능하게합니다. 이 페이지는 순차적으로 읽거나 부품으로 읽을 때 이해할 수 있으며 효율적인 내비게이션을 용이하게합니다.

케이티의 피드백

Katie Parry, 디자이너 : 훌륭한 기사! 그만큼<time></time> 요소 처리는 특히 영리합니다. 그러나 보조 기술 사용자는 사전 결정된 순서로 정보를받습니다. 필터링이 없으면 특정 이벤트 찾기 (예 : 댄스 이벤트)를 사용하려면 타이틀, 배지, 날짜 및 카테고리를 통해 탐색해야합니다. 이것은 코딩 오류가 아니라 현재 웹 패러다임의 한계입니다. 향후 개선을 위해 고려해야 할 사항.

내 디자인 프로세스는 종종 사이트 전체 타이포그래피를 설정하기 전에도 이벤트 카드로 시작합니다. 시각적 으로이 카드는 다음과 같습니다.

• 직관적 인 사용 목록과 비슷합니다.
• 사용자 관심사 평가 (이미지, 제목, 날짜, 링크)에 충분한 정보를 제공하십시오.
• 명확한 Call to Action (링크)을 포함하십시오.
• 쉽게 스캔 할 수 있습니다.

시각적 스캔 가능성은 정보 유형의 일관된 배치와 명확한 시각적 계층 구조를 통해 달성됩니다. 타이포그래피와 간격이 핵심입니다. 제목은 매우 두드러집니다. 날짜는 일관되게 스타일이지만 제목과는 다릅니다. 카테고리는 스타일이 다릅니다. 코드 샘플의 간격은 최적의 스캐닝을 위해 조정해야합니다.

사용자는 다른 정보를 스캔합니다. 일부는 일반적으로 탐색합니다. 다른 사람들은 특정 이벤트 또는 카테고리를 검색합니다. 카드는이 다양한 행동을 수용해야합니다. 컨벤션이 존재하지만 카드 디자인은 프로젝트마다 다릅니다.

친숙한 인터페이스와 클라이언트 별 독창성 사이에 균형이 맞아야합니다. 맞춤형 서체와 색상 팔레트는 기여하지만 사용자 발견이 중요합니다. 저는 고객과 청중 (검토 사이트, 소셜 미디어)을 연구하여 디자인에 영향을 미치는 통찰력을 발견합니다. 이 발견 단계에 대한 개발자 참여가 증가하는 것이 도움이 될 것입니다. 현재는 광범위한 스케치 노트와 때로는 스프레드 시트를 사용하여 기능을 정의합니다. 데이터 포기가 이상적입니다!

위 내용은 그래픽 디자인의 이야기를 들려줍니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!