🔖 2021년 7월 3주 TOP3

🔖 2021년 7월 3주 TOP3

1. 주니어 디자이너들, 이런 실수 하지 마세요!

2.UI 디자이너를 위한 After Effects 플러그인 10가지

3.UX/UI 디자인의 색상에 대한 궁극적인 가이드

주니어 디자이너들, 이런 실수 하지 마세요!

배우는 동안 우리는 많은 실수를 하고 그 분야의 전문가가 된 후에 알게 될 것입니다. 이러한 실수는 많은 시간과 노력을 낭비될 수 있습니다. 그래서 저는 올바른 방법으로 디자인을 배울 수 있도록 주니어 디자이너들을 돕기위해 이야기를 가지고 왔습니다. 이 기사는 주니어 디자이너에게 많은 도움이 될 것입니다. 따라서 이것을 그들과 공유하는 것을 잊지 마십시오.

1. 화려한 디자인에 구애받지 않습니다.

 UI / UX는 Dribbble에서 주로 볼 수 있는 멋진 디자인을 디자인하는 것이 아닙니다. Dribbble은 모든 곳에서 멋진 물건으로 가득 차 있습니다. 주니어 디자이너는 대부분 그 멋진 디자인을 배우는 데 빠져 있습니다. 제가 전하고 싶은 것은 UI / UX 디자인은 사용자의 문제를 해결해야 합니다. 아름다운 화면을 보여주는 UI를 디자인 할 수는 없습니다. 좋아요와 감사를 위해 멋진 물건을 디자인하지 마세요. Behance의 제작자는 대부분 우수 사례를 업로드하기 때문에 영감을 얻으려면 Behance를 추천합니다. 이러한 우수 사례는 정말 많은 도움이 될 것입니다.

2. 시각적 디자인에 뛰어 들지 않습니다.

모든 전문 디자이너는 디자인 프로세스를 따르지만 대부분의 주니어 디자이너는 이러한 단계를 따르지 않습니다. 

UI / UX 디자인 프로세스는 모든 디자이너가 따라야 합니다.
1. 사용자 페르소나 (사용자 요구 사항 및 문제점 이해)
2. 경쟁사 분석 (항상 경쟁사의 제품을 조사하고 그보다 더 나은 제품을 만들기 위해 노력합니다.)
3. User flow (시작 화면에서 끝 화면까지의 사용자 경로)
4. Lo-fi Prototypes (종이에 화면 스케치를 시작하면 시간이 절약됩니다)
5. Hi-fi Prototypes (스케치를 디지털 와이어 프레임으로 변환)
6. 사용자 인터페이스 (최종 인터페이스 디자인)
7. 프로토타입 (흐름을 디자인에 연결)
8. 사용성 테스트 (이 기술은 잠재적인 사용자를 대상으로 테스트하여 제품을 평가하는 데 도움이 됩니다.)

3. 디자인 할 때 UX 기본 사항을 배웁니다.

UX 법률 지식 없이 디자인하는 경우 시간 낭비가 됩니다. UX는 디자인 프로세스의 일부입니다. 잊지 마세요. UX가 없는 디자인을 가정하면 엔진이 없는 테슬라 자동차와 같습니다. UI는 자동차의 외관일 뿐이지만 UX는 엔진이 될 것이기 때문입니다. UX가 없는 UI를 이해하셨기를 바랍니다. 여기에서 UX 법칙을 배울 수 있습니다.

4. 타이포그래피 및 색상에 관한 사항입니다.

색상과 타이포그래피를 무시하지 말고 항상 좋은 글꼴 쌍과 색상을 사용합니다. 글꼴 쌍을 현명하게 선택하고 화면에서 글꼴 계층을 유지합니다. 글꼴을 두 개 이상 사용하지 않습니다. 세 가지 색상만 사용하고 대비를 이해합니다. 색상 팔레트 사용 및 색상 규칙에 대해 알아 봅니다. 더 나은 디자인을 할 수 있습니다.

.  
.  
👇 더 자세한 내용은 아래 원문에서 확인해주세요.

UI 디자이너를 위한 After Effects 플러그인 10가지

After Effects는 대화형 프로젝트를 위한 애니메이션을 디자인하고 프로토타이핑하는 데 가장 유용한 도구 중 하나가 되었습니다. 그러나 AE는 학습해야 할 수천 가지 기능이 있는 복잡한 도구입니다. 다행스럽게도 워크 플로우 속도를 높이고 시간이 많이 걸리는 작업을 처리하거나 복잡한 애니메이션 곡선을 처리할 수 있는 많은 플러그인, 도구 및 유틸리티가 있습니다.

UI모션을 디자인하기 위해 After Effects를 사용하는 UI 디자이너에게 가장 중요한 것은 AE는 애니메이션을 깨끗한 CSS 또는 JS애니메이션으로 변환하는 도구를 찾는 것입니다. Louis Ansa의 이 주제에 대한 매우 유용한 장들을 공유하기로 결정했습니다. 환상적인 강좌 : 애니메이션 시스템을 통해 의미있는 경험을 디자인합니다.

AE 플러그인 및 도구

우리가 선택한 플러그인 중 일부는 무료이며 다른 플러그인은 액세스 가능한 가격으로 제공됩니다. 이들 모두는 복잡한 중첩 컴포지션을 처리하고, 곡선을 완화하고, 앵커 포인트를 쉽게 관리하고, 레이어를 정렬하거나, 애니메이션 파라미터를 CSS 또는 JS로 번역하는 데 도움이됩니다.

Flow - 애니메이션 곡선을 사용자 정의할 수 있는 After Effects에 대한 간편한 인터페이스 플러그인

