개발 도구는 유용성과 사용자 경험 측면에서 지속적으로 개선되고 있습니다. 이는 디자이너와 사용자 모두에게 매우 편리합니다. 숙련된 웹 디자이너가 시대에 뒤처지지 않고 새로운 도구를 배우려고 노력하는 것은 놀라운 일이 아닙니다. 수백 개의 디자인 블로그와 웹사이트의 작성자는 정기적으로 새로운 기사를 게시하고 지식을 공유하며 새로운 도구 사용 방법에 대한 조언을 제공합니다. 디자이너에게는 이 모든 것이 매우 유용한 정보 소스입니다. 우리는 또한 디자이너를 위한 최신 도구와 웹사이트를 엄선했습니다.

모든 문제를 해결했으며 프로젝트를 고객에게 전달할 준비가 되셨나요?

UX 체크리스트는 사용자 경험의 모든 측면을 전문적으로 검토한 것입니다. 완료 여부에 관계없이 프로젝트의 모든 단계에서 검사를 실행할 수 있습니다.

2.폰트 굉장

Font Awesome은 크기, 색상, 그림자 및 CSS가 할 수 있는 모든 작업을 즉시 개인화할 수 있는 확장 가능한 벡터 아이콘을 제공합니다.

3. 완벽한 아이콘

Perfect Icons는 화면 해상도에 관계없이 소셜 미디어 아이콘을 만드는 간단한 도구입니다.

4.Freebiesbug

Freebiesbug에는 템플릿, UI 및 플러그인 전용의 다양한 리소스를 포함하여 유용한 웹 디자인 리소스가 엄청나게 많이 있습니다.

5.패턴

Pttrns 웹사이트에서 디자이너는 모바일 장치용 웹사이트 템플릿, UIKit 리소스 및 UI 요소를 찾을 수 있습니다.

6. 평면 UI 색상 선택기

Flat UI Color Picker는 색 구성표가 필요하고 완전히 독특한 플랫 UI 디자인을 만들고 싶은 경우 탁월한 선택입니다.

7. 테크앤올

Tech&All은 웹 디자인, 코드, 템플릿, 시각 디자인, UIKits, UI 요소 및 좋은 사이트 탐색 개발에 대해 알아야 할 모든 것을 수집했습니다.

8. 사이트 영감

영감을 찾고 계십니까? 웹사이트 사용법을 모르시나요? Site Inspire는 이러한 문제를 해결하는 데 도움이 될 것입니다. 사이트의 자료는 카테고리, 플랫폼, 스타일별로 필터링할 수 있습니다.

어떤 UI 디자인이 좋다고 생각하시나요? GoodUI 웹사이트에서는 유용한 정보와 팁을 많이 찾을 수 있습니다.

애플리케이션이나 웹사이트의 인터페이스를 디자인하는 과정에서 다른 전문가의 기존 경험과 일반적인 문제를 해결하기 위한 최선의 옵션을 고려하는 것이 유용합니다. 이를 통해 불필요한 실수를 방지하고 사용자로부터 좋은 피드백을 얻을 수 있습니다. 정보 섹션에는 이 주제에 대한 몇 가지 메모를 게시했습니다. 예를 들어 햄버거 메뉴, 웹 사이트 버튼 개발 내역 등에 대한 다양한 기사뿐만 아니라 20개 리소스에 대한 리뷰가 있었습니다.

오늘은 비슷한 서비스를 살펴보겠습니다. UI 패턴는 표준 디자인 패턴의 일종의 라이브러리이며 UI 디자인에 유용할 수 있습니다.

이 리소스의 작성자는 2007년에 이 리소스를 출시한 덴마크 웹 개발자 Anders Toxboe입니다. 이 프로젝트의 주요 아이디어는 고전적인 문제와 인터페이스 구축 작업에 대한 모든 솔루션을 한곳에 모으는 것입니다. 이는 다양한 예 + 최선의 방법과 하나 또는 다른 접근 방식을 사용해야 하는 이유에 대한 설명과 함께 다양한 방법에 대한 자세한 설명을 통해 구현됩니다.

