Bubble.io

산업 용품 유통 웹페이지 - 2. 사이트 구조, 디자인 시스템

주탱2 2025. 1. 15. 02:08

산업 용품 유통 웹페이지 제작

 

1. 사이트 구조

  • IA (Information Architecture)

https://www.gloomaps.com/VzJ2ryJT9j (추후에 추가될 가능성  多)

 

  • 와이어 프레임
    • 기존의 형식적인 사이트를 참고
    • 추후에는 피그마로 작업 예정 (아직 피그마에 익숙하지 않아서 너무 많은 공수가 들것으로 예상 됨으로 생략

 

2. 디자인 시스템

  • 기본 폰트 : Noto Sans KR
  • 컬러 시스템
    • 요소
      • 메인 : #4b86b4
      • 메인 대비 : #FFFFFF
      • 글자 : #333333
    • 배경
      • 페이지 배경 : #f5f8fa
      • 그룹별 배경 : #FFFFFF
    • 상태
      • 에러 : #e74c3c
      • 성공 : #27ae60
      • 경고 : #f39c12

컬러 시스템 미리보기 (변경 가능성  多)

3. 요소 시스템

  • Primary-large : 페이지에서 버튼 한개만 사용 시
  • Secondary-large : 페이지에서 메인 버튼과 함께하는 버튼 필요 시
  • Error-large : 페이지에서 취소 버튼 사용 시
  • Primary-small: 팝업에서 버튼 한개만 사용 시
  • Secondary-small : 팝업에서 메인 버튼과 함께하는 버튼 필요 시
  • Error-small : 팝업에서 취소 버튼 사용 시
  • 추가 예정

 

 

 

참고 자료