🔖 UXUI 해외 인기 아티클

🔖 2022년 8월 2주 TOP3

1️⃣ 그리드를 사용하여 만든 반응형 디자인

2️⃣ 개발자에게 디자인을 넘기는 방법

3️⃣ 0에서 1로 디자인 시스템 구축: 색상 시스템

1️⃣ 그리드를 사용하여 만든 반응형 디자인

그리드 시스템은 UI 디자인에서 가장 중요한 도구 중 하나입니다. 디자이너가 반응형 레이아웃을 보다 간단하고 쉽게 만들 수 있도록 도와줍니다. 집에 있는 컴퓨터에서 이메일 쓰기를 시작해서 지하철 출퇴근길이나 커피숍 안에서 태블릿이나 휴대전화로 끝낼 수 있습니다.

우리는 다양한 기기와 화면 크기를 통해 콘텐츠에 접근합니다. 그리고 이러한 앱은 작업 중인 화면 크기에 관계없이 작업에 접근할 수 있도록 조정가능해야 합니다. 따라서 오늘날 주요 이슈는 콘텐츠를 우리 손에 있는 다양한 화면과 장치에 적용하는 것입니다. 그것에 대해 더 알고 싶다면 더 이상 기다리지 마십시오. 이 기사에서는 그리드의 기초에 대해서 설명합니다.

그리드란?

그리드는 페이지를 열이나 모듈로 나누는 보이지 않는 선으로 구성된 구조입니다. 이 열은 디자이너가 디자인을 통해 페이지 요소를 정렬하고 구성하는 데 도움이 됩니다. 그리드 시스템으로 작업하면 디자이너가 요소를 조정하고 정렬할 수 있으므로 적은 노력으로 일관성을 유지할 수 있습니다.그것들이 얼마나 중요한지 이해하기 위해, 당신의 눈 또는 "직관 본능"만을 믿으면서 페이지의 모든 요소의 크기를 조정하는 것이 얼마나 어려울지 상상해 보십시오.

더 높은 정밀도와 유연성 그리드는 페이지 내에서 요소를 쉽게 정렬할 수 있으며 디자인 일관성을 보장하기 위해서 필수적입니다. 열, 행 및 여백의 체계는 페이지 레이아웃의 프레임워크로 작동하여 앱과 웹사이트를 보다 조직적이고 정확하게 반응하여 디자인할 수 있습니다. 따라서 그리드는 다양한 크기의 화면에서 플랫폼 간 대응을 위해 훨씬 더 큰 유연성을 제공합니다. 이러한 유연성 덕분에 인터페이스가 다양한 장치에 적응하고 디자이너를 미치게 만들지 않고도 각 화면 크기에 적절한 상호 작용을 제공할 수 있습니다.

그리드는 오래된 개념입니다.

콘텐츠로 채워야 하는 앱, 웹 사이트 및 소프트웨어와 함께 기술적인 맥락에서 그리드가 얼마나 가치 있는지 상상하는 것은 매우 쉽습니다. 그러나 이 도구는 오랫동안 사용되어 왔습니다. 그리드는 책의 요소를 구성하는 데 사용되었으며 예술가가 완벽한 기하학을 찾는 르네상스 미술에서도 사용되었습니다. 13세기에 프랑스 건축가는 오늘날에도 여전히 사용되는 기술인 the Villard de Honnecourt 다이어그램을 개발했습니다. 제작자의 이름을 딴 이 기술은 그리드 시스템과 황금 비율 개념을 혼합하여 고정 비율을 기반으로 여백이 있는 레이아웃을 만들었습니다.

전문 용어

그리드의 유형과 사용 방법에 대해 알아보기 전에 먼저 이 개념과 관련된 용어를 이해합시다. 따라서 다음과 같이 간단히 설명하겠습니다.

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

2️⃣ 개발자에게 디자인을 넘기는 방법

당신이 속해있는 회사나 특정 UI/UX 분야에 상관없이 몇 번의 핸드오프와 끝없이 주고받는 커뮤니케이션을 하지 않고는 디지털 프로덕트를 전달할 수 있는 방법은 없습니다. 경험이 많은 프로덕트 팀에게도 다소 고통스러울 수 있는 핸드오프 중 하나는 디자인에서 개발 단계 또는 개발자 핸드오프입니다. 이것은 프로세스의 필수 단계입니다. 일관된 경험을 만들려면 디자이너와 개발자 모두 똑같은 입장에서 동일한 결과를 내기 위해 노력해야 합니다. 그러나 때로는 말처럼 쉽지 않습니다.

모든 팀들은 디지털 프로덕트와 사용자 경험의 다양한 측면에 중점을 두었기 때문에 개발자와 디자이너 사이에 단절이 생기는 것이 일반적입니다. 결과적으로 이것이 원활하지않은 핸드오프 프로세스로 이어질 수있습니다. 디자이너에서 개발자로의 핸드오프를 버터처럼 매끄럽게 만들기 위한 몇 가지 아이디어를 살펴보겠습니다.

