스케치로 홈 스크린 디자인하기 – 단계별 안내

이 텍스트 가이드에서는 단계별로 Sketch에서 앱의 홈 스크린을 어떻게 디자인할 수 있는지 배웁니다. 우리는 매력적인 사용자 인터페이스를 만들기 위해 기본 사항과 몇 가지 입증된 디자인 원칙에 집중할 것입니다. 과정이 간단하고 이해하기 쉽다는 것을 알게 될 것이며, 곧 여러분의 자신의 디자인을 만들 수 있습니다.

주요 발견

• 홈 스크린 레이아웃 생성을 위한 Sketch의 사용
• 매력적인 사용자 인터페이스를 위한 중요한 디자인 원칙
• 디자인 프로세스를 단순화하기 위한 색상 코드 및 아이콘 사용

단계별 가이드

디자인을 시작하려면 Sketch를 열고 홈 스크린을 위한 새 문서를 생성하십시오. 위해

먼저 iPhone 8을 디자인 프레임으로 선택합니다. 작은 화면으로 시작하는 것이 좋으며, 이 방법이 더 큰 디스플레이에 적응하는 데 도움이 됩니다.

이제 원본 앱이나 템플릿으로 사용할 디자인을 엽니다. 우리는 앱의 구조를 지원하는 탐색을 추가할 것입니다. 탐색 요소를 선택하는 것부터 시작하십시오.

드로잉 영역을 클릭하고 보드를 "홈 배경 색상"으로 이름 지정합니다. 나중에 배경이 투명하지 않도록 간단한 배경 색상을 설정하십시오. 처음에는 흰색입니다.

다음 단계에서는 코스 요소를 만드는 데 집중합니다. 이를 위해 공간을 클릭하고 코스 카드를 디자인하기 시작합니다. 귀하는 명확하고 단순한 디자인, 즉 플랫 디자인 원칙을 따르는 카드를 만들 것입니다.

카드 디자인에 있어 중요한 배경 색상을 설정합니다. 즉각적인 시각적 분리를 위해 간단한 파란색을 사용할 수 있습니다. 대안으로 색상 그라디언트를 사용하여 깊이와 차원을 추가할 수 있습니다.

이제 수업에 대한 텍스트를 추가합니다. 텍스트 필드를 조정하여 텍스트가 중앙에 배치되고 읽기 쉽도록 해야 합니다. 텍스트 주위의 간격은 필수적입니다. 조화로운 디자인을 얻기 위해 각 측면에 약 16픽셀의 공간을 유지하십시오.

간격과 텍스트 필드를 배치한 후에는 수업에 대한 설명을 만듭니다. 설명 레이블의 크기도 중요합니다. 약 14포인트의 글자 크기가 읽기 좋은 가독성을 제공합니다.

기본 요소를 구현한 후 추가 아이콘을 만들 수 있습니다. 이는 디자인에서 유사한 요소를 여러 번 사용하고자 할 때 유용합니다. 코스 카드에 대한 아이콘을 만들어 다른 앱의 부분에서 재사용할 수 있습니다.

아이콘을 생성한 후에는 모든 인스턴스에서 변경 사항이 자동으로 조정됩니다. 이제 텍스트를 수동으로 변경하지 않고도 코스 제목과 설명을 조정할 수 있습니다. 명확한 구조를 보장하기 위해 간단한 텍스트 레이블을 사용하십시오.

카드를 시각적으로 매력적으로 만들기 위해 그림자를 추가합니다. 디자인이 과도해지지 않도록 섬세하게 조정합니다. 가벼운 그림자는 요소들이 도드라지고 전체적인 이미지에 잘 어우러지도록 도와줍니다.

카드에 둥근 모서리를 사용하여 시각적 매력을 높입니다. 8의 코너 반경은 현대적이고 깔끔한 외관을 제공하며 Apple 디자인 지침에 부합합니다.

이제 코스 카드 위에 명확한 제목을 추가하여 사용자 안내를 개선하고 내용을 보다 잘 구조화합니다. 이전 요소와의 높이 및 간격이 일관되도록 하십시오.

마지막으로 통일된 디자인을 만드는 것이 중요합니다. 모든 요소와 가장자리 간의 간격을 일관되게 유지하여 조화로운 전체 이미지를 만들도록 하십시오.

요약 - Sketch로 매력적인 홈 스크린 디자인하기

오늘의 단계는 Sketch를 사용하여 기능적이고 매력적인 홈 스크린을 설계하는 방법을 보여주었습니다. 디자인과 사용자 안내의 간단한 원칙을 적용함으로써, 미적으로도 매력적이고 잘 작동하는 앱을 만들 수 있습니다.