[디자인] [스케치] Sketch를 사용하여 FRONT END FRAMEWORK을 만드는 방법


presentation

Front End Framework

프런트 엔드 프레임 워크

고려해야 할 몇 가지 측면 :

동시에 대규모 디자이너들과 함께 같은 프로젝트를 진행할 때는 조정하기가 어렵습니다. 프로젝트가 미적 라인을 따라야 하고 특정 상호 작용 guidelines을 준수해야 하는 애플리케이션 에코 시스템이라면 더욱 그렇습니다.
이곳을 클릭하여 자유롭게 스케치 파일을 다운로드하십시오
인터페이스에서 "정규화(normalization)"를 생성하는 데 사용할 수있는 방법 중 하나는 전체 디자인 팀이 향후 변경 사항을 피하고 불필요한 작업 시간을 줄이며 생산성을 높이는 데 도움이되는 스타일 가이드 (100 % 시각적 관점에서 생각)를 정의하는 것입니다. 우리는 응용 프로그램 내에서 구성 요소 및 상호 작용의 동작에 더 중점을 둡니다.
좋은 스타일 가이드는 개발자, 제품 소유자, 프로젝트 관리자 및 클라이언트와 같은 모든 팀 구성원이 채택해야하며, 이는 더 나은 의사 소통 및보다 효과적인 협업을 가능하게합니다. 이 "진화 된"스타일 가이드에서는 프론트 엔드 프레임 워크 (FEF - Front End Framework)라고 부릅니다.
FEF 작성 과정을 시작하기 전에 몇 가지 사항을 명심해야합니다.
그것은 사용 가능해야하며 다른 작업 프로세스에 쉽게 통합 될 수 있어야합니다.

교육적이어야하며 새로운 구성 요소와 상호 작용을 만드는 데 도움이되는 예제가 있어야합니다.

시각적이며 명료해야합니다.

공동 작업이어야하므로 각 구성원이 변경하고 새로운 정보를 추가 할 수 있습니다.

업데이트해야하므로 항상 특정 리포지토리(repository)에 저장해야하며 변경 한 사람은 파일을 업데이트해야합니다.

FEF 구현을 시작합시다.

1 단계, IA 정의 :

첫 번째 단계는 내용을 정의하는 것입니다 (프로젝트에 따라 다음과 같이 나눕니다).

1. Styling: color palette, font-family, typography, Icons.
스타일 : 컬러 팔레트, 글꼴 모음, 타이포그래피, 아이콘.
2. Layouts & page patterns: different compositions, grids and main navigation.
레이아웃 및 페이지 패턴 : 다양한 구성, 격자 및 기본 탐색.
3. Navigation elements: links, tabs and pagination.
탐색 요소 : 링크, 탭 및 페이지 매김
4. Modal windows: popovers, tooltips, dropdowns, message dialogs.
모달 창 : 팝업, 툴팁, 드롭 다운, 메시지 대화 상자.
5. Entering text: forms.
텍스트 입력 : 양식.
6. Components
구성 요소

2 단계 : FEF 컨텐츠 제작 :

스타일링(Styling) - 첫 번째 작업은 #HEX를 지정하고 적용해야 할 위치를 지정하여 primary, secondary color palette 및 complementary color을 만드는 것입니다.
presentation
색상 팔레트 Color Palette
그런 다음 향후 디자인에서 워크 플로우를 최적화 할 수 있도록 스케치에 스타일을 작성하십시오.
presentation
새로운 공유 스타일 만들기 Create new shared style
FEF에서 컴포넌트의 명명법이 좋을수록 스케치에서 스타일 테이블이 더 체계적으로 구성됩니다.
presentation
생성 된 스타일 Created Styles
이런 식으로 컴포넌트의 색상을 빠르게 변경하려면 스타일 윈도우에서 할 수 있으며 다른 색상을 추가하지 않도록합니다.
presentation
사전 정의 된 배경색 선택. Selecting predefined background color.

타이포그라피 스타일에 대해서도 같은 과정을 반복합니다.
presentation
타이포그래피 Typography
  1. 디자인에서 사용되는 기본 글꼴과 보조 글꼴을 자세히 설명합니다.
  2. 우리는 스케치에서 색상으로도 스타일을 만듭니다.
presentation
생성 된 스타일 Created Styles
타이포그래피와 색상을위한 스타일을 만든 후에, 사용할 아이콘 군을 추가하고 각각을 Symbol로 변환하십시오. 따라서, 누군가가 그것을 변형 시키면, 그것이 사용되는 모든 장소에서 동일한 변화가 반복 될 것입니다.
presentation

Family Icons
: 같은 아이콘을 다른 상태로 만들고 다음과 같은 방법으로 이름을 지정하십시오. ComponentName / state / sub-state를 사용하면 원래 아이콘을 수정하지 않고도 주 메뉴에서 모든 상태에 쉽게 액세스 할 수 있습니다.
presentation
동일한 프로세스가 checkboxes와 같이 상태가 더 많은 구성 요소(components)에 적용될 수 있습니다. 이 경우 명명법은 다음과 같습니다.
presentation
  1. checkbox/normal
  2. checkbox/hover
  3. checkbox/focus/minus
  4. checkbox/focus/check
  5. checkbox/pressed
  6. checkbox/disabled/check
  7. checkbox/disabled
상단 바의 insert 드롭 다운 안에 다음 내용이 표시됩니다.
presentation

Insert dropdown
이런 식으로 한 state에서 다른 state로 변화하는 것이 훨씬 쉽고, 접근 가능하며, 디자인의 혼란을 피할 수 있습니다.
presentation
스타일 변경하기 Changing styles

3 단계, 구성 요소(components) 생성 :

