콘텐츠
- 01. 눈금자와 눈금자
- 02. 연필로 시작해보세요
- 03. 디지털 프로토 타이핑 및 와이어 프레임
- 04. UI 공짜 및 아이콘으로 시작
- 05. 색상 도구 사용
- 06. 웹 안전 타이포그래피
- 07. 벡터 객체에 집착
- 08. 중복 레이어 및 레이어 스타일
- 09. 레이어 및 그룹 이름 구성
- 10. 연습은 완벽을 만든다
신뢰할 수있는 모형 디자인 프로세스를 확정하려면 수년 간의 연습이 필요합니다. 전문 디자이너조차도 종종 새로운 개념과 창의적인 아이디어를 시도하기 위해 전략을 변경합니다.
The Guide to Mockups에 설명 된 바와 같이 디자인은 독창성과 즉흥성의 끝없는 과정입니다. 더 많은 전략을 배울수록 새로운 표현 방식에 대한 더 많은 기회가 있습니다.
다음 팁은 웹 디자이너 및 블로거로서의 경험을 통해 추출되었습니다. 실용적인 기술과 워크 플로 개념을 통해 모형 디자인 프로세스를 개선하는 데 도움이되기를 바랍니다.
01. 눈금자와 눈금자
일부 디자이너가 여전히 레이아웃 디자인을 위해 그리드를 따르지 않는다는 사실을 알게 된 것은 충격적인 사실 일 수 있습니다. 모든 디자이너가 항상 격자 구조를 따라야한다고 말하는 것이 아닙니다. 제가 옹호하는 것은 모든 인터페이스 모형에 대해 계획된 그리드를 사용하는 것입니다.
모든 디자인은 정렬, 공백 및 콘텐츠 계층 구조를 지원하는 체계적인 그리드 시스템을 사용하여 개선 할 수 있습니다. 완벽한 픽셀 측정은 훌륭하지만 그리드를 깨뜨려도 괜찮습니다. 그리드를 깨뜨릴 수있는 한!
또한 수평 그리드가 가장 일반적이지만 기준선이라고하는 수직 그리드도 타이포그래피와 관련하여 매우 중요합니다.
02. 연필로 시작해보세요
모든 훌륭한 디자이너는 스케치를 배우면서 가치를 찾을 것입니다. 종이와 연필은 시각적으로 창의적인 사람들을위한 가장 일반적인 도구였으며, 이것은 오늘날 우리 현대 세계에서도 여전히 유효합니다.
디자인이 디지털이라고해서 기존 매체를 피할 수있는 변명이 아닙니다. 다소 복잡하지 않은 마우스 및 키보드 인터페이스에 의존하지 않고 아이디어를 실행하고 종이에 5 ~ 10 개의 다른 구성을 기록하는 것이 훨씬 더 쉬울 수 있습니다.
03. 디지털 프로토 타이핑 및 와이어 프레임
언젠가는 디지털 디자인으로 이동해야하며 와이어 프레임은 시작하기에 좋은 곳입니다. 종이에 몇 개의 와이어 프레임을 스케치하더라도 디지털로 전송하는 것이 좋습니다.
이 프로세스는 Photoshop과 같은 소프트웨어에서 수행 할 수 있지만 이러한 기본 작업에는 인터페이스가 상당히 부풀어 있습니다. 와이어 프레임 및 프로토 타이핑 도구는 사용하기 쉽고 훨씬 빠릅니다.
예를 들어, UXPin과 같은 와이어 프레임 및 프로토 타이핑 도구를 추천합니다. UXPin은 다양한 도구를 제공하여 작업을 훨씬 더 쉽게 만들어줍니다. 사용자 정의 가능한 라이브러리와 스마트 요소는 사용자 고유의 UI 반복 UI 패턴을 만들고 필요한만큼 드롭 할 수 있기 때문에 특히 유용합니다.
내가 유용하다고 생각하는 워크 플로는 UXPin에서 와이어 프레임으로 시작한 다음 Photoshop에서 더 높은 충실도의 정적 모형을 만드는 것입니다 (스케치가 더 잘 작동하지는 않지만 잘 작동 함).
완료되면 파일을 UXPin에 다시 놓고 모든 레이어에 상호 작용을 추가하여 하이파이 프로토 타입을 만듭니다.
04. UI 공짜 및 아이콘으로 시작
모든 고 충실도 모형에는 요소를 스타일링하는 데 시간이 필요합니다. 이러한 스타일은 페이지의 단추, 배경, 아이콘 및 기타 여러 그래픽 항목에 적용 할 수 있습니다.
시간을 절약하려면 무료 소셜 미디어 아이콘 키트와 같은 인터페이스 키트 무료로 프로젝트를 시작하여 공통되거나 지루한 요소를 만드는 시간을 줄이십시오. 디자이너는 종종 필요한 모든 기존 요소가 포함 된 무료 UI 키트를 출시합니다. 또한 레이어로 구성되어 프로젝트에 대한 정확한 비전과 일치하도록 색상이나 설정을 쉽게 변경할 수 있습니다.
Photoshop 및 Sketch 용 전체 UI 키트도 쉽게 찾을 수 있습니다. 모바일 앱 디자이너라면 완전히 무료이며 각각의 새 프로젝트에 대해 사전 구축 된 기반을 제공하는 유용한 iOS 8 UI 키트와 같은 많은 리소스를 찾을 수 있습니다.
05. 색상 도구 사용
색 구성표를 스타일링하는 작업은 최고 수준의 색채 전문가가 아니라면 항상 어렵습니다. 그러나 여전히 색상 선택 도구를 사용하면 마감일이 다가오는 새 프로젝트에서 시간과 스트레스를 절약 할 수 있습니다.
Cohesive Colors라는 무료 GitHub 프로젝트를 사용하면 설정된 색상 및 고유 한 변수 패턴을 기반으로 색상 구성표를 일치시킬 수 있습니다. 마찬가지로 Paletton과 같은 색상환 선택기에 의존 할 수 있습니다.
자신 만의 멋진 색 구성표를 조합하더라도 이러한 무료 색상 도구를 사용하여 잠재적 인 대체 색상을 확인하는 것은 결코 나쁘지 않습니다. 28 개의 유용한 무료 색상 도구에 대해서는 색상 구성표를 선택하기위한이 훌륭한 도구 목록을 확인하십시오.
06. 웹 안전 타이포그래피
클라이언트 또는 크리에이티브 디렉터가 지정하지 않는 한 무료 웹 안전 글꼴 범위를 유지하십시오.
무료 서체는 Typekit과 같은 라이선스 또는 구독 갱신 비용을 지불 할 필요없이 궁극적으로 프로젝트 비용을 절약합니다. 프로젝트에서 특별히 특수 글꼴을 요구하는 경우에는 당연히이를 포함해야합니다.
그러나 "더 빠른"모형의 방식으로 말하면 기본 글꼴이나 Google 글꼴과 같은 무료 타사 옵션 만 사용하는 것이 훨씬 더 빠릅니다. 653 개의 무료 타이포그래피 리소스 목록을 확인하세요.
07. 벡터 객체에 집착
Photoshop에 익숙한 기존 디자이너는 픽셀 요소와 벡터 요소의 차이점을 모두 알고 있습니다. Photoshop 모양 및 사용자 정의 경로는 품질 손실없이 크기가 조정되는 기본 벡터 요소입니다. Sketch는 기본적으로 벡터 지원을 제공하므로 많은 UI 디자이너가 Photoshop 대신 Bohemian Coding의 대안을 선호하는 경향이 있습니다.
벡터 요소를 사용하는 이유는 가단성입니다. 각 벡터 요소를 조작하여 마지막 순간 변경 및 고해상도 레티 나 스크린 @ 2x, @ 3x 이상 모두에 대해 빠르게 확장 할 수 있습니다.
모바일 앱 디자이너는 레티 나 화면 작업에 대한 디자이너의 제안과 함께이 토론을 즐길 수 있습니다. 또한 웹에서 많은 무료 벡터 요소를 찾아서 디자인을 멋지게 꾸밀 수 있습니다.
08. 중복 레이어 및 레이어 스타일
이 모형 팁은 생각할 필요가없는 것처럼 보일 수 있습니다. 하지만 워크 플로에 자연스럽게 적용하려면 연습이 필요합니다.
동일한 페이지에 유사한 스타일의 여러 버튼이 필요한 경우 기존 버튼을 복제하고 레이어 이름을 변경하면 많은 시간과 노력을 절약 할 수 있습니다.
텍스트 및 기타 레이어가있는 버튼이있는 경우 그룹을 함께 그룹화하고 대신 그룹을 복제하십시오.
09. 레이어 및 그룹 이름 구성
레이어 구성과 관련하여 작업 모형 파일을 깨끗하고 깔끔하게 유지하는 것이 매우 중요합니다. 많은 디자이너는 조직적 문제보다 빠르게 구축하는 경향이 있습니다. 그러나 숫자로만 식별되는 수백 개의 레이어 복사본의 이름을 바꾸는 것은 훨씬 더 혼란 스럽습니다.
목표는 PSD를 한눈에 쉽게 찾아 볼 수 있도록하는 것입니다. 가능한 한 신속하게 편집 할 수 있도록 UI의 공통 영역을 기반으로 레이어를 그룹화해야합니다. 아래 스크린 샷은 레이어 계층 구조의 훌륭한 예입니다.
개발자는 결국 모형을 만들어야하므로 시각적 위생이 좋을수록 전달이 더 원활 해집니다.
자세한 내용을 알아보기 위해 Josh Sears는 Photoshop의 레이어 구성에 대한 Webdesigner Depot에 대한 훌륭한 단계별 기사를 작성했습니다.
10. 연습은 완벽을 만든다
연습이 기술 향상의 초석이기는하지만, 향상을 위해 집중하고 편안한 영역을 벗어나려고 노력해야합니다. 고맙게도 인터넷은 고품질 Photoshop 자습서에서 YouTube 비디오 및 무료 디자인 전자 책에 이르기까지 많은 무료 리소스를 제공합니다.
배우고 싶은 기술 목록을 정리하고 Google에서 방법을 검색하는 것이 좋습니다. 이 과정에서 많은 도전에 직면하게 될 것이지만,이를 통해 힘을 얻으면 UI 디자이너로서 훨씬 더 강하고 더 잘 갖추어 진 다른면이 나올 것입니다.
다음 페이지 : 더 빠르고 깔끔한 목업을위한 10 가지 팁...
