🔖 UXUI 해외 주간 아티클 TOP3

🔖 2023년 2월 4주 TOP3

1️⃣ 디자인 시스템 101

2️⃣ 2022년 블록체인의 Web3 트렌드

3️⃣ 당신의 디자인이 '그냥 옳지 않은 것 같다'고 말하는 상사가 있을 때 취해야 할 8가지 단계

1️⃣ 디자인 시스템 101

요약

디자인 시스템은 여러 페이지와 채널에서 공유 언어와 시각적 일관성을 생성하는 동시에 중복성을 줄임으로써 규모에 맞게 디자인을 관리하기 위한 일련의 표준입니다.

UI 디자인이 수년에 걸쳐 발전함에 따라 UI 화면을 생성해야 하는 규모와 속도도 증가했습니다.

수백만 개의 애플리케이션과 수십억 개의 웹사이트(매년 더 많이 생성됨)가 있을 뿐만 아니라 각 앱과 웹사이트에는 수백 또는 수천 개의 페이지(또는 화면)가 있을 수 있습니다.

이러한 급격한 확장으로 인해 조직은 설계 작업을 간소화해야 합니다. 따라서 많은 디자인 팀은 강력한 디자인 시스템을 활용하여 디자인을 대규모로 관리합니다.

정의

디자인 시스템은 재사용 가능한 구성 요소와 패턴을 사용하여 규모에 맞게 디자인을 관리하기 위한 완전한 표준 세트입니다.

👉 디자인 시스템을 사용하는 이유는 무엇입니까? 디자인 시스템이 제대로 구현되면 팀에 많은 이점을 제공할 수 있습니다.

디자인(및 개발)을 대규모로 신속하게 만들고, 복제할 수 있습니다.디자인 시스템의 주요 이점은 미리 만들어진 UI 구성 요소 및 요소를 활용하여 디자인을 빠르게 복제할 수 있는 기능입니다. 팀은 계속해서 동일한 요소를 사용할 수 있으므로 바퀴를 재발명할 필요성이 줄어들고, 의도하지 않은 불일치의 위험을 줄여줍니다.
더 크고 복잡한 문제에 집중할 수 있도록 설계 리소스에 대한 부담을 덜어줍니다.더 단순한 UI 요소가 이미 생성되어 있고 재사용이 가능하기 때문에 디자인 리소스는 시각적 모양을 조정하는 데 덜 집중하고 더 복잡한 문제(예: 정보 우선 순위 지정, 워크플로 최적화 및 여정 관리)에 더 집중할 수 있습니다. 적은 수의 화면만 만들면 이 결과가 작아 보일 수 있지만, 수십 개의 팀과 수천 개의 화면에서 노력을 조정해야 할 때 상당한 효과가 있습니다.
교차 기능 팀 내에서 또는 각 팀 간에 통합된 언어를 생성합니다.특히 디자인 책임이 바뀌거나 팀이 지리적으로 분산될 때 통합 언어는 잘못된 커뮤니케이션으로 인해 낭비되는 디자인 또는 개발 시간을 줄입니다. 예를 들어, 드롭다운 메뉴의 기능이나 모양은 디자인 시스템 내에서 특별히 정의된 요소를 위해 이미 지정되어 있기 때문에 논의하지지 않아도 됩니다.
제품, 채널 및 각 부서 간에 시각적 일관성을 생성합니다.특히 각 제품이나 채널이 서로 독립적으로 운영되는 사일로에서 팀이 작업할 때 조직 전체의 디자인 시스템이 없으면 시각적 모양과 경험이 파편화되거나 브랜드와 관련이 없는 것처럼 보일 수 있습니다. 디자인 시스템은 구성 요소, 패턴 및 스타일의 단일 소스를 제공하고 분리된 경험을 통합하여 시각적으로 응집력이 있고 동일한 생태계의 일부인 것처럼 보이도록 하는 역할을 합니다. 추가로, 모든 주요 시각적 리브랜딩 또는 재설계는 디자인 시스템을 통해 대규모로 관리할 수 있습니다.
주니어 레벨 디자이너 및 콘텐츠 기여자를 위한 교육 도구 및 참조 역할을 할 수 있습니다.명시적으로 작성된 사용 지침서와 스타일 가이드는 UI 설계 또는 콘텐츠 작성에 익숙하지 않은 개별 기여자를 지원하고, 나머지 기여자에게도 주의사항 역할을 합니다.

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

