🔖 UXUI 해외 인기 아티클

🔖 2022년 4월 4주 TOP3

1️⃣ 좋은 UI vs. 나쁜 UI

2️⃣ [UX사례 연구] Krispy Kreme 앱

3️⃣ UI 디자이너의 요소

1️⃣ 좋은 UX vs. 나쁜 UX

UX는 미학에 관한 것이 아닙니다. 사용성과 사용자 만족도에 관한 것입니다. 미학적으로 만족스러운 디자인은 때때로 UX가 부족할 수도 있습니다. 이것이 바로 UI가 UX의 하위 집합인 이유입니다. UX를 고려하지 않고는 임팩트 있는 UI를 구축할 수 없습니다.

결국 가장 중요한 것은 사용자의 경험입니다. 탐색 및 정보 구성에서부터 훌륭하고 반응이 빠른 커뮤니케이션에 이르기까지 UX디자인에는 수많은 것들이 포함될 수 있습니다. 몇 가지 예시를 보면서 UX 불일치가 있는 경우를 한번 찾아보겠습니다.

그 전에 Don Norman(UX 디자인의 아버지)이 좋은 UX와 나쁜 UX의 고전적인 예시를 공유하는 작은 비디오를 한번 보시기 바랍니다.

이제 내 블로그로 돌아와서 드리블에서 몇 가지 예를 가져와 일부 UX 디자인을 연구하겠습니다.

1. 코딩 웹사이트의 랜딩페이지

다음은 제가 생각해낸 점입니다.  제 이해에 따라 동일한 랜딩페이지를 다시 만들려고 시도했습니다.

2. 앱 가입/로그인 페이지

이 페이지가 나쁜 UX인 이유:

 A. Google, Twitter, Apple 처럼 빠르게 가입할 수 있는 다른 가입 수단들이 없습니다.

B.  매력적인 요소들이 없습니다. 위에 사용된 이미지들이 잘리고 있습니다.  

C. 사용 중인 버튼에 깊이가 없고 대화형태로 보이지 않습니다.  

D.  상단에 사용되는 폰트들이 굵으며, 모두 대문자로 되어있어 보기에 좋지 않습니다.

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

2️⃣ [UX사례 연구] Krispy Kreme 앱

이번 사례 연구에서는 Krispy Kreme(크리스피 크림)의 음식 배달 앱 인터페이스를 디자인하는 전 과정을 알려드리겠습니다!

맥락

저는 어린 시절 내내 도넛의 열렬한 팬이었습니다. 저는 도넛이 준비되는 방법과 약간의 창의성과 설탕으로 얼마나 장식적인지 감탄합니다.

하지만 저는 평생 한 번도 경험해보지 못했습니다. 제가 사는 도시에는 도넛을 살 곳이 없고, 이것이 제가 한동안 다루고 싶었던 주제였습니다. 그래서 저는 저와 같은 도넛 애호가들을 위해 특별히 가상의 음식 배달 앱을 디자인하기로 결정했습니다.

크리스피 크림 - What & Why?

크리스피 크림은 미국의 평판 좋은 도넛과 커피 체인점으로, 글레이즈드 도넛과 정통과 세대를 거친 오래된 “비밀 재료”로 유명합니다.

그들은 오랜 문화, 논란 그리고 설탕에 흠뻑 젖은 도넛을 지닌 미국의 경쟁이 치열한 패스트푸드 시장에서 그들의 위치를 유지해 왔습니다.

프로젝트를 위해 크리스피 크림을 선택하는 것은 쉬운 결정이었습니다.

목표

와이어프레임

저는 몇 시간 동안 아이디어를 내고, 자료를 조사하고, 영감을 준 것들을 살펴보고, 나중에 더 세련된 디자인으로 바뀔 대략적인 틀을 스케치했습니다.

일단 Lo-fi 와이어프레임 작업이 끝나고 나니, 최종 화면이 어떻게 보여야 할지 기본적인 아이디어가 명확해졌습니다. 저는 편의를 위해 High-fi 와이어프레임을 디자인했습니다.

스타일 가이드

전체적인 디자인을 균일하고 미니멀하게 만들기 위해 하나의 폰트로 진행했습니다. Inter는 많은 글꼴과 두께가 있어 위계 질서를 나타내고 사용하기 더 용이합니다.

저는 사용자와 브랜드 간의 신뢰를 구축하기 위해서 크리스피 크림의 클래식한 그린, 레드 컬러를 사용했습니다. 녹색은 기본 색상이고 빨간색은 보조 색상입니다.

아이콘의 경우 Remix Icon을 선택했습니다.

최종 화면

소셜 미디어 로그인 통합 옵션이 없는 일반적인 로그인과 가입 화면입니다. 사람들이 단계를 쉽게 이해할 수 있도록 플레이스 홀더를 추가했습니다.

온보딩 프로세스를 완료한 후, 사용자는 가장 가까운 위치에 있는 매장을 선택해야 합니다. 더 많은 편의를 위해 시간도 표시되었습니다.

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

3️⃣ 디자이너의 UI 요소

이 기사에서는 UI 디자인에 유용한 아주 필수적인 UI 요소에 대해 알아볼 것입니다.

이 기사에서는 UI 디자인에 유용한 아주 필수적인 UI 요소에 대해 알아볼 것입니다.

UI 요소

UI 요소는 앱과 웹사이트를 디자인할 때 사용 되는 중요한 컴포넌트입니다. 이 기사에서 우리는 다음과 같은 요소들을 살펴보겠습니다.

| 앱 바 : 상단

현재 화면 정보와 동작을 위해 앱 상단에서 사용됩니다.

원칙:

해야 할 것:

하지 말아야 할 것:

포함하는 요소:

일반적으로

상황에 따라

<aside> 🔖 팁 : 컨테이너에는 FFFFFF 100%를 사용하세요 / 아이콘과 텍스트에는 000000 100%을 사용하세요

</aside>

스펙 : (사이즈-px)

일반적으로

상황에 따라

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

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

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

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

🎥 유튜브 UXUI 자료 영상  

🔖 이메일 

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