모바일 앱 디자인 : 초보자 가이드

모바일 앱 디자인 [이미지 : Pixabay]
[이미지 : Pixabay]

따라서 모바일 앱 디자인을 시도하기로 결정했지만 어디서부터 시작해야할지 모르겠습니다. 걱정하지 마세요. 이 기사에서는 모바일 앱 디자인을 시작하는 데 도움이되는 5 가지 사항을 간략하게 설명합니다.

이 가이드는 모바일 앱 디자인 초보자를 대상으로합니다. 이미 몇 가지 기술을 가지고 있다면 다양한 측면을 안내하는 튜토리얼을 살펴보십시오. 앱 만드는 방법 , 상세히.



모바일 앱 디자인이란 무엇입니까?

매우 광범위한 용어로 말하자면, 앱 디자이너는 앱을 멋지게 만드는 일을 담당하고 개발자는 제대로 작동하도록합니다. 모바일 앱 디자인은 사용자 인터페이스 (UI)와 사용자 경험 (UX)을 모두 포함합니다. 디자이너는 색 구성표, 글꼴 선택, 사용자가 사용할 버튼 및 위젯 유형 등을 포함하여 앱의 전체 스타일을 담당합니다. 그래서, 어디서부터 시작합니까? 처음에.



만화 작가가되는 방법

어떤 플랫폼을 위해 디자인해야합니까?

두 개의 휴대폰

Android 또는 iOS? [이미지 : Pixabay]

모바일 앱을 디자인하려는 이유에 따라 작업하려는 플랫폼과 그 이유를 이미 알고있을 수 있습니다. 그러나 막 시작하는 중이고 자신에게 맞는 것이 확실하지 않은 경우 가장 익숙한 것을 선택하십시오.



Android 휴대 전화를 사용하는 경우 Android 용으로 디자인하세요. iOS 기기를 사용하는 경우 거기에서 시작하십시오. 또는 둘 다에 대한 디자인을 결정할 수 있지만 적어도 처음에는 씹을 수있는 것 이상으로 물지 않는 것이 가장 좋습니다.

어떤 도구를 사용해야합니까?

Photoshop, Adobe XD 및 Sketch 로고

Photoshop, Adobe XD 및 Sketch는 모두 강력한 경쟁자입니다.

설계중인 플랫폼을 알고 나면 다음 단계는 올바른 플랫폼을 선택하는 것입니다. 웹 디자인 도구 일을 끝내기 위해. 모바일 앱을 디자인 할 때 좋은 소식은 플랫폼에 관계없이 일반적으로 두 가지 모두에 동일한 도구를 사용할 수 있다는 것입니다.



인기있는 앱 디자인 옵션에는 Adobe Photoshop, Adobe XD 및 Sketch가 있습니다. 더 많이 있지만 이들은 업계에서 큰 타격을 입었습니다. 여기에서 Adobe Creative Cloud에 등록하십시오. .

Photoshop이 모바일 앱 디자인에 가장 적합한 옵션이라고 생각할 수 있습니다. 특히 다른 유형의 디자인 작업에 사용한 경우에는 Photoshop을 사용하지만 모바일 앱을 디자인 할 때는 Adobe XD 또는 Sketch를 사용하는 것이 좋습니다. 즉, Adobe XD가 강력한 경쟁을 벌이고 있지만 Sketch는 사실상의 표준으로 간주됩니다. 최근에 추가 된 디자인 시스템 .

Photoshop과 같은 것보다 Adobe XD 또는 Sketch를 사용하는 가장 큰 이유 중 하나는이 두 도구가 디자인과 프로토 타이핑을 염두에두고 만들어 졌기 때문입니다. 디자인 워크 플로우를 간소화하고 UI 및 UX 디자이너를 대상으로하는 반면 Photoshop은 이미지 조작에 더 적합합니다.

한 가지 중요한 참고 사항 : 크로스 플랫폼 개발 또는 지원을 계획중인 경우 Sketch는 macOS에서만 사용할 수 있으므로 Adobe XD가 확실한 승자입니다.

OS 설계 지침

디자인을 시작하기 전에 먼저 플랫폼의해야 할 일과하지 말아야 할 일을 이해해야하기 때문입니다. 일반적으로 모바일 앱 디자인은 다음과 같은 여러 운영 체제간에 몇 가지 유사점을 공유합니다.

  • 목표 중심 설계
  • 단순하게 유지 (적을수록 더 좋음)
  • 흐름 유지
  • 가독성이 핵심
  • 플랫폼 존중

