디자인 카타
* 다양한 정보로 구성된 Table 디자인을 맡았다면, 어떤 방식으로 구성하시겠어요?
-
왜 해당 UI가 더 좋은 지 작성합니다.
A안. (텍스트로 구성된 Table 디자인) 불필요한 요소 없이 숫자 정보만 나열되어 있어 정보를 빠르게 파악할 수 있으며, 글자 크기나 정렬이 맞춰져 있어 사용자가 쉽게 데이터를 비교 가능하다.
-
나머지 하나의 UI는 왜 별로인지, 왜 선택하지 않은지 작성합니다.
B안. (이미지 요소룰 추가한 Table 디자인) 사용자의 집중도와 데이터의 의미를 쉽게 전달 할 수 있으나, 다양한 요소가 포함되면서 UI가 복잡하며, 잘못된 색상 조합이나 과도한 아이콘 사용은 오히려 데이터 해석을 방해할 수 있다. -
의견 더하기
A안의 단점으로는 강조와 차별화가 부족하여 단조로워 보일 수 있으며 시각적 흥미를 유발하지 않을 수 있지만 B안 같은 경우 좁은 테이블에 너무 많은 색상, 아이콘을 추가하여 오히려 가독성이 저하되었다. 아이콘을 제외한 텍스트 색상이나 볼드 정도로 강조했다면 가독성도 집중도도 올릴 수 있을 거라고 생각한다.
하루 한 장 UX의 법칙 100
DAY 11. 적을수록 풍부하다
"적을수록 풍부하다"는 가장 논란이 많은 주제다. 토론을 듣기 전, 학생들은 대부분 이 표현에 동의하지만, 토론 후에는 거의 모두가 생각을 바꾼다. 이 말에는 옳고 그름이 없다는 것이 진실이다. 때로는 적을 수록 풍부하고, 때로는 그렇지 않다.
UX에서 화려한 디자인과 맥시멀리즘이 필요한 곳도 있다. 그러나 복잡한 작업이나 프로세스에는 "적을수록 풍부하다"는 법칙이 적용된다. 불필요한 요소를 모두 제거하고, 운영적•인지적 비용을 줄이면, 디자인의 사용성이 크게 향상되고 복잡한 상호작용을 더 쉽게 만들 최소한의 요소만 남게 된다.
DAY 12. 적을수록 지루하다.
맥시멀리즘의 좋은 점은 모든 조건이 비슷한 경우라면 단순히 '다르게'만드는 것만으로도 눈길을 끌 수 있다는 것이다. 맥시멀리즘은 강렬한 색상조합, 대조적인 패턴, 다양한 서체조합, 독특한 상호작용 모델을 통해 다양한 감각과 감정을 불러일으킬 힘을 가지고 있다. 이는 미니멀리스트 디자인의 단조로움에 대한 해독제다.
디자인이 사용하기 어렵다면, 그것은 맥시멀리즘도 미니멀리즘도 아니다. 그저 나쁜 디자인일 뿐이다. 맥시멀리즘은 단순히 화면을 복잡하게 만드는 것이 아이다. 디자인은 여전히 기능적이어야 한다. 미니멀리즘이 회색 오피스 빌딩과 같다면, 맥시멀리즘은 고양이 모양의 유치원 건물과 같다. 단순히 장식을 더하는 것이 아니라, 기능과 개성을 동시에 살리는 것이다.
식사 시간 팀 활동
* 에어비엔비가 호스트를 알잘딱깔센하게 만드는 UX
https://baconux.tistory.com/17
에어비앤비는 2023년 11월 ‘게스트 선호’ 라벨을 도입해 신뢰할 수 있는 숙소를 쉽게 식별할 수 있도록 했다. 이 라벨은 후기 수, 높은 평점, 낮은 예약 취소율 등의 기준을 충족한 숙소에 부여된다. 이를 통해 게스트는 믿을 만한 숙소를 찾기 쉬워지고, 호스트는 서비스 품질을 향상시키려는 동기를 얻게 된다. 또한, 라벨을 받은 숙소는 검색 결과에서 상위에 노출되는 등 추가 혜택을 받으며, 전체적으로 플랫폼의 서비스 품질이 개선된다. 결국, 에어비앤비의 신뢰도와 매출이 증가하고 사용자 만족도가 높아지는 효과를 기대할 수 있다.
'UI 디자인의 모든 것' 2강-(2)
타이포그래피
* OS별 시스템 폰트
- iOS, Android 시스템 폰트
- 웹폰트
- 대표적인 웹폰트로 프리텐다드, 스포카 한 산스, 슈트를 사용한다.
* Serif 와 Sans-Serif
- Serif - 글자 획의 시작이나 끝부분이 돌출된 형태의 글꼴을 셰리프(Serif)라고 한다. 한글에서 명조나 바당테가 세리프에 속한다.
- Sans-Serif - 글자 획의 끝부분이 돌출되지 않은 글씨체를 뜻한다. 한글의 고딕체가 산세리프에 속한다.
* 폰트사이즈
- 사용자를 고려한 폰트 사이즈
- 디바이스 화면으로 보이는 실제 사이즈 고려
- 용도별 사이즈
- Title 제목 : 18-32
- Body 본문 : 14-18
- Caption, Lable 캡션, 레이블 : 10-12
- Minimal size 최소 사이즈 : iOS-11/Android-12/Web-14
❌ 10 이하의 폰트는 사용하지 않는 것을 권장한다.
* 시각적 계층 구조
💡 텍스트 사이즈, 두께, 컬러, 위치, 여백 등 요소를 활용하여 더 나은 사용자 경험을 할 수 있도록 도와준다.
- 타이포그래피 활용 방법 - 텍스트 사이즈의 변화, 텍스트의 두께 변화, 텍스트의 컬러 변화, 자간과 행간 조정
- 명확한 계층 - 타이틀 > 서브 타이틀 > 본문을 활용하여 계층 구조를 만들 수 있다.
- 타이틀, 서브타이틀, 본문 텍스트를 모두 강조하면 안된다. 모든 텍스트를 강조하게 되면 계층 구조가 무너지고 중요하게 전달해야 할 정보를 강조할 수 없게 된다.
- 폰트 사이즈는 확실하게 차이를 두는 것이 좋다. 1.5~2배 차이를 둘 수 있다. 예를 들어,본문에 16px을 적용했다면 서브타이틀은 32px을 적용할 수 있다.
- 텍스트에 너무 과도한 컬러를 사용하지 않도록 주의해하 한다. 과도한 컬러 사용은 복잡해 보일 수 있다.
* 일관된 폰트 스타일
💡 다양한 폰트 스타일을 사용하는 것은 사용자를 복잡하고 혼란스럽게 할 수 있다.
* 여백과 정렬
💡 보이는 것만 디자인 요소가 아니다. 자간, 행간, 마진, 여백도 좋은 디자인을 만들기 위한 요소이다.
* 브랜드 아이덴티티
💡 브랜드 이미지를 떠오르게 하거나 전달하는 강력한 시각적 전달 요소이다.
아이콘
* 아이콘의 역할
💡 아이콘은 복잡한 정보를 직관적이고 간결하게 표현하여 사용자의 상호작용을 돕는다.
- 명확한 의미 전달
- 브랜드 아이덴티티
* 일관된 아이콘
💡 일관된 스타일을 사용하여 사용자의 인지 시간을 단축시킬 수 있다.
- 아이콘 스타일 - 아이콘 스타일에는 Outlined, Filled, Colored, Image와 같은 다양한 스타일이 있다.
- Stroke 두께
- Corner radius (곡률)
- 일관된 스타일
* 아이콘 시각 보정
💡 사람의 눈은 착시현상으로 인해 글자나 도형이 불균형으로 보이거나 위치, 크기가 다르게 보일 수가 있다. 시각 보증을 통해 균형 있는 아이콘을 만들어야 한다.
- 재생 버튼
- 도형의 부피감
* 아이콘 단순화
💡 아이콘은 단순화하여 작업해 주는 것이 좋다.
- 모바일 스크린은 영역이 작고, 사용자는 야외 또는 이동 중에도 모바일 화면을 보면서 제품을 사용한다.
- 사용자의 상황이나 환경을 고려하여 아이콘을 제작해야 한다.
* 레이아웃과 키라인
- 아이콘 레이아웃
- 아이콘 형태
- 아이콘 키라인
* 배율 설정
💡 아이콘이 모든 해상도에서 명확하고 일관되어 보이게 하려면 어떻게 해야 할까?
- 배수 설정하기 - 일반적으로 12, 16, 20, 24, 32, 48 등 4, 8의 배수를 적용하여 사용하는 편이다.
- Scale 적용하기 - 아이콘 가로, 세로에 Constraints Scale은 필수로 적용해야 사이즈에 맞는 이미지를 추출할 수 있다.
🥰 Blah Blah
UI디자인의 모든 것 복습중이다. 내 것으로 빨리 만들고 싶다.
그리고 개인 과제 체크 리스트 올체크 받았다! 기분 너무 좋고~ 앞으로 더 힘내서 해야지 ><❣️
