서희2

youtu.be/ay7VHoa8tKs

스케치에 대해

스케치는 2008년 네덜란드 헤이크에서 설립된 보헤미안 코딩(Bohemian Coding)사에서 제작한 벡터 기반의 디자인툴이다. 기본적으로 모든 디자인 영역의 디자이너를 위해 제작되었는데, 특히 웹과 모바일 등의 사용자 인터페이스 디자인 영역에서 많은 관심과 사랑을 받고 있다.

스케치 활용의 핵심은 기획자, 디자이너, 개발자 모두가 하나의 툴을 사용하고, 이 데이터를 중심으로 서로 커뮤니케이션하는 것이다.

스케치라는 툴을 통해 ‘문서 없는 (less document-oriented)’ 개발 환경, 그리고 이를 통해 ‘실제 활용 가능한 (code-oriented)’ 데이터를 다루는 것을 지향한다는 것이다.

참고사이트 : 스케치로 디자인 툴을 바꾸기 전에 고민해야 할 것에 대해

medium.com/@hooncho/%EC%8A%A4%EC%BC%80%EC%B9%98%EB%A1%9C-%EB%94%94%EC%9E%90%EC%9D%B8-%ED%88%B4%EC%9D%84-%EB%B0%94%EA%BE%B8%EA%B8%B0-%EC%A0%84%EC%97%90-%EA%B3%A0%EB%AF%BC%ED%95%B4%EC%95%BC-%ED%95%A0-%EA%B2%83%EC%97%90-%EB%8C%80%ED%95%B4-56a20f55c05e

youtu.be/jFf8W1N21L8

WireFrame

골격 이라고도 하고, 인터페이스를 시각화 하는것

유저가 해당사이트에 들어와서 본인이 원하는 목적지에 도달할 때까지 얼마나 효율적으로 플로워를 짜는가

혹은 디자이너로서 사용성 측면이나 디자인 개발이 들어가기에 앞서 서비스의 미래를 예측할 수 있는 단계이기 때문에

매우 중요하다.

게슈탈트 심리학

"우리의 뇌는 구성요소들을 개별적으로 보기에 앞서서 그 윤곽이나 패턴, 형태적 차이를 먼저 파악하려는 습성을 지녔다."

유사성의 원리

색, 모양, 크기가 동일한 요소들을 하나의 관계로 엮어 보려는 경향이 있다.

근접성의 원리

서로 이웃해있는 요소들과 그렇지 않은 요소를 구분하려는 경향

가까이 있는 요소를 멀리 있는 요소와 다르게 보는것, (ex.그룹핑이 안되어 있다. g마켓)

공통영역의 원리

박스 안에 있는 요소들을 같은 정보로 묶어 보려는 경향을 말합니다.

(ex.네이버쇼핑)

연속성의 원리

연속성을 띠는 배열을 관련성이 높다고 보는 것

(ex.드리블 리스트 반복된 패턴, 미디어하우스 컨텐츠, g마켓)

각 원리들이 골고루 섞여 있을 수 있다.

각 사이트를 볼 때 왜 좋아보이는지 생각하고 보자

(ex.드리블 등)

youtu.be/iqv9CDY-QCA

*실무에서 사용하는 웹 디자인의 컴포넌트와 엘리먼트 용어

*버튼, 인풋, 테이블, 브래드크럼브, 팝오버, 아코디언, 캐로샐 등

*부트스트랩 사이트 : http://bootstrapk.com/

User experience Design / 사용자 경험 디자인

User Interface Design / UI 디자인

Responsive web / 반응형 웹

WEG (web style guide)

Arrordance / 행동유도성

Layout / 화면구성 또는 배치

Grid / 레이아웃을 구성하는데 필요한 가이드

GNB(global navigation bar)

LNB(local navigation bar)

사이드바 / 헤더 / 푸터 

Input창 / Placeholder 힌트 / label 

CTA(call to action) / 목표달성버튼

Favicon / 사이트 바 아이콘

...

20강 text-align 개념

21강 text-align 관련 자주 헷갈리는 개념

22강 문제-각각 크기와 색상과 정렬상태가 다른 링크 버튼 3개 만들기

23강 hover 개념

24강 문제-100칸 짜리 바둑판을 만들고 하나의 칸에 마우스를 올리면 해당 칸의 배경색이 바뀌도록 한다1

25강 emmit(자식선택자, 인접동생선택자)

26강   개념

27강 text-decoration 개념

28강 div 태그만 사용하여 사과 색상을 red로 변경하기

29강 문제-bnx 사이트의 상단 메뉴까지 구현해보기

30강 정답예시  없이 구현해보기

31강 정답예시 width 각 아이템의 너비가 동일하게 구현해보기 

youtu.be/sJs9ExdnDys

0:03 Ctrl+W | 창 닫기

0:16 f2 | 이름 바꾸기

0:28 Win+E | 파일 탐색기

0:51 Win+좌우 | 창 좌우분할

1:03 Win+상하 | 창 상하분할(창 크기 조절)

1:16 Win+D | 바탕화면 보기 & 다시 복원

1:42 가상데스크톱 데스크톱 확인 | Win+Tab 데스크톱 이동 | Ctrl+Win+좌우

2:47 작업표시줄 프로그램 열기 | Win+숫자 (새창으로 열기 Win+Shift+숫자)

3:12 윈도우 설정 | Win+i

3:23 블록 설정 | Ctrl

3:35 화면 잠금 | Win+l (카톡잠금 Crtl+l)

3:53 화면 확대/축소 | Ctrl+휠 (되돌리기 Crtl+0) 4:05 화면 캡

쳐 | Win+Shift+s

#

웹은 소통을 위해 만들어진다.

웹은 죽지 않는다

PC   <   MOBILE

다양하고 통합된 경험을 요구하는 UI로 변화

(빅데이터,양자컴퓨터,블록체인,5G,AI,VR,자율주행,디지털트윈,인공지능스피커,IoT)

12강 글자 스타일 연습

13강 테이블 개념

14강 display 속성과 관련된 문제 연습

15강 a와 br

16강 링크 창띄우기

17강 젠코딩으로 네이버, 구글, 다음으로 가는 링크 만들기 연습

18강 개념 - 후손 선택자

19강 각 크기와 색상이 다른 링크 버튼 3개 만들기

7강 div, section,article 태그를 사용해서 3가지 색의 막대 만들기

8강 display 속성 정리

9강 section(green)색의 막대와 article(blue)색의 막대를 한 줄에 보이도록 문제

10강 엘리먼트(배우)의 부모, 자식, 형제관계

11강 글자 개념

1강 웹코딩 툴 세팅

2강 기초 키보드 및 단축키 사용법

3강 HTML 태그의 의미

4강 HTML, CSS, JS의 역할

5강 수업페이지 활용방법

6강 배경색, 너비, 높이