디자인카타
🙌🏻 내가 선택한 디자인 : 홈 아이콘
👉🏻 단독디자인+심볼로고가 사용자에게 브랜드를 각인시키는데 효과적일 수 있지만 아이콘은 직관적 이미지가 더 중요하다고 생각해 홈 아이콘을 선택했다. 익숙함이 브랜드의 신뢰도를 더 높일 수 있다고 생각한다. 쉽게 예측이 가능해 사용자의 스트레스를 줄일 수 있다.
아티클 스터디
오늘의 아티클 : 눌러보고 싶은 동그란 버튼(https://brunch.co.kr/@summer-bom/54)
프리즘에 기존 문제점
서비스가 성장함에 따라 더 많은 비즈니스 접점이 생겼고, 기존의 배너 구조로는 다양한 카테고리 콘텐츠를 효과적으로 전달하기 어려웠다.
다양한 카테고리 콘텐츠로의 원활한 진입 유도
👉🏻 각 카테고리를 대표하는 쇼룸 페이지로의 접근성을 높이고자 했다.
접근성과 심미성의 균형
👉🏻 사용자가 직관적으로 이해하고 사용할 수 있는 디자인을 구현
원형 아이콘
👉🏻 프로필 디자인의 메타포인 원형을 활용하여 사용자에게 친숙하면서도 시각적으로 돋보이는 UI 설계
👉🏻 쇼룸 페이지로의 진입을 유도하는 버튼을 원형으르로 디자인, 전체 서비스에서 일관된 사용자 경험을 제공
결과
👉🏻 원형 UI는 사용자에게 직관적인 네비게이션을 제공하여 쇼룸 페이지로의 유입과 체류시간이 증가.
👉🏻 디자인은 미적인 요소를 넘어 사용자 경험을 향상시키고 비즈니스 목표를 달성하는데 중요한 역할을 한다는 점을 강조
사람들은 심리적으로 곡선을 선호한다고 한다. 색에도 의미가 있듯이 원형에도 안전하다는 느낌이 들기때문에 버튼을 누르기에 거부감이 없이 누를 수 있을거라고 생각한다.
👉🏻UI 디자인의 모든 것(1-3, 1-4)👈🏻
UI 디자인의 모든 것 1-3
그리드 시스템
그리드
- 디자인 레이아웃에 동일한 규칙을 적용하여 일관된 UI를 할 수 있게 도와준다.
- 디바이스 환경에 따라 디자인 요소를 일정한 간격으로 배치하고, 크기를 부여하여 체계적인 배열을 도와준다.
- Desktop, Table, Mobile 반응형 디자인 작업 시 해상도 대응이 용이
- 디자이너와 개발자의 원활한 커뮤니케이션을 도와준다.
▪️컨테이너
- 컨텐츠 너비 값은 정해져 있지 않음. 제품이나 서비스 성향에 따라 설정하는 것을 권장.
- Mobile, Tabledml 경우 가로 너비가 좁기 때문에 콘텐츠 양이 많을 경우 마진을 줄이고 컨터이너 너비를 넓게 설정하는 것을 권장
- Desktop은 가로 너비가 넓기 때문에 자유롭게 설정 할 수 있다.
▪️컬럼(Column)
- 단의 넓이
- 콘텐프를 정렬하고 배치하는 역할
거터(Gutter)
- 컬럼과 컬럼 사이의 간격
- 콘텐츠 사잉의 여백을 제공하여 콘텐츠의 가독성을 높여주어 사용자가 콘텐츠를 쉽게 이해할 수 있게 도와준다.
▪️마진(Margine)
- 화면의 좌우 여백의 너비
- 마진에 따라 콘텐츠의 너비가 정해지기 때문에 마진 값을 정하는 것은 중요
- 표현해야 하는 콘텐츠의 양과 레이아웃에 맞게 마진을 설정
- 마진은 모든 페이지에 일정하게 적용하는 것을 권장
- 대표적으로 아래와 같은 마진 값을 사용(절대값 X)
반응형 디자인
▪️브레이크포인트
- 반응형 디자인에서 레이아웃이 변화되는 지점을 의미
- 브레이크포인트를 사용하면 정해놓은 지점에서 레이아웃을 변경할 수 있다.
▪️브레이크포인트 설정
- 현재 기준 가장 많이 사용하는 디바이스 해상도를 파악하기위해 점유율을 확인
- 우리 서비스를 사용하는 주 사용하는 주 사용자는 어떤 해상도를 사용하는지 파악해야한다.
- 화면 디자인에 필요한 레이아웃은 어떤 것들이 있는지 확인해야한다.
- 이와같은 내용을 고려하여 브레이크 포인트를 설정
- 브레이크포인트를 설정할 때에는 디자이너, 개발자가 같이 논의해서 결정하는 것이 좋다.
- 브레이크포인트를 상세하게 쪼개서 설정할 수도 있지만 모든 기기를 대응하기는 무리가 있을 수 있으니 필요한 기준을 설정하여 진행하는 것이 좋음
UI 디자인의 모든 것 1-4
마무리
1-4는 강의 내용도 많고 실습 위주여서 따로 크게 정리는 못 헀다. 속도가 잘 안나서 실습도 중간에 멈추고 바로 숙제로 넘어왔다.
그래서 드디어 1-4강도 끝냈다. 오늘 5강도 들어갈 수 있을 줄 알았는데 생각보다 숙제에서 너무 헤매는 바람에 한참 걸렸다.
남은 1-5강 강의 숙제랑 개인과제도 기간 안에 끝낼 수 있도록 해야겠다 ⭐
'UXUI' 카테고리의 다른 글
| 다 나쁘지만은 않네 ~!!🧔🏻 (4) | 2025.05.01 |
|---|---|
| 첫 개인 과제 끝 🤦🏻♀️ (0) | 2025.04.30 |
| [내일배움캠프] 오늘은 수요일 ✊🏻 (8) | 2025.04.23 |
| [내일배움캠프] 디자인 입문 시작 (6) | 2025.04.22 |
| [내일배움캠프] 2주차 시작 🙉 (11) | 2025.04.21 |