UI 패턴 프로젝트에는 여러 기능/섹션이 포함되어 있습니다.

• 디자인 패턴 - 직접적인 인터페이스 패턴 라이브러리입니다.
• 스크린샷 - 모든 UI 스크린샷(약 16,000개)의 아카이브입니다.
• 블로그(불행히도 출판물이 거의 없고 거의 출판되지 않습니다).
• UI 패턴 주간 - 해당 주제에 대한 유용한 기사에 대한 링크 모음(정기적으로 업데이트됨)
• 무료 강의가 포함된 뉴스레터.
• 자신만의 인터페이스 스크린샷을 추가하는 기능.
• 유료 교육 기능 - 개발자는 심리학의 관점에서 효과적인 디자인을 만드는 방법과 사용자 행동에 영향을 미치는 다양한 도구에 대한 온라인 과정을 가르칩니다. 이 외에도 사이트에서는 다양한 행동 패턴을 지닌 카드 한 벌을 판매하므로 디자인에 유용할 수 있습니다.

우리는 처음 두 가지 사항에 더 관심이 있으므로 이를 고려해 보겠습니다.

UI 디자인 패턴

일반적으로 동일한 문제를 해결하기 위해 유사한 구현 옵션이 사용됩니다. 선택 항목을 살펴보면 디자인의 거의 모든 기존 "기능"(검색, 버튼, 확인란)이 동일한 작동 원리를 가지고 있음을 알 수 있습니다. 마찬가지로 더 복잡한 솔루션에서는 표준화된 접근 방식을 사용합니다. UI 패턴 서비스에는 최신 디자인 패턴이 포함되어 있습니다.

그것들은 여러 범주로 나뉩니다:

• 탭;
• 메뉴;
• 콘텐츠;
• 양식(그런데 개선에 대해 읽어보는 것이 좋습니다)
• 테이블;
• 영화;
• 데이터 형식화;
• 사회의;
• 가게들;
• 검색 등

예를 들어 Breadcrumbs 메뉴를 선택하면 해당 페이지에서 문제에 대한 자세한 설명을 볼 수 있습니다.

이 정보는 초보 설계자와 계획자가 현재 요소가 처음에 발명된 이유와 이를 통해 해결할 수 있는 문제를 이해하는 데 도움이 됩니다. 또한 이 기능을 구현하기 위한 옵션, 그 근거, 구현 팁 + 스크린샷에 대한 설명도 있습니다. 그건 그렇고, 우리는 기사를 위해 여기에서 사진을 몇 장 찍었습니다. 또한 게시물에 대해 토론하고 질문을 할 수 있는 페이지에 댓글이 있습니다.

설득력 있는 디자인 패턴

또한 이 섹션에서는 소위 동기 부여(설득) 인터페이스 패턴을 찾을 수 있습니다. 여기에는 사용자의 행동과 인식에 영향을 주고, 사용자가 사이트에서 보다 활동적인 작업에 참여하도록 하고, 특정 결정을 내리도록 유도하는 요소가 포함됩니다.

가장 간단한 예는 사용자가 작업하는 동안 일부 성과(배지)를 받거나 고급 기능을 갖춘 새로운 레벨을 열 수 있는 경우 웹 사이트/애플리케이션에 "게임 메커니즘"을 추가하는 것입니다. 이 모든 것은 청중과의 효과적이고 상호 작용적인 상호 작용에 매우 유용한 것입니다.

인터페이스 스크린샷 라이브러리

이전 섹션과 달리 사진 아카이브에는 고려 중인 문제에 대한 추가 설명이 없으며 단지 스크린샷일 뿐입니다. 카테고리와 주제로 구분되어 있으며 몇 가지 추가 도구도 있습니다. 예를 들어 갤러리를 선택해 보겠습니다.

필터에서는 색상, 도메인을 설정하거나 검색 양식을 사용할 수도 있습니다. 스크린샷 페이지에 가시면 원본 크기로 보실 수 있습니다.

