전문가를위한 UI 디자인 가이드

콘텐츠

• UI 디자이너는 무엇을합니까?
• 웹 vs 네이티브 앱
• 기술 향상

경력을 시작했을 때 저는 웹 디자이너였습니다. 저는 4 년 동안 웹 디자인 분야에서 일했습니다. 소규모 비즈니스 사이트에서 시작하여 결국 더 큰 클라이언트로 이동했습니다. 저에게 관심이있는 것은 그래픽 디자인이 아니고 더 큰 브랜드를 위해 일하는 것이 아니라는 것을 알게되었습니다. 나는 웹 페이지의 시각적 디자인보다 페이지 매김 패턴, 사람들이 양식과 상호 작용하는 방식 및인지 된 성능과 같은 것에 더 관심이있었습니다.

공상 과학 영화를 볼 때 인터페이스를 보곤했습니다. 그리고 비디오 게임을 할 때 메뉴가 배치되는 방식을 관찰했습니다. 이러한 특성 중 하나라도 익숙하게 들리면 UI 디자이너 일 수도 있습니다.

대행사를 그만두고 회사를 시작했습니다. LinkedIn 페이지에서 저는 최고의 소프트웨어를 만드는 것, 즉 새로운 경력 목표를 요약하려고했습니다. 프리랜서로 시작한 지 4 년이 지났지 만 제 여정은 멈추지 않았습니다. 요즘 저는 작은 UI 디자인 회사의 운영을 돕고 있습니다. 단 핵증. 최근 네 번째 팀원을 맞이했습니다.

이 기사에서는 정확히 어떤 작업이 필요한지, 최고의 학습 리소스를 찾을 수있는 위치, 기술을 향상시키는 방법을 포함하여 UI 디자이너가되는 것이 어떤 것인지 설명하고 싶습니다.

UI 디자이너는 무엇을합니까?

일반적으로 사용자 인터페이스 디자이너의 작업을 네 가지 범주로 나눌 수 있습니다. 클라이언트와 소통하고, 조사하고, 디자인하고 프로토 타입을 만들고, 개발자와 소통합니다. 이러한 각 단계를 더 자세히 살펴 보겠습니다.

클라이언트 커뮤니케이션

고객과의 커뮤니케이션은 고객의 문제를 이해하는 것입니다. 목표는 고객의 비즈니스를 파악하는 것이므로 프로젝트 시작은 일반적으로 많은 대화를 구성합니다. 시작할 때 고객의 도메인에 대해 너무 많이 알지 않아도 괜찮습니다. 가능한 디자인 솔루션을 구상하면서 새로운 방식으로 고객의 비즈니스를 볼 수 있습니다.

훌륭한 UI 디자이너가 되려면 궁극적으로 고객의 비즈니스와 함께 생각할 수 있어야합니다. 예를 들어 고객이 항공에있을 수 있습니다. 그들을 위해 일하면 결국 그 산업에 대해 꽤 잘 알게 될 것입니다. 따라서 여기에서 자신의 행복을위한 팁은 현명하게 일하는 산업을 선택하는 것이므로 관심이 없거나 관심이없는 분야에서 전문가가되지는 않습니다.

프로젝트 중에 커뮤니케이션이 멈추지 않습니다. 디자이너로서 당신은 지속적으로 작품을 선보일 것입니다. 우리 회사에서 우리는 원격 팀이기 때문에 직접 만나는 것이 많지 않습니다. 대신 우리는 화상 회의를 통해 화면 공유를 많이 사용합니다. Skype 및 Slack과 같은 커뮤니케이션 도구는 매일 사용됩니다.

동기 및 비동기 통신 방법을 결합하는 것이 유용합니다. 많은 정보가 빠르게 필요하지만 동시에 주변에 있어야하는 경우 전화가 좋습니다. Slack을 '가상 워터 쿨러'로 생각하고 Basecamp를 사용하여 복잡한 디자인 프로젝트를 관리합니다. HTML 및 CSS를 사용하여 프로토 타입을 디자인 할 때 GitHub 문제를 사용하여 코드를 직접 논의합니다.

연구

고객과의 의사 소통뿐만 아니라 많은 조사를 할 것입니다. 여기에는 현장 연구, 고객과의 워크샵, 경쟁 분석 또는 전략 정의가 포함될 수 있습니다. 본질적으로 당면한 문제를 이해하는 데 도움이되는 거의 모든 것입니다.

