오늘 한 것들
디자인카타
CTA Button
(Call-to-action)
사용자의 반응 또는 행동을 유도하는 요소
이미지를 거의 사용할 수 없고 한 문장 정도의 짧은 문구만으로 클릭을 유도해내야 하는 버튼
Ex) 홈페이지에서 회원가입, 다운로드, 장바구니 넣기 등 목표 전환을 이끌어내기 위해 배치한 버튼, 배너, 링크 등
- 눈에 띄는 컬러 선택
- 유저 중심의 문구
- 추가 정보를 제공하여 유저의 걱정을 덜어주기
- 누가 봐도 버튼인 디자인을 사용
- 많은 버튼을 한 자리에 모아두지 않기
- 모바일 노출 화면을 꼭 확인하기
개인 과제
-
커리어 컨설팅
도움이 되었는지는 잘 모르겠다. 본인의 장단점을 알고 선택은 본인이 해야한다고 말씀하셨는데, 이미 원하는 것이 명확하다면서 더 이상 얘기하고 싶지 않으신 것 같다. -
Figma 활용법(1) 3~4주차 수강
-
분기점(Break point) - 디스플레이의 해상도에 따라 각각 다른 화면을 보여주기 위한 기준점
가로가 1024px 이상 : 데스크탑 화면
가로가 768px 이상 1024px 미만 : 태블릿 화면
가로가 768px 미만 : 모바일 화면
모바일 최소 가로 사이즈를 정해주는 것이 좋다(레이아웃이 깨지기 때문) -
Layout Grid
12column Grid : 12개인 이유는?
모바일 4개, 태블릿 8개, 데스크톱에서는 12개로 사용하며 12개가 일반적인 기둥으로 자리잡음
Unit : 실제 콘텐츠를 정렬하는 기준선
Guutter : 유닛과 유닛 사이의 애백
맨 양 끝의 칼럼에는 Gutter의 절반이 남는데, 좌우 여백으로 사용 -
8point Grid
간격이나 크기를 8배수로 맞추는 것 -
반응형(Resposive)과 적응형 디자인(Adaptive)
반응형 - 해상도의 변화에 실시간으로 반응
적응형 - 해상도가 변해도 반응하지 않음
-UI키트 와 디자인시스템, 파운데이션Semantic Color
사용 목적이나 UI에 따라 색상 이름을 부여하는 방식
Primary, Secondary, Tertiary color 정하고 10단계의 명도단계 생성
Affordance
행동 유도성
내일 할 것들
- 팀 과제
- 개인 과제
느낀 점
디자인카타 시간에 레퍼런스 인사이트를 공유했는데 예상 외로 다양한 시각에서 다양한 의견들이 나와서 놀랐다. 레퍼런스를 보는 안목을 기를 수 있는 소중한 시간이었다.
