🔖 2021년 12월 5주 TOP3

🔖 2021년 12월 5주 TOP3

초심자를 위한 5가지 주요 UI 디자인 원칙

신입 UI 디자이너들을 위한 쉬운 기본 디자인 원칙 가이드

신입 UI 디자이너들을 위한 쉬운 기본 디자인 원칙 가이드유저 인터페이스(UI) 디자인은 버튼을 클릭하여 양식을 제출하거나 사진 갤러리를 스크롤하는 등 디지털 프로덕트와 통신하고 상호 작용할 수 있습니다.

훌륭한 UI 디자인은 사용자가 알아차리지도 못하는 동시에 원활한 사용자 경험을 제공해주는 것입니다. 나쁜 사용자 인터페이스는 좌절감을 불러일으키게 되고 사용자가 프로덕트를 포기하게 만들 수 있습니다.

이제 우리는 사용자 친화적인 UI 디자인이 왜 중요한지 알았습니다. 그럼 이제 디자인을 만드는 방법에 대해서는 다음과 같습니다.

모든 디자이너들은 고성능의 UI를 만드는 동안 일련의 원칙과 지침들을 염두에 둡니다. 이러한 디자인 원칙을 아는 것은 디자인을 개선하고 디자인 분야에서 성공적인 경력을 보장하는 열쇠가 됩니다.

다음은 디자인을 할 때 염두에 두어야 할 5가지 주요 디자인 원칙들입니다.

1. 선명도

인터페이스는 사용자가 작업을 더 쉽게 수행할 수 있도록 하기 위한 것입니다. 사용자가 인터페이스를 탐색하는 방법을 이해하지 못하면 모든 목적을 잃게 됩니다.

디자인을 깨끗하게 유지하고 사용자에게 목적을 제공하지 않는 버튼이나 기타 방해적인 요소를 사용하지 마세요. 사용자가 무슨 일이 일어나고 있는지 정확히 알 수 있도록 명확한 CTA와 피드백을 제공하세요.

2. 일관성

당신의 디자인이 한 눈에 비전문적으로 보일 수 있는 한 가지가 있다면, 그것은 일관성의 부족때문입니다.

유사한 디자인 요소를 사용하면 디자인이 전체적으로 연결되어 보입니다. 탐색에 동일한 유형의 아이콘을 사용하고 색상 구성표를 고수하여 디자인을 일관되게 유지하세요.

전문가 팁: 디자인에 사용할 멋지고 일관된 아이콘 모음에 아이콘 팩을 한번 사용해보세요. 여기에는 내가 제안하는 것들이 있습니다.

3. 색 이론

이 전체 아티클에서 설명할 수 있는 것보다 색상에는 더 많은 것들이 있으므로 이에 대해 자세히 설명하는 다른 아티클을 추후에 작성하겠습니다. 그러니 지금은 기본에 충실합시다.

색상에 대해 이해해야 하는 세 가지 용어가 있습니다:

Hue, Saturation 및 Value.

Hue

Hue는 밝음이나 어두움의 변화가 없는 자연 상태의 색상입니다. 예를 들어 빨강, 파랑, 녹색 등이 있습니다.

Saturation

채도는 색상의 강도를 나타냅니다. 채도가 낮을수록 회색빛이 감도는 흐릿한 색상을 의미하고 채도가 높을수록 밝고 선명한 색상을 의미합니다.

Value

이제 Value에 대해 논의해 보겠습니다. 이 색상 값은 각 색상의 명암 정도를 나타냅니다. 값이 0%이면 흰색이 되고 값이 100%이면 검정색이 됩니다.

색 구성표 만들기

자, 그럼 이제 이러한 용어를 이해했으므로 색상을 조화롭게 사용하여 디자인에 멋진 색상 구성표를 만드는 방법을 알아야 합니다.

아래 이미지는 색상을 조화와 결합하는 다양한 방법을 설명합니다.

60–30–10 규칙

초보자가 색 구성표를 만들 때 참고할 좋은 방법은 바로 세 가지 색상을 선택하는 것입니다.

그 중 하나를 Dominant/Primary 색상으로 선택하여 디자인의 60%에 사용합니다.

Secondary 색상을 선택하여 디자인의 30%에 사용합니다.