연구는 디자인 선택에 정보를 제공합니다. 한 번 읽은 기사이거나 Apple이 방금 발표 한 새로운 기사입니다. 특정 디자인을 선택한 이유를 설명 할 때가되면 조사 결과가 뒷받침됩니다.

연구는 매우 광범위 할 수 있습니다. 나는 종종 연구 목적으로 새 장치를 테스트하거나 사용자 인터페이스를 연구하기 위해 새 웹 앱에 가입합니다.

디자인 및 프로토 타이핑

디자이너는 대부분의 시간을 디자인 및 프로토 타이핑 작업에 소비 할 것입니다. UI 디자인 프로젝트는 스케치에서 세부 디자인, 코딩에 이르기까지 다양한 방식으로 진행할 수 있습니다.

사용하는 방법은 주로 프로젝트 유형에 따라 다릅니다. 무엇을 디자인하고 있습니까? 웹 사이트입니까, 아니면 앱이라고 부르시겠습니까? 네이티브 기술을 사용합니까? 재 설계입니까 아니면 처음부터 시작합니까?

우리 회사에는 고정 된 프로세스가 없지만 대부분의 프로젝트는 스케치와 와이어 프레임으로 시작하여 세부적인 시각 및 상호 작용 디자인으로 이동하여 프로토 타입으로 끝납니다.

디자이너로서 우리는 도구에 대해 생각하는 데 많은 시간을 보냅니다. 훌륭한 도구는 중요하지만 가장 중요한 것은 아닙니다. Adobe Creative Suite 및 Sketch와 같은 앱을 능숙하게 사용할 수 있다는 것은 연필을 사용하여 그림을 그리거나 브러시를 사용하여 칠할 수있는 것과 같습니다. 여전히 그림을 만들어야합니다.

즉, 도구에 대한 건전한 관심은 좋은 것입니다. 저는 생산성을 높이는 데 도움이되는 새로운 도구를 시도하는 것을 좋아합니다. 제가 가장 좋아하는 벡터 편집 도구는 일러스트 레이터이지만 요즘에는 대부분의 시각 디자인 작업이 Sketch에서 이루어집니다. 다른 팀원들은 Affinity Designer와 같은 최신 도구로 전환했습니다.

도구는 매우 개인적인 선택입니다. 우리가 쉽게 함께 일할 수있는 한 누구나 자유롭게 선택할 수 있습니다. 고객과 우리의 디자인에 대해 더 쉽게 이야기 할 수 있도록 InVision으로 프로토 타입을 만듭니다. 그러나 고급 프로토 타이핑을 위해 HTML과 CSS를 사용합니다. 필요한 도구는 모두 수행하려는 작업에 따라 다릅니다.

개발자 커뮤니케이션

UI 디자이너의 작업 중 자주 잊혀지는 부분은 개발자 커뮤니케이션입니다. 요즘에는 디자인을 개발자에게 보내고 올바르게 구현되기를 바라는 것만으로도 벗어날 수 없습니다. 최고의 디자이너는 디자인을 만드는 것이 아니라이를 승인해야하는 이해 관계자와이를 구현해야하는 개발자에게 전달하는 데 문제가 있다는 것을 알고 있습니다.

설계 전달은 세부 사양, 자산 제공, 설계 검토 등 다양한 형태로 제공됩니다. 각 인스턴스에서 제공하는 것이 타당한 것은 프로젝트가 네이티브인지 웹 애플리케이션인지에 따라 크게 달라집니다.

전통적인 접근 방식은 화면 디자인 옆에 자산을 제공하는 것입니다. 화면 디자인은 디자인이 전체적으로 어떻게 보이는지 확인하는 데 사용할 수 있으며 에셋은 바로 사용 가능한 PNG 및 SVG 아이콘이므로 개발자는 그래픽 편집기를 처리 할 필요가 없습니다.

우리 회사에서 우리는 그 이상을 제공하는 것을지지합니다. 우리는 디자인의 일관성을 유지하기 위해 구성 요소 스타일 가이드를 사용합니다. 웹 프로젝트를 처리 할 때 구현 준비가 완료된 세부적인 HTML 및 CSS 세트를 하나씩 문서화하여 제공합니다. 저는 소프트웨어 개발의 모든 단계에서 디자인 안목을 갖는 것이 세계적 수준의 소프트웨어를 만드는 저의 목표에 도달하는 유일한 방법이라고 믿습니다.