마지막 '플랫폼 존중'은 당신이 생각하는 것보다 더 중요합니다. 사용자가 기기에 앱을 다운로드하여 설치할 때 익숙하고 직관적 인 방식으로 작동하기를 기대합니다. 그들은 자신이 알고있는 것에 대한 의견을 바탕으로 앱이 OS 별 디자인 규칙의 90 %에 위배 될 때 사용자가 삭제할 가능성이 높습니다.

iOS 및 Android의 다양한 탐색 패턴을 고려해야 할뿐만 아니라 버튼, 글꼴 선택 및 UI 개체의 배치도 고려해야합니다.이 모든 것은 플랫폼마다 다릅니다.

좋은 소식은 무엇이 허용되는지 추측 할 필요가 없다는 것입니다. Apple과 Android에는 시작하기 전에 (그리고 적극적으로 디자인하는 동안) 검토 할 수있는 일련의 디자인 지침이 있습니다.

macbook pro 13 인치 가방 케이스

와이어 프레임 및 앱 흐름

펜으로 그린 ​​와이어 프레임

전용 와이어 프레임 도구를 사용하거나 펜과 종이에 붙이세요 [이미지 : Pixabay]

앱의 모양과 느낌을 디자인하기 전에 흐름 제어 및 구조에 대한 작업이 필수적입니다. 와이어 프레임이 작동하는 곳입니다. 와이어 프레임은 사용자가 앱을 탐색하고 사용하는 방법을 이해하는 데 도움이됩니다. 일반적으로 디자인이 단순화되어 흐름과 유용성에 중점을 둡니다.

많은 헌신이 있지만 와이어 프레임 도구 , 디자이너가 단순히 펜과 종이를 사용하는 것은 드문 일이 아닙니다. 그러나보다 첨단 기술과 협업 (원격 팀과 함께 작업 할 때 특히 중요 함)을 찾고 있다면 Sketch 또는 Adobe XD에서 와이어 프레임을 만드는 것을 고려하십시오. 와이어 프레임에 이러한 도구를 사용하면 상대적으로 쉽게 저 충실도 와이어 프레임을 고화질 미리보기로 전환 할 수 있다는 이점이 있습니다.

참고 : Adobe XD , 시작하는 데 도움이되는 무료 키트를 얻을 수도 있습니다.

목업 및 프로토 타입

모바일 앱 디자인의 시각화

와이어 프레임을 작업 제품으로 전환 할 시간 [이미지 : Pixabay]

와이어 프레임 작업을 마치고 토론 및 승인을 위해 개발 팀 및 / 또는 고객과 공유했으면 이제 모형과 프로토 타입을 만들 차례입니다.

이 단계는 일반적으로 동일한 디자인 도구를 사용하여 와이어 프레임과 모바일 앱 디자인을 모두 만든 경우 더 쉽습니다. 그렇지 않은 경우 디자인 도구를 채우는 데 시간이 조금 더 걸릴 수 있지만 한 번 수행하면 잘 진행됩니다. UXPin (Sketch와 통합)을 포함한 많은 도구에는 개발자가 요구하는 세부 정보로 와이어 프레임에 주석을 달아 추측 할 필요가 없습니다.

앱 디자인 작업을하는 동안 자산의 공유 라이브러리 구축을 시작하기에 좋은시기입니다. 예를 들어 여기에서 만드는 표준 단추, 아이콘 및 기타 요소는 디자인하는 다른 앱에서 유용 할 수 있으므로 저장해야합니다.

기사에서이 단계에 대해 자세히 알아보십시오. 웹 사이트 및 앱 모형을 만드는 4 가지 방법 .

개발에 넘겨

와이어 프레임 드로잉을 다른 사람에게 건네주는 사람

이 단계는 실제로 이렇게 보이지 않습니다. [이미지 : Pixabay]

디자이너는 또한 이러한 요소와 시각적 자산을 개발자에게 제공 할 책임이 있습니다. 아이콘, 배경, 로고, 심지어 글꼴과 같은 것은 디자이너가 개발자에게 전달할 수있는 모든 것입니다.

개발자가 필요한 모든 것을 갖추면 해당 디자인과 다양한 부분을 취해 작동하도록하는 것이 개발자의 임무입니다. 그러나 때때로 디자이너는 개발자가 직면 한 한계를 이해하지 못합니다. 그리고 그럴 때 모든 지옥이 풀립니다.

모바일 앱 디자이너는 할 수 있었다 개발자와 개발 프로세스를 모두 무시하지만 개발자가 사용하는 도구를 사용하든 앱이 실행되는 운영 체제 및 / 또는 장치의 한계에 관계없이 개발자가 직면 한 문제를 이해하는 것이 좋습니다. 이 지식으로 무장하면 개발자의 푸시 백을 줄이면서 모바일 앱을보다 효율적으로 디자인하는 동시에보다 협업적인 환경을 조성 할 수 있습니다.

더 읽어보기 :