pc와 모바일에서의 ui 디자인 팁

·2024년 2월 19일
0

팁 이라기보단 개인적인 메모..^^

피라미드의 원칙

  1. 강한 이미지
  2. 정보
  3. 받쳐주는 이미지
    로 구성하면 웹 페이지가 안정적으로 보인다.
  • 출처: 유튜버 미대생탁이

때려주는 섹션

  • 오밀조밀하기만 해선 안된다. 크고 시원하게 구성하는 섹션도 있어야 한다.

카드 디자인

여백으로만 디자인을 그룹핑 하려면 어렵다.
카드 디자인을 활용해 보자.(당연히 때에 따라)

카드 디자인을 할 땐 카드와 글자를 딱 붙여 정렬하지 말고,
글자를 안으로 좀 넣어주자.
정확히 정렬되면 카드의 라운딩 때문에 레이아웃이 불안정해 보인다.


홀, 짝수

안드로이드는 짝수, 맥은 홀수로 디자인 하는 경우가 대부분.
짝수 디자인은 모든 값을 짝수로만, 홀수 디자인은 홀수로만 디자인 해보자.


인디케이터

표시기. 아이폰 하단 막대같은 것을 말한다.


pc 폰트 크기

섹션 제목은 40이면 충분하다.
상품 제목 36px이면 크다(쓰지 말라는건 아니고.. 최대 사이즈 정도?)


상세페이지 여백

랜딩 페이지. 즉 메인 페이지는 여백을 좁게 가져가는 경우가 많은데,(사진을 꽉 채운다거나)
상세 페이지는 여백을 넓~게 써서 정보가 가운데로 모여보이게 해야한다.
상세페이지가 퍼져보이면 정보를 얻기 쉽지 않다.

  • 29cm 홈페이지. 상세페이지의 여백이 확 넓어진게 보인다.

스트로크

피그마나 xd에서 줄은 line툴이 아닌 rectangle툴로 그리자.
선을 사용하면 그리드, 끝 점에 정렬하기가 어렵다.(기준점 선의 중간이기 때문)

  • 위는 선 툴, 아래는 사각형 툴

다른 개체와 위 선들을 잡고 위쪽 정렬을 하면? 선은 이렇게(정렬 안맞음)

면은 이렇게 된다.


체크박스 크기

체크박스 크기 12x12는 너무~ 작다.
18은 들어가야 함.


갤럭시 폴드

스탯 카운터에서 확인해보면 되는데,
한국에서 가장 많이 사용하는 스마트폰 해상도는 390x844.
그런데, 갤럭시 폴드부터 대응하는게 좋다고 한다.
320의 해상도부터 고려해 작업하자..

profile
저녁놀 마을 사람

0개의 댓글

관련 채용 정보