본문 바로가기
디자인/사수들의 꿀정보

웹 디자인 공부 :: 인테리어 PC 메인 디자인

by 디자이너 헤이즐 2021. 3. 6.

UX/UI 디자인을 하려고 할 때 유의할 점

웹디자인은 느낌으로 하는 디자인이 절대 아니다.
치수에 좀 의존을 하는 디자인이다.

기준선 같은 것이 필요하다는 뜻이다.

 

예로 들면 폰트를 왜 이크기를 썼을까,
만약에 타이틀 크기를 30을 썼다면

다른 타이틀들도 다 30 을 써줘야 한다.

간격을 내가 타이틀과 상품간의 거리를 20으로 띄웠다.
그러면 다 20으로 통일시켜줘야 한다.

각 코너 코너 마다 다 다르면 기준이 흐트러진다.
느낌으로 하게되면 이런일들이 많이 발생한다.

웹디자인이나 모바일 디자인은 이렇게 느낌으로 하는게 아니다.

UX/UI는 느낌으로 하는 디자인이 아니다.


사용자들의 패턴과 시선의 흐름, 가장 좋은 가독성의 폰트 크기, 컬러, 간격, 썸네일 크기 
와 같은 것들이 체계적으로 짜여진 상태에서 디자인이 되어야 한다.


이런 뼈대가 먼저 갖춰진 후에
그 안에서 그 룰을 해치지 않는 선에서
비주얼적으로 어떻게 보여줄 것인지 판단하는게 좋다.


꿀팁

회색 그레이박스를 사용해 레이아웃, 운율감을 잡아주고 시작한다.

 

GNB 같은 경우는 디자인을 하기 전에 요소 정의가 필요하다.
어떤 것들이 들어갈 건지, 어떤 텍스트와, 장바구니, 로그인, 마에페이지, 검색, 서비스 바로가기...

이런 것들이 뭐가 어떻게 들어갈건지 정의가 되어있어야 구체적으로 디자인 할 수 있다.

 

편집 요소의 느낌 가미하고 싶다면,

같은 비율의 사각형보다는 정사각형, 직사각형 등의 다양한 사각형을 사용해도 된다.

 


텐바이텐 레이아웃을 사용했다. 
평소에 다양한 레이아웃을 수집하고 적용해 보는 것이 좋다.

 

라인이 겹치면 보기 안좋다.

하나를 뺴고 여백으로 구분을 해주면 좋다.


영상 댓글보기

디자인을 할 때 코딩이 가능한지도 고려한다. 판단이 안서면 개발자와 상의를 한다.

 

요즘 웹 디자인은 포토샵 대신 XD, 스케치, 피그마를 사용하는 추세이다. 일단 가볍고, 기획자와 개발자의 협업 유용성 때문인 것 같다.

 


레퍼런스

마디아 디자이너 유투브 채널

youtu.be/lyCKuMCuuGY?list=PLs8gZ5b9piXUma8GL612n0DmeqeavMz0U