총. 일반적으로 UI 패턴 서비스는 초보자와 전문가 모두를 포함한 모든 디자이너에게 훌륭한 도우미가 될 것입니다. 인터페이스 디자인 패턴의 선택이 정말 좋습니다. 16,000개의 일러스트레이션 외에도 팁, 구현 옵션 등이 포함된 다양한 UX/UI 작업에 대한 자세한 분석이 있습니다.

비슷한 프로젝트를 아시는 분은 댓글로 링크를 남겨주세요.

오늘은 지침을 위한 그래픽 문서 개발 경험을 공유하겠습니다. 이것은 Viline에 대한 나의 두 번째 임무로 밝혀졌습니다. 그리고 첫 번째 부분을 기억하지 못하시는 분들을 위해 동영상 강좌 페이지를 다시 디자인했습니다. 이 기사에서는 모든 요소와 다양한 상태의 스타일을 개발하는 과정을 설명합니다. 청중을 고려하여 인터페이스의 균형과 접근성을 높이기 위해 몇 가지 규칙을 고안하고 공식화하겠습니다.

그런데 Figma를 사용한다면, 나는 우리의 관심을 기울이는 것이 좋습니다 기성 디자인 시스템. 이는 프리랜서가 한 달에 더 많은 주문을 완료하도록 돕고, 프로그래머가 스스로 아름다운 애플리케이션을 만들 수 있도록 하며, 팀 작업을 위해 기성 디자인 시스템을 사용하여 팀이 더 빠르게 스프린트를 "실행"하도록 돕습니다.

그리고 심각한 프로젝트가 있는 경우, 우리 팀은 우리의 개발을 기반으로 조직 내에 디자인 시스템을 배포하고 Figma를 사용하여 이를 특정 작업에 적용할 준비가 되어 있습니다. 웹/데스크탑, 그리고 모든 모바일. 우리는 React/React Native에도 익숙합니다. T: @kamushken에게 편지를 보내세요.

첫 번째 장에서는 승인된 색상 구성표에 따라 행동해야 한다는 점을 언급하는 것을 잊었습니다. 새로운 색상을 생각해내고 제안하는 것이 과제가 아니었습니다. 색상을 선택하려면 Adobe Color CC(인증 필요) 또는 ColorScheme.ru를 사용하는 경우가 있습니다. 기본 색상에 대한 코드를 삽입한 다음 아날로그, 단색, 트라이어드 등 다양한 모드에서 해당 색상을 선택합니다. 예를 들어 트라이어드 모드에서 매우 강력하고 조화로운 대비를 선택할 수 있습니다. 내 말은 좀 더 최적의 범위를 얻을 수 있는 곳이 있었지만 그런 희망은 없었다는 것입니다.

또한 현재 버전의 사이트에서 사용되는 Open Sans 글꼴에 대한 질문도 있었습니다. 일상생활에서는 점점 더 드물어지는 것 같습니다. 현재 관련 항목: Helvetica, Lato, Source Sans Pro, Roboto 등... 그러나 이 질문은 마케팅 담당자가 다시 생각하는 과정에 있는 것으로 나타났습니다.

바로 예약할게요. 비핸스나 드리블 위에서 톡톡 튀는 디자인의 다채롭고 트렌디한 사진은 여기서 볼 수 없을 거예요. 이런 스타일로 디자인된 현장에서 여성들이 오랫동안 머물 수 있을지 조금은 의심스럽다. 이것이 주요 청중이므로 이 요소를 고려하겠습니다. 그러나 그럼에도 불구하고 나는 고객이 설정한 프레임워크와 내 경험이 허용하는 한 전반적인 그림을 개선하려고 노력할 것입니다.

지침

