FIGMA 레이아웃 시안 만들기 / day10 / 25.04.14

• 보통 pc ver.1개, mobile ver.1개 만든다. 
• 화면해상도가 1440 이상인 것을 pc로 친다. 1440으로 디자인하는 경우는 없다. 
• 1920 pc기준으로 만든다. 
• 시안 주제 만들기
• 로고 만들기 일러스트로 '로고'를 그려야 자유롭고 편하다. 
• 로고가 큰 경우 세로 2단으로 gnb를 구성하여 헤더를 꾸민다. 
• 로고가 가로로 긴 경우는 위에서 아래로 내려오는 디자인을 쓴다. 
• 디자인할 때 헤더, 메인, 푸터 순으로 디자인한다. 
• 위에서 아래로 내려오는 디자인을 할지, 왼쪽에서 옆으로 할지 정해야한다.
• 메인컬러는 회사의 로고색상을 따라간다. 
• 내용을 뭐로 구성할지 나와야한다. 
• 디자인해본적 없는 사람은 와이어 프레임(레이아웃을 rough하게 그려보는 것) 먼저 작업해야한다. 
• 보통을 가로 1600 로 만든다. (예전에는 1320정도로 디자인했는데 요즘 추세는 wide하게!)
• 포털사이트는 연령,성별 불문 수많은 사람들이 들어와 컨텐츠 라인이 훨씬 좁다 (960정도)
• 동종업계 타사이트의 컨텐츠영역은 얼마나 차지하고 있는지 찾아보고 정리하는게 좋다. (짝수여야한다!) 둘로 나눴을 때 0이 나와야한다. 
• 메인에는 소비자가 관심을 더 가질만한 것들, 메인으로 보여주고 싶은 것들을 놓는다.
• 서비스에 대한 대단히 상세한 설명은 서브페이지로 써라. 
• [메인]에는 간단한 이용가이드, 주요 제공하는 기능들 정도만 주어도 충분하다. 사이트가 유명하지 않을수록 사람들의 리뷰를 참고하므로 서비스 이용자들의 후기를 보여준다. 
• [footer] 대표자 이름, 회사 소재지, 이용약관, 고객센터 전화번호, 저작권 표시 등 

4.15.화요일부터 '디자인 가이드(=스타일 가이드)' 만들어야 한다.

로고정하기 brand identity

사용할 폰트(한글,영문) 영문만 제공하는 폰트면 따로 폰트는 1개로 정해야한다. 

headline1 30pt, headline2 28pt, headline3 26pt

grey scale 흰색부터 검정색 어디부터 어디까지 쓸건지 정해야한다. 

pretendard(영문폰트, 한글지원 안됨)

디자이너들은 본고딕, 나눔시리즈 좋아한다. 무료로 상업적으로 쓸 수 있어서 그냥 나눔고딕은 촌스러움. 나눔바른고딕 

body1~6 몇 폰트 할건지 caption1~4 몇 폰트할건지 

-사용할 굵기별로 

-아이콘 스타일 형식 모아놓기 iconography

-corner radius 얼마만큼 줄건지

-point color 메인과 서브는 검정과 흰색인데 포인트 컬러 4개를 정했다.

색은 많으면 많을 수록 촌스러워진다.

예쁜 레이아웃을 쓰고 싶으면 컬러는 2개만 쓰는게 좋다. 빨강 초록

-버튼 스타일 : 동그랗게? 네모낳게?

-Color system 무채색 계열은 명도별로 올려놔야한다. 헥스 코드까지

*노트폴리오 참고해라. 

-컴포넌트 : button/input box/list/chip/navigation bar(앱에서 사용하는 메뉴 바이다.)/card/commerce bar/tab bar/

카드 디자인 형식별로 나눠놓기