🔖 2021년 7월 5주 TOP3

🔖 2021년 7월 5주 TOP3

 더 빠르게 만드는 40개 이상의 Figma 팁

디자인 프로세스에서 시간을 절약하면 창의성을 유지할 수 있습니다. 디자인에서 길을 잃으면 창의성이 떨어집니다. 따라서 저는 디자인할 때 항상 바로 가기, 팁 및 트릭을 좋아합니다. 특히 내가 마스터가 되고 싶을 때는 팁과 요령을 터득해야 할 때라고 생각합니다.

이전에 이 시리즈의 첫 번째 기사를 게시했습니다. 거기에서 몇 가지 더 간단한 방법을 찾을 수 있습니다. 그러나 Figma는 들어오는 업데이트와 함께 새로운 바로 가기를 지속적으로 추가하고 있습니다. 그래서 나는 이 기사를 최신 상태로 유지하려고 노력할 것입니다. 이제 바로 가기로 빠르게 이동하겠습니다.

참고 :  Cmd는 Ctrl, Option은 Windows에서 Alt

 1 — Cmd on Image : Cmd 버튼을 클릭하여 이미지를 자를 수 있습니다. (*new)

 2 — In-Page Linking/Redirecting : 웹사이트 상의 앵커 링크등 페이지 내의 요소로 링크할 수 있습니다.

 3 — Control(^) + C 또는 I 키 : 색상 팔레트를 선택합니다.

 4 — Cmd , "number"(불투명도) 순으로 입력 : 요소를 선택하고 cmd 버튼을 클릭한 후 1~ 9 사이의 버튼을 클릭하여 불투명도를 변경할 수 있습니다. (키 1은 10%, 키 9는 90%). 당신은 아마 이것을 알고 있었을 것입니다. 그러나 여기서 추가되어 0을 빠르게 두 번 누르면 불투명도는 0%가 됩니다. 또는 두 개의 키를 빠르게 누르면 해당 키의 값을 사용합니다. (예 : 8과 9는 89%의 불투명도를 제공합니다).

 5 — Control + Option + T : 정리합니다. 흩어진 요소를 특정 방식으로 정렬합니다.

 6 — 정리 정돈 : 일괄 선택에서 요소를 정리한 후 커서로 좌우 공간을 조정할 수 있습니다. 또한, 순서/비율을 어지럽히지 않고 요소를 서로 교체하는 것이 가능합니다.

 7 — Drag + Space : 선택한 영역의 위치를 ​​변경하려면 영역을 선택한 후 스페이스바를 이용하면 됩니다.

 8 — Cmd + "number"(탭) : 둘 이상의 파일/탭이 열려 있는 경우 브라우저에서와 같이 cmd + "number" 조합으로 탭 간에 전환할 수 있습니다. 물론 홈페이지도 탭입니다.

 9 — Cmd + Dot(.) : 오른쪽 및 왼쪽 패널을 닫습니다. 따라서 최소한의 작업 공간이 있습니다. 동일한 키 조합을 사용하여 패널을 열 수 있습니다.

 10 — Cmd + | : 이 조합은 또한 왼쪽 패널만 숨깁니다.  같은 조합을 사용하여 다시 열 수 있습니다.
.  
.  
👇 더 자세한 내용은 아래 원문에서 확인해주세요.

카드 UI 디자인을 위한 최고의 가이드 

더 나은 카드 UI 디자인을 위한 팁과 요령, 그리고 모범 사례들을 소개합니다.

카드 디자인은 Instagram 및 Facebook과 같은 소셜 미디어 사이트에서부터 Amazon과 같은 전자 상거래 매장에 이르기까지 매우 보편적인 디자인입니다. 카드 레이아웃은 상당히 빠르게 인기를 얻었습니다.

카드 디자인은 정보 컨테이너로서 텍스트, 리치 미디어, 버튼 등과 같은 모든 요소를 포함하고 있습니다. 이 콘텐츠들을 기반으로 사용자 인터페이스(UI)와 사용자 경험(UX)의 균형을 유지하면서 다양한 기기와 화면의 크기에 맞게 크기를 조정 가능합니다.

카드란 무엇일까요?

카드는 단일 사례에 대한 콘텐츠와 작업을 포함하는 UI 구성 요소입니다. 카드에는 다양한 요소를 포함시킬 수 있지만 모두 하나의 단일 주제에 관한 것들이어야 합니다.

이 기능의 목적은 긴 텍스트를 피하고 더 많이 눈으로 스캔 가능한 콘텐츠를 보여주는 것입니다. 사용자는 디자인적인 측면에서의 카드 개념에 익숙하지 않을 수 있지만, 실제 물리적인 카드와 동일하기 때문에 사용법을 즉시 알 수 있습니다.

왜 이렇게 인기가 많을까요?

카드는 내용을 억제하는 것처럼 보이기 때문에 인기가 있습니다. 카드는 모듈형이기 때문에 서로 다른 콘텐츠 항목을 서로 구분 없이 함께 쌓을 수 있습니다.