지침은 제품의 외관을 형성하기 위한 일련의 규칙 및/또는 권장 사항입니다. 이는 디자이너에 의해 구성되며 개발자를 위해 명확한 형식으로 설명됩니다. 한편으로 이것은 첫 번째 사람에 대한 사형 선고입니다. 왜냐하면... 앞으로는 그래픽 문서를 활용하여 디자이너 없이 제품의 새로운 부분을 시각화할 수 있습니다. 반면에, 요즘에는 그러한 문서로 인터페이스 디자이너의 작업을 보완하는 것이 이미 필수이며 이제 그 기준은 상당히 높습니다. 따라서 지침은 색상, 글꼴, 요소, 상태, 아이콘, 크기 및 들여쓰기에 대한 권장 사항입니다.

제 경우에는 웹 상품의 주요 독자층이 젊거나 임산부라는 점을 상기시켜 드리겠습니다. 나는 고객이 승인한 색상을 고수해야 합니다. 그가 청중에게 최적이라고 생각하는 글꼴; 요소의 둥근 모서리 반경. 후자는 공정한 섹스의 눈에 요소가 너무 "날카롭거나" "각진"으로 보이지 않도록 필요합니다.

1/15: Circe 글꼴

시작 시 마케팅 팀에서 전하는 중요한 소식: Open Sans에서 벗어나 Circe를 기본 글꼴로 사용한다는 것입니다.

글꼴 설명

Circe는 인간의 얼굴과 수많은 즐거운 추가 요소가 포함된 기하학적 그로테스크입니다. 서체는 얇은 것부터 굵은 것까지 다양한 두께의 6가지 스타일로 구성됩니다. 이 글꼴의 이름은 기하학적 모양과 대중 오락으로 변한 창작 과정, 그리고 독특하면서도 다소 위험한 성격 때문에 붙여진 것입니다. Circe의 기본 모양은 약간의 인본주의적인 터치가 가미된 ​​상당히 차분한 기하학적 산세리프체이지만, 대체 모양과 스와시를 사용하면 글꼴의 성격이 완전히 바뀔 수 있습니다. 디자이너는 한편으로는 키릴 문자에서는 볼 수 없었던 다양한 형태를 즐길 수 있지만, 다른 한편으로는 이 모든 다양성에 대한 유일한 제한은 사용자의 취향과 상식이기 때문에 어느 정도 글꼴은 오디세우스 선원들의 마녀 키르케처럼 그에게는 위험합니다. 라틴 및 키릴 문자를 기반으로 하는 대부분의 유럽 언어에 대한 기호와 수많은 대체 변형 및 번성하는 변형을 모두 포함하는 Circe의 초확장 기호 구성은 신속하게 사용할 수 있는 스타일 세트로 구성되어 있습니다. 편리하고 유연하게 세트의 성격을 바꿀 수 있습니다. 글꼴은 잡지 헤드라인, 포스터 등과 같이 상당히 작은 텍스트 유형과 큰 크기 모두에 적합합니다. 디자이너 - Alexandra Korolkova. 이 글꼴은 2011년 ParaType에서 출시되었습니다.

자신의 말로 표현하자면, 이 글꼴은 웹에 적합하지 않으며 스타일은 활자체에 더 가깝고 그 안에 "문학적 소리"가 있습니다. 이것은 순전히 나의 연관성입니다. Open Sans와 Circe를 비교해 보면 후자가 밀도가 약간 우수합니다.


좋습니다. 새 글꼴이 승인되었습니다. 마케팅 담당자의 둥근 모서리 권장사항: 6px 반경을 사용하세요. 동의합니다. 고려하겠습니다! (그런데 이것은 내 실제로는 다소 드문 소원입니다). 모든 요소에 대한 작업을 시작할 수 있습니다.

2/15: 색상

중앙의 팔레트는 클라이언트로부터 받은 구성표입니다. 왼쪽의 색 구성표: 녹색을 약간 밝게 하고(오버오버에 필요함) 흰색 옆에 배치했습니다. 이렇게 하면 일반적인 카드 디자인이 어떤 모습일지 대략적으로 상상할 수 있습니다. 오른쪽 음영은 대비되는 검정색 옆에 녹색을 렌더링한 예입니다. 그러한 사용이 긴급하게 필요한 것은 아니었고 오히려 다양성을 위해 사용되었습니다. 사이트와 이 UI 키트의 일반적인 배경은 #EFEFEF(밝은 회색)로 유지되며, 이는 모바일 장치에서 강한 대비를 방지합니다.

