🔖UXUI 해외 주간 아티클 TOP3

🔖 2023년 3월 5주 TOP3

1️⃣ Alibaba의 디자인 시스템

2️⃣ ChatGPT를 사용하여 랜딩 페이지 디자인하기

3️⃣ UI 디자인에서 텍스트 작업 가이드라인

1️⃣ Alibaba의 디자인 시스템

RTL 우선 설계 시스템을 구축하고 대대적인 재설계 동안 유지 관리한 방법

Alibaba는 MAU가 4백만 이상인 이란 최고의 여행 및 접객 회사입니다. 지난 몇 년 동안 Alibaba는 여러 분야에서 빠르게 성장했으며, 새로운 시장에 진출했습니다. 그리고 확장 가능한 기반 없이 더 빠른 개발이 필요했기 때문에 설계 및 개발 팀에 많은 문제가 발생했습니다.

2020년부터 2022년까지 제품을 대대적으로 재설계하는 동안 디자인 시스템을 구축하고, 유지 관리에서 겪었던 문제에 대한 이야기입니다.

처음에는 프로덕트 디자이너로 시작했으며, 나중에는 디자인 시스템 이니셔티브 및 웹 퍼널의 재설계를 이끌었습니다.

역사 2019년 말, 우리 디자인 팀은 UX 성숙도의 부상 단계에 있었습니다. 제품에 근본적인 UX 문제가 있었고, 제품 인터페이스는 구식이었습니다.

기능의 개발 비용이 높았고, 엔지니어링 측면에서 주요 리팩토링이 필요한 경우와 사소한 수정이 필요한 경우가 많았습니다. 프론트엔드 팀은 성능 문제로 인해 코드베이스 재작성을 고려하고 있었고, 재설계가 필요하다고 느꼈습니다.

다른 한편으로, 다양한 비즈니스 요구 사항을 가진 회사의 광범위한 제품 포트폴리오와 함께 디자인 팀의 규모가 커짐에 따라 규모 면에서 다양한 문제에 직면하게 되었습니다.

따라서 일관성과 효율성을 달성하기 위해 디자인 시스템에 투자하기로 한 결정은 쉬운 결정이었습니다. 그러나 우리가 어떻게 접근하고 싶었는지가 큰 문제였습니다. 다음에서는 이러한 일련의 과제에 대해 설명하겠습니다.

닭 또는 계란? 재설계부터 시작하여 새로운 설계를 기반으로 시스템을 정의하여 재작업 가능성을 줄여야 하는지, 아니면 현재 상태를 기반으로 설계 시스템을 구축한 후 재설계를 거쳐야 하는지의 닭이냐 달걀이냐 딜레마에 직면했습니다.

이 상황을 해결하기 위해 다음을 명확히 했습니다.

따라서 변경의 성공을 측정하기 위한 기준선과 지표를 정의하지 않고는 모든 것을 개편할 수 없었습니다. 우리는 결국 우리 제품의 현재 상태를 기반으로 기반을 구축하되, 다가오는 재설계 전에 시각적으로 개선하는 것이 더 원칙적이라고 결정했습니다.

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

2️⃣ ChatGPT를 사용하여 랜딩 페이지 디자인하기

이전에 ChatGPT를 사용하여 모바일 앱을 구축하는 방법에 대해 논의했습니다.

이 아티클에서는 도구를 사용하여 웹 페이지를 디자인합니다. 스포츠인을 위한 스마트워치의 랜딩 페이지를 디자인합니다. 이 튜토리얼은 ChatGPT가 웹 페이지 레이아웃 및 UX 작성(개별 섹션에 대한 컨텐츠 작성)에 대한 아이디어를 제공할 수 있는지 탐색하는 것을 목표로 합니다.

파트 1: ChatGPT를 사용하여 페이지 구조 정의 파트 2: ChatGPT 설명을 기반으로 페이지 레이아웃 디자인 파트 3: ChatGPT를 사용하여 실제 콘텐츠로 레이아웃 채우기 이 기사는 비디오 형식으로도 제공됩니다.

파트 1: 페이지 구조 정의

구조는 페이지의 콘텐츠 및 기능에 대한 기반을 설정합니다. 프롬프트를 작성할 때 달성하고자 하는 것을 공식화하고 ChatGPT가 의도를 더 잘 이해할 수 있도록 모든 관련 상황 정보를 언급해야 합니다. 이 경우 우리는 우리 제품이 스포츠인을 위해 설계되었음을 명시적으로 밝히고 싶습니다. 랜딩 페이지의 구조를 생성하도록 ChatGPT에 요청합니다.