카드는 콘텐츠를 카드 경계(패딩&마진 등) 및 카드의 시각적 레이아웃의 제한에 맞게 조정하기 때문에 콘텐츠가 축소화됩니다. 이러한 카드를 사용하는 디자이너들은 디자인이 어수선해질 염려 없이 수많은 콘텐츠를 다양하게 혼합하고 일치시킬 수 있습니다.

카드는 콘텐츠를 사용자가 상호 작용할 수 있도록 하는 소화할 수 있는 비트로 분류할 수 있습니다. 카드는 콘텐츠 컨테이너를 제공함으로써 콘텐츠가 사용자에게 실제적이고 감성적임을 나타냅니다.

또한 카드 UI 디자인은 다른 여러 가지 이유로 인기가 있습니다.

직관적인 디자인:
UI에서 보이는 카드 디자인은 실제 카드와 동일하게 보입니다. 이는 사용자들에게 공통적으로 나타나는데요, 카드는 모바일과 웹 앱에서 인기가 있기 전에도 명함이나, 야구 카드, 스티커 메모 등 실제 생활 전반에 흔히 존재했습니다. 카드는 마치 실제 생활에서처럼 우리의 뇌가 카드를 나타내는 콘텐츠와 직관적으로 연결할 수 있게 해주는 시각적인 유익한 유사성을 나타냅니다.

소화하기 쉬운 디자인:
  카드는 공간을 많이 차지하지 않으며 디자이너에게 카드 콘텐츠에 우선순위를 부여하도록 촉구합니다. 한마디로, 각 카드는 쉽게 접근 가능하고 탐색할 수 있도록 소화 가능한 콘텐츠가 됩니다. 카드 UI를 사용하면 사용자가 관심 있는 콘텐츠를 쉽게 찾을 수 있습니다.

매력적이고 사용자에게 친숙한 디자인:
  카드 UI는 대개 시각적인 자료(특히 이미지)에 크게 의존합니다. 모든 카피 텍스트들은 일반적으로 정보 아키텍처 측면에서 시각 자료들보다는 부차적입니다. 이미지 사용에 중점을 두게 되니 카드 UI가 적용되지 않은 동일한 콘텐츠보다 카드 UI가 더 매력적으로 사용자들에게 보일 수 있습니다.

반응성이 뛰어난 디자인:
  카드는 다양한 화면의 수평 및 수직에 맞춰서 사각형 모양이 부드럽게 조정이 가능하므로 모든 기기에서 통일된 환경을 제공합니다.

공유 가능:
  카드는 사용자가 페이지 전체가 아닌 특정 콘텐츠만 쉽게 공유할 수 있도록 하기 때문에 SNS에서 콘텐츠를 쉽게 공유하도록 장려될 수 있습니다.
.
.
👇 더 자세한 내용은 아래 원문에서 확인해주세요.

취업이 되는 프로덕트 디자인 포트폴리오 비결

요즘의 기업들은 프로덕트 디자이너를 뽑을 때 어떤 부분을 찾을까요? 예 맞아요, 맞춤형 경험과 인터페이스를 만드는 능력도 한 부분이 될 수 있겠지요. 하지만 Google과 같은 대형 기술 회사나 엄격한 요구 사항을 가진 스타트업 고용관리자, 혹은 프로덕트 책임자들 앞에서 만드는 포트폴리오에는 또 다른 단계 수준이 있습니다. 이 사람들은 여러분의 포트폴리오에서 몇 가지 구체적인 항목들을 찾고 있습니다. 

그래서 저는 여러분의 관심을 끌 수 있도록 몇 가지 팁을 알려 드릴까 합니다. 제가 이야기하는 것은 디자인 방법에 대한 가이드가 아닙니다. 이미 여러분들은 디자인 방법을 알고 계실 것입니다. 그렇기에 대신, 포트폴리오가 전환될 수 있도록 도움이 되는 전략적 체크포인트를 알려드릴 것입니다.

저는 이 프로덕트 디자인 업무를 프리랜서로 10년 동안 작업해 왔으며, 여러분이 잘 알고 있는 초대형 스타 기업과 아직 데뷔하지 않은 초신성 기업들과도 함께 일하고 있습니다. 지난 몇 년 동안 받은 피드백에 대해 많은 것을 알 수 있었으며, 이 중에 가장 유용했던 일화 몇 가지를 여러분들과 함께 나누고자 합니다. 

비록 프로덕트 디자인 분야에서 프리랜서로서의 제 경험이 많지만, 이러한 패턴들은 정규직 일자리를 찾는 제품 디자이너들에게도 분명 잘 적용될 수 있을 것입니다. 자, 준비하세요. 베이스 신호를 주세요.

들어가기 전에... 기본은 알고 계시죠?

자, 이를 포트폴리오 전에 사전 게임이라고 생각해 봅시다.  여러분의 첫인상이 어떨지, 간단히 확인해 보세요.