3/15: 타이포그래피

이는 텍스트 치수 사용에 대한 지침입니다. 텍스트 단락을 그리고 그 안에 인용문을 삽입했습니다. 여러 종류의 제목을 만들었습니다. 그리고 일반 목록과 번호가 매겨진 목록을 추가했습니다. 스크롤 막대의 예도 여기에 있으며 나중에 추가되었습니다. 실제로 이러한 텍스트 규칙은 엄격할 필요가 없습니다. 작은 14px 글꼴로 텍스트 단락을 작성해야 한다면 예, 그렇게 하세요. 가장 중요한 것은 텍스트의 비례성을 유지하는 것입니다. 예를 들어 작은 글꼴로 된 텍스트 단락은 "목차"라는 큰 제목을 사용하면 이상하게 보일 수 있습니다.

4/15: 링크

새롭거나 특별한 것은 없습니다. 일반적으로 링크의 색상은 여전히 ​​논란의 여지가 있습니다. 내 입장은 이렇습니다. 디자인이 참조를 위해 파란색 또는 청록색 음영을 사용하는 경우 밑줄 없이도 할 수 있습니다. 자신만의 색상을 사용하는 경우 개인적으로 저는 항상 밑줄이 그어진 밑줄 글꼴을 사용합니다. 이는 비공식 표준에 속하며 사용자는 이 텍스트를 클릭할 수 있다는 것을 금방 깨닫게 됩니다. 그런데 나중에 마케팅 담당자는 링크 색상을 주황색으로 변경했습니다. 신경 쓰지 않았습니다. 가장 중요한 것은 링크에 밑줄이 그어져 있다는 것입니다.

5/15: 버튼

이 섹션에서는 버튼의 가능한 모든 상태를 고려하고 이를 통해 작업해야 합니다. 저는 버튼 유형을 기본 "기본"과 보조 "보조"(또는 고스트 버튼이라고도 함)로 나눕니다. 논리적으로 기본 버튼은 우선 순위 작업으로 연결되고, 보조 버튼은 사용자가 덜 원하는 작업으로 연결됩니다. 다시 디자인 조작. 다음은 그러한 사용의 예입니다.

요즘에는 디자인에 구글 머티리얼 디자인 이론이 활발히 활용되고 있는데, 이 때문에 요즘 많은 버튼이 다시 버튼처럼 보이기 시작하고 있습니다. 일부 실제 물리학이 인터페이스 디자인에 적용되기 시작했습니다. 버튼에는 일반적으로 작은 그림자가 있습니다. 마우스를 올리면 그림자가 더 커지고 흐려집니다. 버튼이 더 높게 "올라갑니다". 클릭하면 이 그림자가 사라지고 버튼을 "누르는" 것처럼 보입니다. 이것이 바로 디자인을 현실 세계와 좀 더 연결해주는 유사 입체성입니다. 제가 기억하는 한, 이는 스마트 TV 애플리케이션 지침에서 나온 것입니다. 즉, 사용자는 TV에서 일정 거리 내에 앉아 있어야 하고 흐림 계수가 높은 눈에 띄는 그림자를 사용하는 것이 중요합니다. 이렇게 하면 무슨 일이 일어나고 있는지 인식하는 것이 훨씬 쉬워집니다.

6/15: 텍스트 입력

GMD를 다시 참조하면 이러한 입력을 사용하는 경향이 있음을 알 수 있습니다.

웹 제품에서 점점 더 많이 발견되고 있습니다. Android를 선호하고 지식이 풍부하거나 IT 분야에서 일하고 있다면 이러한 입력을 통해 귀하는 "물 속의 물고기"와 같습니다. 하지만 아이폰을 주로 선호하는 여성 관객들에게는 이런 금욕적인 텍스트 입력 요소 스타일이 오히려 고통스럽다. 나는 중간 지점을 찾으려고 노력했고 입력이 여전히 입력으로 유지되지만 일부 GMD 뿌리도 있는 디자인을 제안했습니다.