ChatGPT가 제공한 정보를 기반으로 다음 섹션을 설계해야 합니다.

ChatGPT가 제안한 구조에는 두 가지가 빠져 있습니다.

파트 2: 페이지 구조 디자인

이제 ChatGPT에서 생성된 구조의 설명을 사용하여 각 블록을 디자인으로 변환해 보겠습니다. 우리는 일부 사용자가 지루하다고 생각할 수 있는 매우 일반적인 페이지를 디자인할 것입니다. 그러나 이러한 페이지는 대부분의 사용자에게 친숙하다는 상당한 이점이 있습니다. 디자인 프로세스의 속도를 높이기 위해 Figma와 Webflow 모두에서 사용할 수 있는 Relume 라이브러리를 사용합니다.

히어로 섹션 히어로 섹션은 방문자가 페이지에 방문했을 때 가장 먼저 보게 되는 부분입니다. 이 페이지는 사용자를 위한 컨텍스트를 생성해야 합니다. 사용자는 히어로 섹션을 보고 이 웹사이트가 무엇인지 알 수 있어야 합니다. 우리의 경우 히어로 섹션에는 두 개의 행동 유도 버튼 및 이미지와 함께 제품의 제목과 설명이 있습니다.

주요 특징 섹션 이 섹션에서는 지그재그 레이아웃을 사용합니다. 지그재그 레이아웃에는 이미지와 텍스트 블록 쌍이 있습니다. 방문자가 이 섹션을 스캔하면 이미지-텍스트 또는 텍스트-이미지 블록이 표시됩니다. 시각적인 흥미를 유발하고 사용자가 계속 스크롤하도록 하기 때문에 단순하면서도 매우 효과적인 레이아웃입니다.

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

3️⃣ UI 디자인에서 텍스트 작업 가이드라인

사용자 인터페이스에 텍스트가 있는 경우 다음 지침을 기억하세요.

1. 글꼴에는 개성이 있습니다.

사람처럼 모든 글꼴에는 개성이 있습니다. 그리고 사용자는 일부 성격을 다른 사람보다 더 좋아합니다. 사용자와 인터페이스의 목적을 파악하고 사용자의 기대에 맞는 글꼴을 선택하세요. 다른 글꼴은 다른 성격을 가지고 있습니다. 재미있고 현대적이며 전문적인 인터페이스를 원하는지 결정하고 적절하게 전달하는 글꼴을 선택하세요.

2.기본 글꼴 주의

기본 글꼴은 남용되는 경향이 있어 사람들이 보기 싫게 됩니다. 글꼴을 탐색하고 목적에 부합하지만 과도하게 사용되지 않은 글꼴을 찾으세요. 이것은 또한 당신이 게으른 UI 디자이너가 아니며 디자인을 위한 글꼴을 탐색하기 위해 노력한다는 것을 전달하는 데 도움이 됩니다.

3. 진부하고 보기 흉한 글꼴을 피하세요.

남용된 글꼴을 피하세요. Hello poppins 및 Montserrat, 파피루스, 코믹 산세, Trajan pro, Curlz MT 등 보기 흉한 글꼴도 피하세요. 보기 흉한 글꼴을 강조하는 것을 피하세요. 이 글꼴은 인쇄된 날이 있었을지 모르지만 디지털 인터페이스에서는 형편없습니다. 그들을 피하세요.

4. 두 가지 글꼴 사용

둘 이상의 글꼴을 사용하면 인터페이스가 더 보기 좋아집니다. 트릭은 더 세련된 결과를 위해 신중하고 적절하게 선택하는 것입니다. 머리글과 제목에 하나의 글꼴을 사용하고 본문 텍스트에 다른 글꼴을 사용하세요. 까다로울 수 있지만 약간의 연습과 연구를 통해 해결할 수 있습니다.

5. 대비 글꼴 모음

글꼴을 결합하려고 할 때 약간의 대비를 적용하여 텍스트를 돋보이게 만들고 싶을 것입니다. 예를 들어 serif 글꼴과 sans serif 글꼴 또는 압축 글꼴과 일반 또는 와이드 글꼴입니다.

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

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

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

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

🎥 유튜브 UXUI 자료 영상  

🔖 이메일 

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