여러분이 실제 디자인 작품처럼 여러분의 사이트에 태클을 걸어보세요.

템플릿과 핑계들은 허용되지 않습니다. 여러분의 웹사이트는 여러분의 첫인상이기 때문에, 최우선적으로 다루어야 합니다. 프로덕트 디자인 포트폴리오는 특별한 경험을 주어야 합니다. 잠재 수요자들이 검토하면서 여러분들의 UX과 및 UI 감수성을 평가하게 될 것입니다. 

그래픽적인 시각적인 디자인 포지션을 가지 않더라도 계층 구조나, 네거티브 공간 및 타이포그래피와 같은 디자인 기본은 여전히 중요합니다. 방문하는 사람들이 당신의 사이트를 방문하고 싶어도 꺼지게 된다면 여러분은 처음부터 다시 부팅해야 합니다. 이건 다음 이야기와 관련이 있는데요; 바로 내비게이션입니다.

여러분의 사이트는 쉽게 탐색돼야 합니다.

방문자들이 첫 번째 화면을 지나가게 해야 합니다. 이 말은 지금은 내비게이션 기능을 사용할 때가 아니라는 거죠. 접근하기 쉬운 명확한 레이블이 지정된 페이지가 매번 승리하게 됩니다. 

물론, 커서를 다른 개체로 변경되는 매끄러운 사이트들은 점진적인 것처럼 보일 수 있지만요, 기능적인 것들은 때때로 사용자를 신속하게 사이트 밖으로 즉시 보내버리는 성가신 경비원처럼 동작하기도 합니다. 사이트 탐색이 지루할 필요는 없지만, 실격되어서는 더욱 안됩니다. 그러니, 한계를 뛰어넘고 있다면 기교가 들어가고 있는지 확인하세요.

여러분의 기본 정보가 올바른 위치에 있어야 합니다.

저는 한때 엄청난 기회를 놓친 적이 있습니다. 이건 제가 기본 원칙을 무시했기 때문에 일어난 일이었습니다. 연락처 정보에 SNS 프로필과 Link를 연결할 수 있는 설정이 있거나, 모든 항목들을 정기적으로 일일이 확인하지 못하는 경우에는 이를 꼭 변경하도록 하세요. 절 믿으세요. 그리고 기본에 충실하세요: 여러분이 하는 일이 무엇이며(*#1), 다른 사람들이 여러분에게 연락할 수 있는 방법은 무엇인가요?(*#2) 이것은 채용 관리자와 헤드헌터를 위한 #1 및 #2 질문입니다. 

이 정보들이 전면 중앙에 잘 배치되어 있는지 확인하고, 이분들의 메시지를 받고 응답할 수 있는지도 확인하세요. 그래야 여러분의 기술들을 보면서 올바른 곳으로 왔구나를 알려주게 되며, 여러분 연락처는 이 분들의 행동을 촉구하게 되는 암묵적인 요구 사항인 것입니다. 필요한 정보를 제공하지 않으면서도 원하는 정보를 제공할 수 있도록 해주세요.

아주 개인적인 것이나 변칙적인것을 빠뜨렸습니다.

여러분의 개인적, 직업적 관심사를 나열해 보세요. 전체적으로 조금 더 욕심내서 그림을 그려본다면 여러분의 배우자에 대한 정보나 자녀, 애완동물이 있다는 정보도 추가할 수도 있습니다. 하지만 나이, 키, 종교, 생일과 같은 지나친 개인 정보에 대해서는요? 안됩니다. 

이러한 것들은 프로덕트 디자인 직책을 정규직으로 채용하려는 경우에서, 당혹스럽게도 가망이 없거나 잠재적인 골칫거리가 될 수도 있습니다. 교육 및 교육 과정에 대한 관심 분야가 있는 사람의 그림을 한번 그려보세요. 아, 그리고 약간의 팁이 있는데, 소프트웨어에 대한 전문 지식을 보여줄 때는 별표이나 슬라이더를 건너 뛰세요. 이것들은 템플릿으로 고착화된 문화의 기믹입니다.

여러 프로젝트를 보여주세요.

이것은 만약에 여러분들이 망을 넓히는데 관심이 있다면 더욱 그렇습니다. 사이트 방문자들은 사이트에서 볼 수 없는 작업 유형들을 할 줄 안다고 반드시 생각하지 않습니다. 따라서 포괄적이어야 합니다. 앱, 웹 사이트 및 IoT 인터페이스까지 추가할 수도 있습니다. 

또한 방문자들은 프로덕트 디자인 포트폴리오에 표시된 접점 및 카테고리에 게시된 작업들을 좋아한다고(또는 최소한의 작업을 원한다고) 생각할 것입니다. 이에 대한 이야기는 아래에서 좀 더 자세히 설명해보겠습니다.
.
.
👇 더 자세한 내용은 아래 원문에서 확인해주세요.

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

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

💭 단톡방 가입문의  (2,070명)

🎥 유튜브 UXUI 자료 영상  

🔖 이메일 

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