Design Systems 101

A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consis...

www.nngroup.com

2️⃣ 2022년 블록체인의 Web3 트렌드

탈중앙화 애플리케이션을 위한 UX/UI 디자인

이 기사에서는 이 새로운 유형의 애플리케이션, UX/UI의 좋은 예와 나쁜 예에서 공통적인 주제/트렌드를 살펴보겠습니다.

이전에 저는 NFT 마켓플레이스를 다루는 블록체인에서 NFT를 구매하는 UX에 대해 논의했습니다. 여기서는 모든 블록체인 웹사이트/애플리케이션에서 공통 주제를 탐색할 것입니다.

트렌드

지갑을 연결하세요 — 테마가 아니라 필수품입니다. 하지만 가장 큰 진입장벽은
실제 돈은 ETH 금액 아래 밝은 회색으로 표시됩니다.
일반적인 탐색 — 검색 , 탐색, 지갑
데이터 & 통계 — 탐색 창에 자주 표시되는 통계
흑백 미니멀 UI
대담하고 명확한 타이포그래피
모바일 우선 (지갑 내부의 브라우저를 통해 자주 접근되는 사이트)
하나의 작업 — 종종 사용자가 수행해야 하는 하나의 작업 또는 작업
마케팅 없음 — 홈페이지는 앱에 접근하기 위해 로그인하는 마케팅 웹사이트가 아니라 애플리케이션 입니다. 모든 데이터는 공개적으로 사용 가능하므로 앱은 비공개 경험이 아니라 공유됩니다
애플리케이션 개발 속도 — 새 앱을 빠르게 구축할 수 있으며 종종 유사한 GitHub 저장소를 공유하므로 유사하게 보이고 작동합니다
광고 없음 — 적어도 지금은…

지갑 연결

테마가 아니라 필수품입니다. 하지만 가장 큰 진입장벽은

지갑으로 로그인
지갑 로그인은 탈중앙화 앱의 명확한 표시이며 이메일로 로그인 하기를 원하는 모든 앱은 익명이 아니며 신원을 지갑에 연결할 수 있습니다.
웹사이트의 기본 CTA를 통해 접근, 많은 지갑을 연결할 수 있는 경우 종종 드롭다운 또는 모달

진짜 돈

암호화폐를 USD 또는 선택한 현지 통화로 변환

실제 돈 — 선호하는 통화(이 예에서는 Zapper에서 이상적이지 않은 내 현지 통화를 사용하지 않음)
현지 통화로의 환율은 종종 암호화 금액 아래에 작은 회색 텍스트로 표시됩니다 — 교환 예시 참조
일부 통화는 명목 화폐 대신 스테이블 코인으로의 변환을 표시합니다.

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

2022 Web3 Trends on the Blockchain

Design UX/UI for decentralised applications

medium.muz.li

3️⃣ 당신의 디자인이 '그냥 옳지 않은 것 같다'고 말하는 상사가 있을 때 취해야 할 8가지 단계

디자이너로서 받을 수 있는 가장 짜증나는 피드백은 사람들이 '느낌이 없다'고 말할 때일 것입니다. 뭔가 잘못되었지만, 그들이 당신에게 무엇인지 말할 수 없을 때입니다.

또는 더 나은 방법은 처음 마주했을 때의 감정을 피하는 것입니다. (UI) 디자인에서 이것은 종종 그림자, 픽셀, 색상 및 테두리를 조금씩 다듬는 것을 의미합니다.

다음은 Figma의 UI, 클라이언트용 로고 또는 지역 제과점용 명함 등 직접 디자인할 수 있는 몇 가지 간단한 기본 요소입니다.

1. 스케치에서 시작하기

여러분은 디자인을 할 때 처음부터 시작하고 싶지 않을 것입니다. 방향 없이 작업하고 그 과정에서 아이디어를 생성하는 데 너무 많은 시간을 소비하게 되기 때문입니다.

종이나 와이어프레임에 먼저 매핑하지 않고 픽셀 단위의 완벽한 디자인을 만드는 것은 쉽지 않습니다. 건축가와 비교할 수 있습니다. 그들은 건물에 대한 계획을 그리고 디자인을 시도하고 모형을 만들고 나서야 실제로 작업이 시작됩니다.