하단의 모든 입력 양식에는 흐림 없이 1px 밑줄 그림자가 있습니다. 마우스를 올리면 녹색으로 변합니다. 클릭하면 두꺼워지고 녹색으로 바뀌면서 동작중인 상태를 나타냅니다. 오른쪽의 연필 아이콘은 '과도한 명확성'을 추가하려는 실험적인 시도입니다. 어떤 경우에는 이 아이콘이 의미를 강화할 수 있습니다. 일반적인 입력은 연필입니다. 검색 입력 - 돋보기; 비밀번호 입력 - 자물쇠 아이콘(예: 등등. 이 기사의 끝부분에 예시가 있을 것입니다.

7/15: 드롭다운 목록

그들의 응답 원칙은 입력과 동일한 원칙을 따릅니다. 마우스를 올리면 아이콘 색상과 밑줄 색상이 변경됩니다. 드롭다운 목록을 확장하면 더 많은 양의 그림자가 나타나며 여전히 평면에서 요소가 더 높게 "올라갑니다". 적절한 주의를 기울여 문제에 접근한다면 확장된 상태에 대해 생각해 볼 가치가 있습니다. 아이콘이 뒤집히고 활성 라인이 굵게 강조 표시되며, 마우스를 올리면 기본 녹색의 밝은 색조로 배경이 채색됩니다.

8/15: 슬라이더

모든 것이 매우 투명합니다. 여기서는 새로운 것을 발명하는 것이 아닙니다. 표준 구성 요소는 글꼴, 색상 및 크기와 같은 가이드에 따라 유추하여 설계되었습니다. 슬라이더는 마우스를 끌거나 숫자 값을 클릭하여 이동할 수 있습니다(예: 자녀의 나이 "from" 및 "to"를 표시하라는 메시지가 표시될 때).

9/15: 탭/탭

"-예, 모든 것이 명확합니다. 계속하세요!"

10/15: 선택 요소

여기서는 상태 선택(추가 필터링), 스위치, 확인란 및 라디오 버튼 등 나머지 모든 요소를 ​​그룹화했습니다. 마지막 두 가지의 경우 이는 집중적인 텍스트를 통해 선택 항목의 가시성이 향상된다는 점을 개발자에게 상기시켜 주는 것입니다. 글쎄, 나머지는 모든 것이 분명한 것 같습니다.

11/15: 테이블

예제 테이블도 키트에 추가했습니다. 모든 것이 표준이며 일반적인 유사한 스타일만 사용합니다. 물론, 들여쓰기 사양이 주어지면 테이블이 더 유용합니다. 그건 그렇고, 장의 끝 부분에서 그들에 대해 더 자세히 설명합니다.

12/15: 아이콘학

아이콘 사용에 대한 권장 사항 및 예. 나는 GMD의 강렬하고 두드러진 도상학이 도상학의 진화를 방해했다고 믿는다. 옛날 옛적에 픽셀과 볼록한 것이 있었고 그 사이 어딘가에 iOS의 윤곽선이 트렌드가 되었고 컬러 평면 스타일이 근처에서 잠시 깜박였습니다(끝없는 의사 그림자가 개체에서 비스듬히 뻗어 있던 때를 기억하십니까?). 그러다가 구글이 와서 어떻게 하는지 알려줬어요. 그리고 너무 서정적이지 않게 최근에는 다양성과 성능 때문에 GMD 아이콘만 사용하고 있습니다. 독립적인 아이콘 디자이너로부터 다양한 비유를 사용할 수 있습니다(무료이며 모든 크기, png/svg/zip을 제공합니다. 힌트: 마우스 오른쪽 버튼을 클릭하고 원하는 크기를 다운로드하는 것이 편리합니다). 강렬한 아이콘이 더 이해하기 쉽고 눈에 띌 수 있다고 생각합니다(그리고 교통 표지판에 대한 언급도 있어야 합니다).

13/15: 카드

이는 이미 개별 작업 요소에서 해당 요소의 조합으로의 전환입니다. 나는 사이트에서 사용하기 위해 여러 버전의 카드를 편집했습니다. 왜냐하면... 이는 일부 정보와 고객의 개인적 선호도를 제시하는 적절한 방법이었습니다.

그러나 나는 디자인에서 그것들을 과도하게 사용하는 것은 바람직하지 않다는 것을 항상 상기시킵니다. 해당 의미는 사양과 함께 가장 잘 이해됩니다.

카드 구성을 결정하는 데 엄격한 규칙은 없습니다. 내가 지시한 들여쓰기 치수를 따르면 거의 모든 것이 개발된 지침에 따라 균일하게 보일 것입니다.

14/15: 로그인

덤으로 로그인/등록 팝업 작업도 하고, 사용 예시가 포함된 레이아웃도 만들어 봤습니다. 이는 미래에 내가 참여하지 않고도 프로젝트의 전담 웹 디자이너가 제품의 모든 섹션을 어떻게 구성할 수 있는지 시각화하는 데 더 필요합니다. 당신이 해야 할 일은 소스에서 기성 요소를 가져와 사양에 따라 정확하게 배열하는 것뿐입니다.

15/15: 사양

소스 코드에서는 별도의 그룹에 있습니다. 그룹을 표시할 수 있으며 사양이 그려집니다. 이것이 없다면 이 사용자 인터페이스 키트는 불완전할 것입니다. 치수 및 들여쓰기 비율을 준수하면 균형 잡힌 인터페이스가 생성됩니다. 이와 관련하여 제가 지시를 하지 않으면, 다르게 처리될 위험이 있습니다. 그러면 고품질 구현을 보장할 수 없습니다.

8px 그리드를 선호한다면 모든 들여쓰기가 8의 배수라는 점을 고려해 볼 가치가 있습니다. 내 경우처럼 10px 그리드를 사용하면 이 디자인의 요소 사이에 13px 또는 27px 거리를 찾을 수 없으며 모든 들여쓰기는 10의 배수가 됩니다.

색상 수와 음영에 대한 규칙도 있습니다. 예를 들어 회색 음영을 너무 많이 사용하지 않았습니다. 이 세트에는 회색 음영이 3개 이하였습니다. 나는 그런 내 자신을 확신합니다 인터페이스 규칙디자이너와 개발자 모두에게 더 쉽습니다. 여기에는 예외가 있지만 시스템이 다양한 상태로 피드백을 제공하는 경우 빨간색, 파란색 등이 필요할 수 있습니다. 의미적 차이를 강화합니다(예: 팝업 알림의 경우).

장 결론

• 지침의 그래픽 문서는 개발자가 디자이너를 다시 참여시키지 않고 제품을 계속 개발할 수 있는 시각적 언어입니다.
• 미래 제품의 목표를 고려하여 일련의 지침을 개발할 수 있습니다. 글꼴, 색상 및 일반 스타일은 향후 리소스/응용 프로그램 사용자의 세부 사항을 고려할 수 있습니다.
• 상호 작용을 최적화하려면 지침에 요소 크기 및 들여쓰기에 대한 권장 사항이 포함되어야 합니다.
• 세트에 기성 솔루션의 예도 포함되는 것이 바람직하지만 반드시 필요한 것은 아닙니다. 장바구니, 제품 페이지, 친구 피드, 카드, 랜딩 페이지 등이 될 수 있습니다.
• 현대적인 접근 방식은 스케치/PSD 파일이 아닌 html/css 코드를 클라이언트에 반환하는 것입니다. 나는 얼마 전에 Axure로 완전히 전환했는데 꽤 효과적으로 작업을 수행했습니다.

추가적으로 워크숍의 다른 동료들이 유사한 문제를 어떻게 해결하는지 살펴보시기 바랍니다. 다음의 예를 들어줄 사람이 있는 것이 좋습니다.

1. 얀 로저트정말 멋지다, 그 사람