웹 vs 네이티브 앱

플랫폼 (예 : iOS 또는 Android) 용 기본 앱을 디자인 할 때 특정 지침을 따르는 경향이 있습니다. 웹용으로 디자인 할 때는 지침이 많지 않습니다. 일반적으로 고객이 브랜드에 대한 그래픽 가이드 라인을 가지고있어 사물이 어떻게 보일지 결정합니다.

그러나 이러한 가이드 라인은 마케팅 웹 사이트에 맞게 조정되는 경향이 있으며 여기에있는 내용이 항상 좋은 사용자 인터페이스 결정으로 이어지지는 않습니다. 글꼴은 가독성이 아닌 마케팅 목적으로 선택되는 경향이 있습니다. 색상은 대담하고 눈에 띄며 광고 캠페인에서는 작동하지만 매일 사용하는 앱에서는 작동하지 않습니다. 이 가이드는 해석되어야합니다.

웹에 대한 UI 지침은 거의 없습니다. 웹이 다양한 스타일의 용광로라고 주장 할 수 있습니다. 웹 사이트 라기보다는 앱처럼 느껴지는 것을 만들고 있다면 Bootstrap 및 ZURB Foundation과 같이 널리 사용되는 프레임 워크에 대해 알아야합니다. 바퀴를 재발 명하고 싶지 않기 때문에 프레임 워크는 사물의 모양을 결정하기 시작합니다. 그리고 그것은 아마도 좋은 것입니다.

우리 회사에서는 Bootstrap을 사용하는 것을 좋아합니다. 버튼, 데이터 테이블 및 모달과 같은 일반적인 UI 요소에 대해 합리적인 기본 크기를 제공합니다.

웹 디자인에서는 웹의 기술적 능력에 더 많은 제약을받습니다. 예전에는 웹 사이트에서 둥근 모서리와 같은 단순한 시각적 번영을 구현하기가 어려웠습니다. 요즘은 사라졌습니다. 이제 많은 그림자, 전환, 애니메이션 및 3D까지 자유롭게 사용자 인터페이스를 그릴 수 있습니다.

디자이너는 브라우저에서 프로세스와 디자인을 제어하는 ​​것이 훨씬 현실적입니다. 많은 UI 디자이너가 네이티브 앱의 UI 프로그래밍을 맡는 것을 보지 못했지만 웹 앱의 HTML 및 CSS를 수행하는 디자이너는 흔한 일입니다. 자신 만의 디자인을 코딩 할 수 있다면 비 코딩 동료보다 우위를 차지하게 될 것입니다. 저에게는 이것이 웹이 어떻게 작동하는지 진정으로 이해할 수있는 유일한 방법입니다.

웹 제약

여러분이 배운 모든 멋진 트릭이 모든 브라우저에서 지원되는 것은 아니라는 사실을 곧 알게 될 것입니다. 이것이 웹 디자인의 현실입니다. 점진적 향상과 같은 잘 알려진 원칙을 따르는 것이 좋습니다. 가능할 때마다 향상된 콘텐츠를로드하고 콘텐츠 품질이 어떻게 저하되는지도 고려합니다.

최근에는 '겨자 자르기'가 인기를 끌고 있습니다. BBC의 웹 팀이 옹호하는 여기에는 '좋은'브라우저와 '나쁜'브라우저를 구별하고 '나쁜'브라우저에 제한된 경험을 제공하는 것이 포함됩니다. 그러나 실제로는 콘텐츠 사이트에서만 작동합니다.

애플리케이션과 같은 경험의 경우 많은 사람들이 개발을 더 쉽게하기 위해 몇 가지 주요 브라우저로만 지원을 제한하고 있습니다. 안타깝게도 이는 콘텐츠를보기 위해 특정 브라우저가 필요한 1996 년 상황으로 돌아갑니다.

기술 향상

그렇다면 빠르게 변화하는 웹 산업에 대한 최신 정보를 유지하고 기술을 향상시키는 방법은 무엇입니까? 기술 향상을위한 몇 가지 다른 방법을 살펴 보겠습니다.

플랫폼 지식

