Design/Study

[PlusX UI] 3일차

개자이너 데이지 2023. 7. 20. 00:10

오늘 들을 강의는 UI 구축 프로세스.
어떻게 UI 디자인을 시작하고, 어떠한 요소들이 필요한지에 대해서 설명하는 강의이다.
그 다음에는 PlusX UI PR이 있는데 이 부분은 그냥 에이젼시 PR이라 굳이 강의노트로는 적지않고
그냥 넘어갈 예정...
 
 


 

#01. Common Design Process
 
인상깊었던 것은 [한 페이지 설계 -> 디자인 -> 개발] 이것을 반복적으로 반복한다는 점
디자인 에이젼시라 보통 디자인을 먼저 의뢰받고 개발에 들어가는 구조인 줄 알았는데
애자일과 유사한 형태로 돌아간다는 점은 인상깊었다.
역시 UXUI라서 그렇게 진행을 할 수 밖에 없는 것인가! 라는 생각도 좀 들고.
 
Common Design Process
- Font
- Color
- Grid
- Componete
 
아주아주 당연하게도 UI는 위와 같은 요소로 이루어져있다.
폰트와 색, 그리고 그리드와 컴포넌트.
 
 
[Font] 
폰트는 페이지의 일관성을 만드는 중요한 시스템.
폰트는 먼저 가이드를 제작해두는 것이 중요하다.
한글, 영문에 대한 구분, 사용된 폰트명, 전체적으로 사용된 Weight를 기재해주어야 한다.
사용된 폰트가 타이틀용인지, 본문용 폰트인지 구분을 해줘야 한다.
자간, 굵기 등을 규격화하여 정리해야한다
-> 효과적인 협업이 가능하고 유지보수가 쉽다.
-> 개발에도 class로 정의하면 된다.
 
 
[Color]
Black-80-60-40-20% :Text color
타이포의 계층을 주로 나타내는 컬러로 사용
Grey 20-5 : Line color
일관적인 디자인을 나타내는데 사용
 
 
[Grid]
강조를 두어야하는 페이지의 경우
메인 페이지의 그리드와 서브 페이지의 그리드를 구분하여 정의하기도 한다.
1. Grid-A
2. Grid-B
 
 
[UI Component]
필요한 요소를 만들어 작업할 수 있는 환경을 만드는 것
버튼, 체크박스, 인풋, 팝업박스 등등 전반적으로 많이 쓴다.
미리 상태별 케이스를 컴포넌트로 사용한다면 원활하게 사용할 수 있다.
 
 
주로 한 명이 담당해서 수정하고 사용하는 것이 용이하다고 한다.
 
 
 
#02. Page Design
 
화면 설계서 해석이 선행되어야 하는 과정
UX 파트로부터 전달을 받게 된다.
카테고리별 페이지 디자인을 하게 된다는 것.
 
UX의 화면 설계서를 참고해보니 거의 PM이 쓰는 형식과 매우 유사하다.
나중에 UX강의도 이런 환급 이벤트가 있다면? 따로 구매해서 저 양식을 쓰는 것을 연습하고
해당 포폴로 만들어도 좋을 것 같다는 생각이 !
 


화면이 가능한 요소, 컴포넌트들이 가능한 요소들을 모두 확인해야한다

팝업은 최소케이스와 최대케이스를 제작

 

화면을 디자인할 떄 시각적 사용성에 대해서 생각해야한다

정보를 전달하고 심미적인 느낌을 함께 주고 고민을 해야한다는 것.

이런 시각적 사용성은 다양한 방법을 통해 만들어지는데 첫번째는 Page design의 규칙을 생성하는 것이다.

페이지들이 규칙없이 제각각 디자인 되어 있다면, 서비스를 이해하기가 매우 어려워진다.

따라서, 페이지의 뎁스를 구분하고, 규칙을 만들어야 한다는 것

 

1 depth > 2 depth > 3 depth

또 하나는 디자인의 강약을 조절해야한다.
 
 
 
나머지 얘기들은 강의에서 ~
 
#플러스엑스 #패스트캠퍼스 #plusxsharex #plusx #ui강의 #ux강의 #bx강의
#플러스엑스강의후기 #플러스엑스셰어엑스 #플러스엑스환급챌린지