중요성 이해

경험이 적은 디자이너에게 핸드오프는 프로세스의 매우 공식적인 단계처럼 보일 수 있습니다. 그들은 이미 디자인에 많은 시간을 할애하고 있습니다. 어쩌면 이미 힘들 수도 있습니다. 그리고 그들의 디자인이 마침내 살아나는 것을 보고 싶을 뿐입니다. 이미 일은 끝난 느낌이지만 그렇지 않습니다. 코드에서 제대로 구현되지 않은 경우 Figma안에서의 디자인은 가치가 없습니다. 사용자가 상호 작용하는 것만이 중요합니다. 디자인 프로세스 초기에는 분명하지만 작업에 투입한 모든 픽셀과 변형과 이미 결합되어 있는 경우에는 그렇지 않습니다.

발표하고 대화하기

디자이너와 개발자는 배경과 사물을 보는 방식이 다릅니다. 디자이너에게는 절대적으로 명백한 것들이 개발자에게는 아닐 수도 있고 그 반대의 경우도 마찬가지입니다. 개발자는 시스템과 패턴에 대해 생각하고 미학과 균형에는 관심을 덜 가집니다.개발자가 ‘핸드오프’ 단계에서 디자인을 처음 보는 것은 나쁜 습관입니다. 일찍 그리고 자주 의사소통을 해야 합니다. 당신은 그것만으로도 이익을 얻을 것입니다. 개발자는 배경, 기술과 관심사가 다르기 때문에 동일한 문제에 대해 매우 다르게 생각합니다.

이것은 귀중한 피드백을 받을 수 있는 기회입니다. 개발자가 사용자에게 부정적인 영향을 줄 수 있는 문제를 발견할 때 경험과 디자인의 일부일 수 있습니다. 이 문제는 빌드 중간이나 QA 단계보다는 프로세스 초기에 찾는 것이 좋습니다. 프로덕트 개발에서 초기 커뮤니케이션은 매우 중요하며 초기에 디자이너와 개발자가 연결되지 않았을 경우에는 상상할 수 없을 정도로 나쁩니다. 제대로된 의사 소통의 실패는 일반적으로 성공적인 핸드오프와 프로젝트의 가장 큰 원인 중 하나입니다.

인터랙티브 목업과 시각적 지침은 둘 다 같은 방식으로 보이게 하는 좋은 방법입니다. 한 장의 사진이 천 마디 말의 가치가 있지 않습니까? 프로젝트의 작은 세부 사항에 대해 직접 대화를 나누는 것이 가장 좋지만 가상 모임도 괜찮은 선택입니다. Loom과 같은 도구는 특정 흐름을 설명하거나 보다 개인적이고 재사용 가능한 지침을 제공하는 데 도움이 됩니다.

..

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

3️⃣ 0에서 1로 디자인 시스템 구축: 색상 시스템

미션

색상 역할, 색상 관계, 접근성 평가 및 토큰을 명확하게 설명하는 색상 시스템을 빠르게 생성합니다.

리서치에서 시작

잘 알려진 회사에서 구축한 몇 가지 놀라운 디자인 시스템에 대해 읽었습니다. 가장 흥미로운 것은 Shopify와 Zendesk Garden입니다. Shopify는 기능적 역할에 따라 색 구성표를 구성했습니다. Shopify의 색 구성표는 간결하고 논리적이며 이해하기 쉽습니다. 그리고 Shopify의 색상 명명 방식은 매우 논리적입니다.

반면 Zendesk는 1차, 2차, 3차 논리를 기반으로 색상을 설명했습니다. Zendesk가 색조 색상과 같은 더 많은 색상 세부 정보를 표시했지만 청중은 색상이 실제로 무엇을 하는지 또는 색상이 의미하는 바를 이해하기 어려울 것입니다.

머티리얼 디자인 3을 읽은 후 머티리얼 디자인 3이 디자인 시스템의 색 구성표를 문서화하고 전달할 수 있는 훌륭한 프레임워크를 제공한다는 것을 알았습니다. 디자이너가 보다 논리적이고 과학적인 방식으로 디자인 시스템을 이해하고 구축하는 데 도움이 됩니다.

구조를 보면 Accent Key Colors, Neutral Colors, Additional Colors로 구성되어 있습니다. 각 색상 그룹에는 1차, 2차 및 3차의 3가지 역할이 있습니다. 중요하게도 Material Design 3는 색상, 온컬러, 색상 컨테이너 및 온컬러 컨테이너를 표시하는 4열 프레임워크를 사용하여 색상 간의 관계를 강조합니다.

아시다시피 색상 변형은 UI 디자인에 매우 유용하며 색조 팔레트에서 제공되며 UI 접근성을 개선하고 색상 시스템의 균형을 유지하며 색상 조화를 유지합니다.

..

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

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

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

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

🎥 유튜브 UXUI 공개 영상  

🔖 이메일 

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