제로베이스UIUX스쿨/Today I Learned

[UXUI TIL] 230119_UI 디자인 시작

버걍 2023. 1. 19. 22:04

01

제로베이스 ㅣ 포트폴리오 과제 - UI 디자인

1) 아이콘

아이콘은 40x40px guide 박스를 그린 후 제작하고 컴포넌트화 한 후에 베리언트로 묶었다. 베리언트로 묶으면 우측 패널에서 다른 아이콘으로 쉽게 바꿀 수 있다. 그리고 하단 탭 바를 제작해서 다시 컴포넌트화 했다. (이 과정 전에 컬러와 폰트도 스타일로 지정해 뒀다) 이렇게 하는 과정이 처음에는 시간이 많이 들어가지만 나중에 수정하고 싶을 때 진짜 편하다.

 

 

 

 

2) 그리드 시스템

보통 그리드는 와이어프레임 단계부터 잡는게 일반적일 것 같긴 한데.. UI 디자인에 들어가기 앞서 그리드 시스템을 정했다. 피그마에서 그리드를 생성하고 스타일로 지정해 놓을 수 있다. 16px 마진은 양 끝에 너무 붙어 있는거 같이 보여서 20px로 정했고 거터는 8px, 컬럼은 6개로 정했다. 

 

 

 

그리드 시스템 제작하면서 읽어본 아티클

- margin을 먼저 정하고 gutter와 column 수를 정하면 된다.

- 디자이너의 마음이지만 16px과 20px의 margin을, 2분할과 3분할까지 포함할 수 있는 6 column을 가장 많이 쓴다.

- 다양한 해상도를 커버할 수 있는 8의 배수를 권장하지만, 선택의 폭이 좁기 때문에 해당 권장사항을 따르지 않고 디자인한다. 

 

 

人Co BLOG :: 8 Point Grid, 더 적은 결정 = 더 적은 시간

Posted at 2021/06/09 19:12 Filed under 정보공유 많은 사용자들이 이용하는 프로덕트(혹은 서비스)들은 정보가 잘 정돈되어 있거나 특별한 가이드 없이 짧은 시간 내 능숙하게 사용할 수 있습니다. 그러

www.insilicogen.com

 

모바일 디자인할 때 그리드 시스템 꼭 사용해야 할까?

author - rustyat, br│UI 디자이너 | 자료를 찾기 위해 비핸스나 드리블을 둘러보다 보면 모바일에서도 그리드 시스템을 잘 적용하여 디자인한 레퍼런스를 종종 볼 수 있다. 그렇다면 모바일에서 그

brunch.co.kr

 

 

 

3) 컴포넌트화&적용

스타일에 지정해둔 폰트와 컬러를 시안에 적용하고, 2번이상 쓰이는 UI들을 컴포넌트로 만들어서 교체했다. 그리고 어제 피드백 받은 부분을 디벨롭 시켰다. 머릿속에 생각이 많은데 정리가 안 돼서 생각날 때마다 파일 여기 저기에 적어놓았더니 쏘 지저분.. 와이어프레임을 그리고 UI 디자인하는 과정이 좀 더 익숙해지면 좋겠다.