개인적으로 저는 대부분의 디자인을 먼저 종이에 스케치하는 것을 선호합니다. 따라서 최종 픽셀과 테두리 생성은 전체 구조가 아닌 픽셀과 테두리 자체에만 초점을 맞춥니다. 프로세스도 훨씬 간단하고 빨라집니다.

2. 더 나은 카피 작성하기

사업가가 당신의 디자인을 보고 "글쎄요, 모든 것이 좋지만, 저는 그런 단어들을 사용하지 않을 것 같아요"라고 지적할 때마다 5센트를 받는다면, 저는 백만장자가 될 것입니다.

사람들은 그것이 쉽기 때문에 그런 피드백을 줍니다. 어휘에 대한 피드백을 제공하는 데 많은 디자인 기술이나 예술 학위가 필요하지 않습니다.

지식보다는 느낌에 관한 것일 수 있습니다. 오해하지 마세요. 카피라이터는 돈을 지불할 가치가 있습니다.

이 문제를 해결하려면 먼저 어휘와 디자인이 비즈니스 친구들에게 무엇을 말하고 싶은지 생각해 보세요. Lorem Ipsem도 버리시구요.

3. 더 나은 카드 만들기

기본적이고 현대적인 카드는 거의 모든 애플리케이션에서 사용됩니다. Figma에서 카드의 다른 섹션을 모아서 시작하고 마지막 단계로 자동 레이아웃만 추가하세요.

카드를 자연스럽게 보이게 하는 요소

카드의 모서리 반경(20)을 이미지(8)와 다르게 설정합니다.
버튼이 숨 쉴 수 있는 공간을 제공하고, 카드 상단 및 측면과 버튼 아래의 간격을 다르게 합니다.
이미지: 좋은 이미지를 얻으세요. 응용 프로그램에서 편안함을 느끼기 위한 팁으로는 응용 프로그램의 브랜딩과 일치하는 색조를 적용하십시오. 미묘한 차이지만 일관성 있는 인터페이스를 만드는 데 큰 도움이 될 것입니다.
제목(모든 텍스트)이 검은색이 아니지만, 검은색에 가깝습니다.
부제목의 무게, 색상, 크기를 가볍게 합니다.
본문 텍스트는 16픽셀입니다. 디자인할 때 기본 크기로 사용하세요.
버튼: 윤곽선이 있는 버튼과 채워진 버튼으로 구분합니다.
그림자: 자연스러운 그림자를 사용합니다. (eg. x=0, y=4, 블러=16) 기본 그림자 설정을 피하세요. 약간 거친 경향이 있습니다.

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

8 steps to take when your boss says your design “ just doesn’t feel...

Probably the most annoying feedback you can receive as a designer is when people “don’t feel it.” When something is wrong, but they can’t…

bootcamp.uxdesign.cc

🎄from.designer

함께 성장하는 UX 커뮤니티!
from.designer 는 다양한 삶의 경험 공유를 기반으로  UXUI 스터디, 특강, 북클럽 등 다양한 프로그램을 운영하는 디자이너 중심의 커뮤니티입니다. 디자인, 디자이너에 관심있는 누구나 참여 가능한 오픈 플랫폼 커뮤니티입니다. 

🗓️ 행사 일정 & UXUI 자료

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

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

🎥 유튜브 UXUI 자료 영상

🔖 이메일

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

UXUI 주간 아티클

🔖 UXUI 해외 주간 아티클 TOP3

[23년 2월 4주] 디자인 시스템, web3 트렌드, 디자인 피드백

🔖 2023년 2월 4주 TOP3

1️⃣ 디자인 시스템 101

요약

정의

2️⃣ 2022년 블록체인의 Web3 트렌드

탈중앙화 애플리케이션을 위한 UX/UI 디자인

트렌드

지갑 연결

진짜 돈

3️⃣ 당신의 디자인이 '그냥 옳지 않은 것 같다'고 말하는 상사가 있을 때 취해야 할 8가지 단계

1. 스케치에서 시작하기

2. 더 나은 카피 작성하기

3. 더 나은 카드 만들기

다가올 뉴스레터가 궁금하신가요?

이번 뉴스레터 어떠셨나요?

댓글

이전 뉴스레터

다음 뉴스레터

다른 뉴스레터