그래프 편집기를 사용하지 않고도 애니메이션 곡선을 사용자 정의할 수있는 After Effects의 간편한 인터페이스입니다. 사전 정의된 25개의 일반 모션 곡선이 제공되며, 라이브러리를 직접 구축하여 공유하거나 다른 애니메이터가 사전 정의한 설정을 가져올 수 있습니다.

AEUX - 모든 Sketch 및 Figma 레이어를 After Effects로 내보내는 플러그인.

Figma 및 Sketch 파일을 After Effects로 내보내고 모양 및 텍스트 레이어를 사용하여 편집 가능한 시각 디자인 프로젝트를 만들 수있는 편리한 도구입니다.

Video Copilot의 FX 콘솔 - After Effects 용 워크 플로 플러그인

After Effects 워크 플로우 개선 - 원하는 효과와 사전 설정을 입력하고 레이어에 직접 적용하여 시간을 절약하고 집중할 수 있습니다.

RD Comp 설정기 - After Effects 구성 설정

컨트롤이 있는 팔레트는 구성의 크기, 픽셀 가로 세로 비율, 지속 시간, 프레임률, 옵션 유지, 모션 흐림 및 렌더러를 변경할 수 있으며 모든 레이어를 2D 또는 3D로 변경할 수도 있습니다.

. .👇 더 자세한 내용은 아래 원문에서 확인해주세요.

UX/UI 디자인의 색상에 대한 궁극적인 가이드

초보자에서 고급까지 팁 & 이론 및 모범 사례

이 기사는 moonlearning.io의 UX / UI 기본에 대한 전체 과정에서 발췌 한 것입니다. 여기에서 미리 보기 비디오를 찾을 수 있습니다.

색상은 UI 디자인의 주요 요소 중 하나입니다. 제품의 첫인상을 세련되고 쿨한 느낌에서 미친 듯하고 거친 느낌으로 바꿀 수 있습니다. 예쁜 색을 섞는 것이 아니라, 시스템을 만드는 것입니다. 먼저 기본부터 시작하여 전문가 수준까지 올라가 보겠습니다.

색상 값. 언제 사용합니까?

색상은 여러 가지 방법으로 기록 할 수 있으며 가장 일반적인 색상은 Pantone, CMYK, HEX 및 RGB입니다. 우리는 화면 디자인에 HEX와 RBG만 사용하지만, 온라인과 오프라인에서 브랜드를 다룰 가능성이 가장 높으므로 차이점을 이해하는 것이 여전히 중요합니다.

Pantone → 인쇄에 사용

잉크의 정확한 혼합이므로 전 세계적으로 동일한 색상입니다. 가정용 프린터로 Pantone을 인쇄 할 수는 없지만 공식 Pantone 색상 표를 참조로 볼 수 있습니다. 전문 프린터는 특정 Pantone을 받아 인쇄를 위해 기계에 추가합니다. 따라서 일반적으로 Pantone 색상을 인쇄하는 것이 더 비싸기 때문에 주로 다른 미디어에서 일치해야 하는 로고 또는 브랜드 요소에 사용되며 나머지는 CMYK로 유지됩니다.

CMYK → 인쇄에 사용

시안, 마젠타, 노랑 및 검정의 4가지 색상을 혼합하는 것은 다른 모든 인쇄 색상의 기본입니다. 이들은 또한 가정용 프린터 및 전문 인쇄소에서 볼 수 있는 4가지 색상입니다.

RGB → UI 디자인에 사용

RGB는 빨강, 녹색 및 파랑을 나타냅니다. 모니터는 이러한 색상을 방출하므로 잉크가 아닌 빛으로 만들어집니다. 빛의 색상 스펙트럼은 인쇄물보다 큽니다. 시스템이 다르기 때문에 인쇄 및 화면 색상이 100% 일치하지 않습니다. 팔레트가 그 자체로 조화로운 한 문제가 되지 않습니다. 알아두세요.

UI 디자인에서 RGB 값을 제공할 때 범위는 0–255입니다. R = 255, G = 255, B = 255 또는 RBG = 255,255,255는 흰색이고 RGB = 0, 0, 0은 검정색입니다.

RGBA → UI 디자인에 사용

RGB와 동일하며 A는 추가 알파 채널을 나타냅니다. Alpha는 투명도를 0.0(완전 투명) 및 1.0(완전 불투명)으로 조절합니다.
예를 들어 RGBA = 255, 255, 255, 0.5는 투명도가 50% 인 흰색입니다.

HEX → UI 디자인에 사용 👈

이것을 사용하세요! RGB는 완벽하지만 메모하는 것은 약간 지루하고 HEX는 그저 짧은 형태일 뿐이며 항상 RBG와 똑같은 색상을 표시합니다. 문자열 형식으로 인해 처리, 복사, 붙여 넣기 및 공유가 조금 더 쉽습니다.
16진수는 앞에 해시가 있는 6자리 숫자로 구성됩니다. 처음 두 자리는 R, 두 번째는 G, 세 번째는 B입니다. 이것이 RGB와 Hex가 동일한 이유입니다.

참고 : 인쇄 및 화면 디자인의 색상은 잉크를 혼합하여 인쇄하고 빛을 조합하여 스크린을 만드는 등 다른 방식으로 만들어지므로 절대 완벽하게 정렬되지 않습니다. 중요한 것은 각각 팔레트를 그 자체로 조화롭게 만드는 것입니다.
.  
.  
👇 더 자세한 내용은 아래 원문에서 확인해주세요.

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

디자이너 공유, UXUI 스터디 참관, UX 발표자료 공유등 다양한 정보를 노션에서 확인하세요.

💭 단톡방 가입문의  (1,900명)

🎥 유튜브 UXUI 공개 영상  

🔖 이메일 

📍 SNS   @from.designer 페이스북 , 인스타그램