[1-1~2-6] 파운데이션, 엘리먼트 | UI기초 | UIUX 디자인 스쿨 주 3일반 학습일지

 

 

🖥️ 오늘 수강한 분량 (6h24m)

 

1. 프리스쿨 UI 기초

    1) 파운데이션

         - Font, Color, Grid, Icon

    2) 엘리먼트

         - 버튼, 셀렉 컨트롤, 뱃지, 다이아로그, 뎁스,  이미지박스

    3) 모듈

        - 리스트 모듈

    4) 페이지
    5) 화면 공통영역
    6) 화면 디자인

 

 🌟단축키 모음  

• alt + V/B : 중앙 정렬
• Ctrl + Alt + C/V : 서식 복사
• Ctrl + shift + 4 : 그리드 뷰어 on/off

 

---

✍️학습일지

 

1-1 font

 

폰트 사이즈

 

• • 헤드라인 18~40
      *40 - 비쥬얼, 이벤트 텍스트
• 본문글 16 ~12
• flog:엣지 10
  *40 - 비쥬얼, 이벤트 텍스트

 

 

 

 

 

 

 

 

• 그룹 안 레이어 선택
  • 1. 더블클릭
    2. ctrl + 클릭

 

행간 기준

 

• *헤드라인 제외

 

 

 

 

 

 

 

 

 

1-2  color

• 콜 투 액션(CTA, call to action) : 사용자가 눌러야 하는 직관적인 기능

 

1-3 Grid

 

그리드
: 하얀 백지에 논리를 부여하는 작업

컬럼(Columns)

• 뷰어 on/off : Ctrl + shift + 4

 

1-4 icon

-  모바일 권장 두께: 최소 2px ⇧ 권장
- 서식 복사 ctrl + alt +c,v
- 패스모드 진입: 도형 선택 후 enter 

연속 패스: 진행 패스에 클릭

라인에서 시작!

 

 

Icon_area

 

1. icon area 뷰어 off
2. 아이콘 간격 : 아이콘 배경 기준
   1. 패스 - 아이콘 영역 내에서만

 

수치 입력란 : 계산 가능

계산 가능 똑똑 픽마

 

 

- 헥스값 입력 : 3글자 입력시 자동 입력

   ex) ccc → cccccc 

 

 

 

---

| 2-1 Button 

주버튼 / 기능 버튼

• 기본 / '누를 때'/ 비활성 버튼

 

Selection control (셀렉션 툴)

• checkbox : 복수 선택

 

• Radio button : 단일 선택

 

 

• Switches controrl : on/off

 

 

 

• Slider

 

---

 

| 2-3 Badge

- 업데이트, 알림 제공 컴포넌트

: new / dot / number / flag

 

---

 

| 2-4 Dialog (tooltip, snackbar)

• tooltip(툴팁): 사용자가 마우스를 가져다가 클릭하지 않고 대기하면 나오는 보충설명박스
• sanckbar(스낵바):  

 

텍스트 간격

24*24 // 24*16

 

박스 안 텍스트 입력시 여백 24*24 /16*16 

memorize: "중삼을 잘 잡으려면 16살에 이사가야 해" 

 

 

레이아웃 정리

• 아이콘(그림)
• 텍스트
• 배경

 

 

 

 

 

행간 기준

* 볼륨있는 텍스트 경우: 텍스트 크기 + 12p

(이후 결과물 보고 수정)

 

---

 

| 2-5 Tab . 1뎁스, 2뎁스, 3뎁스

 

이미지 영역

텍스트란/ 이미지란 별개 영역

 

• 구분 영역

• 텍스트란
• 이미지란

 

 

 

 

 

 

 

 

 

 

연한 폰트

연한 폰트

 

 

 

 

 

• 연한 폰트 오퍼시티 (x)

→ 색지정 (o)

 

 

 

 

 

 

 

 

 

 

---

 

 

 

🖥️ 수강하면서 흥미로웠던 부분

 

내가 보는 어플의 화면과 홈페이지의 디자인 요소들을 다시 보게 되는 시간이었다.일관성 있는 디자인으로 정돈하는 것으로만 생각 했던 것들이더 나은 시각화를 위해 끝까지 1px 차이도 고려하게 되는 이 분야가 더 매력적으로 느껴진다.

 

앞으로 배워가는 수업들이 기대가 된다!

 

 

 

 

  

이 글은 제로베이스 UXUI 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.