디자이너의 무기고의 주요 부분은 플랫폼 지식입니다. 다양한 운영 체제와 사람들이 사용하는 방법에 대해 알아야합니다. 디자이너로서 우리는 Mac을 사용하는 경향이 있지만 대부분의 사람들이 작업을 수행하기 위해 Windows 상자를 사용하고 있다는 사실을 잊기 쉽습니다.

직접 사용해야 만 진정으로 이해할 수 있다고 생각합니다. 나는 디자인에 내 Mac을 사용하는 것을 선호하지만 다양한 다른 플랫폼의 진화를 따라 잡는 데 많은 시간을 할애합니다. 내 Mac에 가상 머신으로 여러 개의 Windows 사본이 설치되어 있습니다. UI의 다양한 변경 사항을 확인하기 위해 Microsoft의 Insider Program을 사용하여 Windows 10의 새로운 빌드를 테스트 하느라 바빴습니다.

또한 작동 방식을 테스트하기 위해 정기적으로 새 하드웨어를 구입합니다. 플랫폼을 테스트하기 위해 Apple Watch를 구입했습니다. 그런 다음 내 삶에 그다지 도움이되지 않는다고 느꼈기 때문에 그것을 팔았습니다.

또한 웹은 자체 운영 체제로 볼 수 있습니다. 매주 모든 브라우저 공급 업체에 새로운 기능이 추가되면서 지속적으로 발전하고 있습니다. 브라우저의 기술적 측면, 특히 CSS 및 그래픽 기능에 대해 아는 것은 매우 가치가 있습니다. SVG 및 WebGL이 무엇인지, 그리고 Web Animations API를 어떻게 사용할 수 있는지 알아야합니다.

모든 플랫폼은 시간이 지남에 따라 발전하며 사용자 인터페이스 디자이너로서 최신 상태를 유지하는 것이 귀하의 임무입니다. 결국 디자인하는 모든 것이 고립되어있는 것이 아니라 더 큰 소프트웨어 에코 시스템의 일부입니다.

기본으로 돌아 가기

오늘날 우리가 어려움을 겪고있는 것은 20 년 전 우리가 어려움을 겪었던 것과 크게 다르지 않습니다. 책에는 좋은 조언이 많이 있습니다. 먼저 Jason Fried와 Matthew Linderman의 Defensive Design for the Web과 Steve Krug의 Do n’t Make Me Think를 사용해보세요.

모달리티 및 어포던스와 같은 개념에 대해 잘 모르는 경우 읽어야합니다. Fitts의 법칙이 무엇인지 설명 할 수 있어야합니다. 근접성의 게슈탈트 법칙? 이것이 UI 디자인의 핵심입니다.

게임과 영화에서 영감을 얻으세요

UI 디자이너로서 저는 다른 영감의 원천을 활용하여 작업을합니다. 게임에서 많은 영감을 얻습니다. 일부 게임은 매우 복잡하며 UI 디자이너는 비즈니스 프로젝트에서 작업하는 UI 디자이너와 동일한 복잡한 인터페이스 문제를 해결해야했습니다.

게임은 트렌드를 나타낼 수도 있습니다. Colin McRae Rally의 메뉴에있는 미니멀리즘은 iOS7의 방향을 상기시킵니다. 어떤 의미에서 현재 유행하는 UI 애니메이션 디자인은 몇 년 전 게임에 등장했습니다. 스 큐어 모피 즘에서 베어, 기능적 인터페이스 및 '플랫 디자인'으로의 이동은 게임에서도 분명했습니다. 2006 년의 Oblivion과 2011 년의 Skyrim을 비교해보십시오. 두 게임 모두 같은 시리즈의 RPG이지만 그 차이는 놀랍습니다.

Iron Man과 같은 Marvel 영화의 미래 지향적 인터페이스도 제게 영감을주었습니다. 정확히 사용할 수있는 예는 아니지만 전체적으로 컴퓨팅에 대해 더 많이 생각하게합니다. 미래의 화면을 원합니까, 아니면 화면이 사라지기를 원합니까? 이것은 디자이너로 가득한 술집에서 포즈를 취하는 좋은 질문 일 것입니다.

열심히 일하고 끈기 있고 동료들과 이야기하고 끔찍한 독서를 통해 디자이너로 성장합니다. 약 1 년 전 저는 뉴욕 타임즈에서 자신의 기술을 계속 연마하는 80 대까지의 사람들에 대한 기사를 읽었습니다. 시작일 뿐인 것 같아요. 당신 은요?