특강 : 디자이너가 꼭 알아야 할 UI 디자인 가이드 TOP 5
타이포 그래피
브랜드들은 브랜드 아이덴티티와 서비스에 맞는 폰트를 사용하고 있다.
- 폰트 사이즈
모바일화면은 주변환경이 가독성에 영향을 준다. 그렇기 때문에 가독성이 좋은 폰트 사이즈를 선택해야 한다. - 계층구조
텍스트의 크기, 굵기, 색상, 위치, 여백등 요소들을 활용하여 더 나은 사용자 경험을 할 수 있도록 도와주는 도구 모든 요소들을 동일하게 가져간다면 요소들간의 위계가 무너진다. - 일관된 폰트 스타일
폰트 스타일을 최소화 하여 일관적이게 디자인을 해야한다. 그렇지 않으면 가독성이 떨어지고 계층구조가 무너진다.
컬러
주가 되는 색상의 컬러는 최대한 절헤해서 사용해야한다. 각각의 브랜별로 인식하고 있는 주색상들은 주가 되는 색상의 사용비율은 줄이고 노출을 늘리는 방향으로 사용한다.
- 70:25:5 의 비율을 사용하자
70% : 기본색(바탕색), 25% : 보조색상(브랜드별 컬러를 보완해주거나 강조해주는 색상), 5%(주제색상, 브랜드 컬러) - 기본컬러, 서브컬러, 뉴트럴 컬러
- 기본컬러 = Primary컬러 UI에서 가장 메인으로 사용되며, 아이덴디티를 나타냄
- 서브컬러 = Secondary 컬러 기본 컬러를 강조하거나 보완해주는 역할
- 뉴트럴 컬러 = 화이트에서 블랙까지 회색의 음영을 포함 전체 UI디자인에서 70%정도 사용됨 ( 배경, 텍스트 입력필드등) - 시멘틱 컬러
상태의 의미를 전달하는 컬러, 사ㅛㅇ자에게 시스템의 상태를 알려주는데 효과적이다 (빨강, 노랑, 초록, 파랑) - 확장된 컬러
베이스 컬러로 서비스의 모든 UI를 표현하기에 충분하지 않다.기본,서브,시멘틱 컬러들을 확장하여 다양한 케이스에 활용해야함 - 배경과 색
색은 상대적이라 주변 환경에 따라 성질이 달라져 테마에 다라 컬러를 확장해서 사용해야한다.
색은 상대적이라 형태에 따라도 성질이 달라진다. 텍스트와 도형같은 형태에 같은 색상을 사용해도 성질이 달라짐 그러므로 가독성과 접근성 기준으로 체크 해줘야 한다.
아이콘
아이콘은 시각적인 언어다 우리에게 익숙하고 누구나 알 수 있는 보편적인것을 아이콘으로 사용해야한다. 사용자가 이해하기 쉽고 간단하고, 명확하게 디자인된 아이콘을 사용해야한다.
- Outlined filled, Colored, Rounded, Radius, Stroke....
- 일관성
하나의 서비스에 동일한 스타일의 아이콘을 적용하여야 한다. - 시각보정
사람의 눈은 착시현상때문에 동일한 값을 주어도 불균형해 보일때가 있다. 조절이 필요 - 단순화
아이콘은 모바일이라는 환경적인 요소를 반영하여 단순화된 작업을 해야한다. 선과 면을 최소화 - Safe area
아이콘 디자인은 Safe area(20*20) 안에서 작업을 해야한다
웹 접근성
모든 사용자가 사용하게 편하도록 유연하고 명확하게 디자인을 해야한다.
모든 사용자가 신체적 환경적 조건에 관계없이 동등하게 웹에 접근하여 사용 할 수 있도록 보장하는것을 의미한다.
- 좀 더 명확한 디자인
텍스트와 아이콘을 함께 사용하면 좀 더 명확한 디자인이 가능하다 예로들어 입력필드에서 오류상태를 표현할때 텍스트로 정보를 전달할 수 있다 ( 비밀번호가 일치하지 않는다.) - 텍스트 콘텐츠
텍스트 콘텐츠 안에 링크나 버튼은 분리해서 작업을 해야한다
스크린 리더가 위치 파악하기 쉬워진다. ( 시각장애인 불편을 줄여준다) - 명도 대비
한 색상과 다른 색상간의 차이를 나타낸다.
요소 사이의 색상 대비가 충분해야 저시력자도 원활하게 서비스를 이용할 수 있다.
레이아웃
- 영역
고정 영역 : 콘텐츠 크기는 변하지 않고 스크린만 확장되어 더 많은 콘텐츠를 볼 수 있다.
가변 영역 : 스크린의 크기가 변할때 콘텐츠의 크기도 함께 커지게 된다. 콘텐츠의 개수는 동일하다 - 단위
단위는 가장 큰 기본 배수인 8배수로 디자인하지만
실제 8배수로만 디자인하면 제약사항이 발생되기 때문에 2와 4배수를 사용하여 유연하게 디자인하는것을 권장한다
(= 모든 디자인요소는 짝수로 디자인한다 .절대 소수점이 발생하지 않도록 주의해야한다) - 그리드
요소들을 질서있게 배치하기 위한 규칙
정리가 되어 깔끔해 보인다.통일성을 준다..
- 컬럼 : 단의 넓이 (가변)
- 거터 : 단과 단 사이의 간격 (고정)
- 마진 : 좌우 여백 (고정)
WIL
📌 Facts : 이번주는?
3일간의 짧은 휴가를 즐기고 월화 개인과제로 이틀을 불태우고... 수욜에 개인과제 개선하고 목금 강의듣고 바빴지만.. 사실 시간을 효율적으로 잘 쓰진 못했다.. 아무래도 자기주도 학습이다 보니 딴길로 새는 시간이 더 많았던 일주일 ㅎ
📌 Feelings : 조금 더 알차게
딴길로 새는시간에 아티클이나 하나 더 읽고 개인적인 공부를 많이 해야 할거 같다.
📌 Findings :
생각보다 사전캠프때 내가 요약했던 아티클들이 강의를 들으면서, 특강을 들으면서 도움이 많이 되어서 뿌듯하다.
📌 Future : 강의를 들어야하는 남은기간엔 강의 복습을 제대로 하고 거기다 응용까지 할 수 있길...!!!
₊·*◟(˶╹̆ꇴ╹̆˵)◜‧*･