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

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

 

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 : 팝업에서 취소 버튼 사용 시
• 추가 예정

 

 

 

참고 자료

• 노코더스 - https://nocoders.kr/
• 노코드 풀스택 개발 with 버블 (이명성 저) - https://product.kyobobook.co.kr/detail/S000214875929
• 모두의 노코드 - https://everynocode.org/