나머지 세 번째 색상은 CTA 및 즉각적인 주의가 필요한 요소에 사용되는 Accent 색상입니다.

..

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

유용한 Figma 플러그인 12가지

프로젝트 작업 시 사용되는 Figma 작업에 유용한 플러그인들을 모아보았습니다. 올바른 플러그인을 쉽게 찾을 수 있도록 3가지 범주로 나누었습니다.

콘텐츠 생성을 위한 플러그인

Unsplash

Unsplash는 간편한 검색 기능을 갖춘 방대한 스톡 사진 라이브러리입니다. 좋아하는 사진 콘텐츠들을 프로젝트에 직접 쉽게 추가할 수 있습니다.

Icons8 Icons

아이콘을 찾아 Figma에 직접 추가하는 데 매우 유용한 플러그인입니다. 컬렉션에는 38가지 스타일의 190,000개의 아이콘이 포함되어 있으며 기반은 지속적으로 확장되고 있습니다. 모든 PNG 및 SVG 파일은 수작업으로 만들어진 것들이며 픽셀 크기가 완벽합니다.

Streamline Icons

30,000개 이상의 아이콘 모음이 있는 또 다른 플러그인입니다. 각각은 얇은, 일반 및 두꺼운의 3가지 스타일로 제공되므로 선택의 폭이 넓습니다.

User Profile

프로토타입 디자인에서 멋지게 생성된 아바타들을 표시할 수 있습니다.

그래픽 및 레이아웃 작업을 위한 플러그인

Color Kit

때때로 특정 색상의 음영을 생성하는 데 사용됩니다. 예를 들어, 45개의 녹색 음영 중 1개를 찾아야 하는 경우 사용자를 즐겁게 할 것입니다. 그리고 진지하게, 프로젝트용 UI 키트를 만들 때도 도움이 됩니다.

Image Palette

업로드된 이미지를 기반으로 색상 팔레트를 생성하는 플러그인입니다.

Content Buddy

한 번에 여러 레이아웃의 동일한 텍스트를 교체해야 하는 경우에 이 플러그인을 쓰면 생산성이 크게 향상됩니다. 이 플러그인을 사용하면 각 레이아웃을 개별적으로 열 수 없으며 특정 수의 레이아웃(최대 50개)을 자동으로 변경할 수 있습니다.

Remove BG

이미지의 배경을 즉시 제거할 수 있는 플러그인입니다.

..

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

UX 디자인을 배우는 동안 저지른 나의 실수

유튜브에서 Figma Tutorial 영상을 본지 4개월이 되었습니다. 저는 돈이 없었기 때문에 부트 캠프에 가지 않았어요. 저는 독학으로 사용자 인터페이스를 공부했습니다. 이 시간 동안 저는 실수를 하고, 제 자신을 평가하고, 새로운 것을 배웠습니다.

그래서 이 글은 4개월 동안 UX 디자인을 잘못 배운 제 경험에 대한 것입니다. 이것이 제가 한 것과 같은 실수를 여러분이 저지르는 것을 막을 수 있기를 바랍니다.

기초를 배우지 못했습니다.

나는 이것이 매우 고전적이라는 것을 알고 있지만, 당신도 나처럼 독학으로 배우는 사람이라면 '무의미한 학습 진행'에 시간을 낭비하지 않기를 바랍니다. 그렇다면 실무에 들어가기 전에 이해해야 할 기본 사항은 무엇일까요?

a. UX의 법칙, 모든 UX 디자이너가 이해해야 할 가장 중요한 기본과 원칙이 있습니다. 여기에서 읽을 수 있습니다.

b. 색 이론은 색상 팔레트를 선택하는 것이 전부라고 생각하기 때문에 지루하게 들릴 수 있습니다. 하지만 그것은 당신의 디자인에 좋은 색상을 선택하는 방법 그 이상입니다. 색상 이론을 배우면 어떤 색상 모델이 자신에게 맞는지 알 수도 있죠.

c. 타이포그래피는 글이 또렷하고 이해하기 쉽고, 매력적으로 읽힐 수 있도록 활자를 배열하는 기술입니다. 타이포그래피에 대한 이해는 UX 디자인을 배우고자 하는 모든 사람에게 필수입니다.

..

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

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

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

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

🎥 유튜브 UXUI 공개 영상  

🔖 이메일 

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