일반적인 스타일링(styling)을 정의하고 스케치에 스타일을 설정 한 후 응용 프로그램 에코 시스템 전반에 걸쳐 반복될 구성 요소에 대한 작업을 시작하십시오. (메인 네비게이션, 드롭 다운, popovers, 데이터 그리드 등). 이를위한 주된 이유는 새로운 인터페이스를 생성 할 때 팀의 디자이너들 사이에 조정되어야 하기 때문이다.
다음은 예제로 보여 드리고 싶은 몇 가지 구성 요소(components)입니다.
presentation
Tooltips
툴팁은 디자이너가 배경색을 변경하려는 경우 스타일 윈도우로 이동하고 해당 색상을 선택하는 것만 큼 쉽습니다.
presentation

양식(Forms) - 팁 : 텍스트 필드를 symbol로 만들면 스케치가 symbol 자체에 액세스하지 않고도 내용을 수정할 수 있습니다.
각 구성 요소(component)에는 설명 텍스트 (사용시기 및 작동 특성)가 첨부되어야합니다. 필요한 경우 크기, margins 및 스타일을 지정하는 오른쪽에 섹션을 추가 할 수 있습니다.
presentation
핵심 사례 - CORE-POPOVER EXAMPLE
presentation
사양은 개발 팀에 정보를 제공하는데 중점을 두고 있으므로 동일한 문서에 추가하거나 Zeplin을 커뮤니케이션 도구로 사용할 수 있습니다. 그것에 당신은 CSS 값을 얻을 수 있으며 구성 요소(components)를 다운로드 할 수 있습니다.
presentation
Zeplin preview.

4 단계, 행동 :

Data-lists 나 data-grids와 같이 사용중인 그리드에 따라 크기 (width and height)가 변경되는 구성 요소가 있습니다. 이러한 유형의 구성 요소의 경우 스케치는 각 요소의 위치를 ​​미리 정의하고 반응 형 테이블이 될 작업을 수행 할 수있는 일련의 옵션을 제공합니다.
presentation
반응형 데이터 그리드 예제
presentation
Multi-Column Responsive Example
어떻게 하면 이런 반응형을 만들 수 있을까요? 스케치 버전 39에서는 이를 달성할 수 있도록 4개의 옵션을 갖춘 새 창이 추가되었습니다.
presentation
The options are:
옵션은 다음과 같습니다.
Stretch (기본값) - 그룹 크기를 조정할 때 레이어를 플로팅하고 크기를 조정합니다 (이 옵션은 선(dividing lines)을 구분하고 각 행의 사각형을 적용해야합니다).
Pin to corner - 새 레이어를 가장 가까운 모서리에 자동으로 고정(Automatically pins)합니다. 그룹 크기를 조정할 때 크기가 조정되지 않습니다. 오른쪽 상단의 아이콘과 확인란에는이 옵션이 있어야합니다.
Resize object - 그룹의 크기를 조정할 때 레이어의 크기를 조정하고 레이어의 원래 위치를 유지합니다. 분할 선(dividing line)을 왼쪽으로두고 여백(margin)을 유지하려면 텍스트 필드에이 옵션이 있어야합니다.
Float in place - 레이어의 크기가 조정되지 않지만 그룹의 크기가 조정될 때 위치의 백분율이 유지됩니다. 이 옵션은 열의 가운데에 있어야하는 아이콘에 적용되어야합니다.
이 테이블을 만드는 방법에 대한 자세한 내용은 다음 문서를 권장합니다. https://medium.com/sketch-app-sources/https-medium-com-megaroeny-resizing-tables-withsketch-3-9-2e02e6382d3d#. fsx0udd9v
5 단계, 참조
마지막으로 모든 응용 프로그램에서 디자인 언어를 유지하는 것 이외에 각 요소의 구조는 제품의 요구 사항 및 요구 사항에 따라 다를 수 있습니다.
따라서 디자이너가 기능 요구에 따라 동일한 구성 요소를 사용하는 방법을 보여주는 마지막 섹션을 만들어 디자이너가 다른 아키텍처로 스타일을 복제하는 방법을 분석하고 배울 수 있도록하는 것이 좋습니다.
presentation
구성 요소 Components

공통의 미래

스타일 가이드를 기반으로하는 복잡한 프로젝트의 모든 팀원이 나란히 작업하면 작업의 질이 향상 될 수 있으며 "더 작은 해상도에서"x "구성 요소의 동작은 무엇이 될까요?
많은 경우, 우리는 가능한 한 빨리 제품의 첫 번째 버전을 출시하는 데 중점을 둘 수 있습니다. 따라서 제품이 이미 출시되었을 때 문제가 발생합니다. 그런 경우는, FEF는 변화를 가져올 수 있고 두통을 피할 수 있습니다.
Feel free to download the sketch file  https://dribbble.com/shots/2882661-Styleguide
자유롭게 스케치 파일을 다운로드하십시오.
https://dribbble.com/shots/2882661-Styleguide
You can find more from me at https://dribbble.com/sebamantel
자세한 내용은 https://dribbble.com/sebamantel을 참조하십시오.

번역글 추천(신청) 받습니다.

PS. 안녕하세요. 일 년 조금 넘게 제가 공부 좀 해보려고 블로깅을 처음 시작했는데, 생각보다 많은 분들께서 제 번역 글들을 보시고 계셔서 놀라기도 하고 좋기도 했습니다.
혹시나 읽고 싶은 좋은 디자인 관련 해외 글들이 있다면 리뷰에 달아주세요. 가능하면 번역해보려고 합니다.
기간은 보통 원작자 허락 구하는데 3일정고 그리고 번역은 1일 정도입니다. 신청하시면 가능한 1주일 내에는 충분히 볼 수 있지 않을까 생각됩니다.

이 글은 번역글입니다.
원본링크입니다.