lecturenote1023981-blog

[lecturenote1023981-blog]

타이포그래픽 컨벤션

줄바꿈은 리듬을 깨지 않는 위치에서

단어를 쪼개야 한다면 음절 사이에서 끊고, 문자 3개보다 짧은 조각으로 쪼개지 않는다.

1-2문자로 이루어진 단어가 줄 끝에 걸려서는 안 된다. 나머지 텍스트와 시각적으로 분리되기 때문이다.

문단 끝 줄에 마지막 단어 또는 마지막 단어의 일부가 혼자 있어서는 안 된다. 이 문제를 해결하려면 앞쪽 텍스트의 줄바꿈을 조절한다.

문단의 한 줄이 따로 분리되서는 안 된다. 페이지 끝에 걸린 문단의 첫 줄을 고아(orphan),  다음 페이지로 넘어간 문단의 마지막 줄을 과부(widow)라고 부른다.

왼쪽 정렬과 맞춤 정렬

왼쪽 정렬에서 줄 끝(rag)은 고른 듯 고르지 않게 만드는 것이 제일 보기 좋다. 너무 고르면 불완전한 직선처럼 보여서, 너무 울퉁불퉁하면 뚜렷한 형태를 만들기 때문에 읽기를 방해한다. 보기 좋은 줄바꿈을 위해 소프트 리턴과 하이픈을 넣는 작업을 ‘doing the rag’라고 부른다.

맞춤 정렬의 경우 좀 더 조심해야 하는데, 공간의 ��줄기를 만들지 않도록 조심해야 하기 때문이다.

잘못된 dash 사용하지 않기

하이픈(-): 줄바꿈을 위해 단어를 쪼개는 용도, 합성어에 포함 (i.e. left-wing, pre-owned)

en-dash(–): 하이픈보다 더 길고, em의 절반 길이다 (즉 16포인트 활자에서 en-dash는 8포인트). 범위를 표시하는 기호. macOS: Option + -

em-dash(—): 1em의 길이. 텍스트에서 구를 분리하기 위해 컴마처럼 사용. 인용구의 화자 앞에 붙일 때도 쓴다. macOS: Shift + Option + -

풋/인치 부호와 인용 부호 구별하기

18' 6" tall vs. “He said ‘no’”

macOS에서 풋/인치 부호를 입력하려면 Shift + Ctrl + ' 또는 Ctrl + ' 를 누른다.

숫자

대부분의 현대 활자체에는 4가지 종류의 숫자가 포함되어 있다.

lining figures: 우리가 일반적으로 보는 숫자. 베이스라인에서 시작해 cap-height에서 끝나는 크기.

old style figures: 더 전통적인 형태의 숫자. 어센더와 디센더가 있다.

제목과 같이 대문자가 쓰이는 부분에는 lining figures, 텍스트와 같이 소문자가 쓰이는 부분에는 old style figures

proportional figures: 각 숫자의 너비가 다르다.

tabular figures: 고정폭 숫자. 차트나 수학 방정식처럼 숫자끼리 줄을 맞춰야 할 때 사용.

Small Caps vs. Uppercase Capitals

본문에 포함하는 목적의 대문자. 높이가 x-height 정도. acronym과 같이 본문 중에 포함되는 대문자에 이용. 단, 사람의 이니셜은 예외로 항상 uppercase capital 로 쓴다.

Ligatures

텍스트를 더 매끄럽게 보이도록 하는 문자 조합. 대부분의 활자체가 기본적인 리가쳐를 포함한다.

[lecturenote1023981-blog]

전통적인 페이지 그리드

여백: 페이지에서 인쇄되는 부분을 둘러싸는 빈 공간. 책을 만드는 경우 제본 방식에 따라 안쪽 여백을 여유있게 잡는 것이 좋다.

행 라인: 텍스트나 새 챕터가 시작되는 지점을 정한 가로선

단: 큰 판형의 출판물의 경우 여러 단을 만들기도 한다. 단을 더 잘게 나눠 유연하게 활용할 수도 있다.

거터: 단 사이의 공간. 보통 폭을 활자의 레딩 값으로 정한다.

베이스라인 그리드: 이웃한 단이나 페이지의 텍스트끼리 줄이 맞도록 하기 위해 사용한다. 베이스라인의 간격은 활자의 레딩 값으로 정한다.

그리드는 유용한 도구이지만 오남용되면 구성을 제한할 수 있다. 그리드 없이 먼저 구성을 시작하고, 하고 싶은 것이 정해지면 거꾸로 그리드를 만들어 정렬을 다듬고 거리를 일관성 있게 조정하는 것을 추천한다. 또한, 그리드가 필요하지 않거나 부적합한 경우도 있다는 것을 잊어서는 안 된다.

[lecturenote1023981-blog]

타이포그래픽 공간

Letter Spacing 문자와 문자 사이의 상대적인 공간. 타입 디자이너는 폰트 파일에 letter spacing을 내장시켜서 문자 내부의 공간과 문자 사이의 공간의 균형을 맞춘다.

Tracking 문자 사이의 공간을 넓히거나 좁히는 것. 글자 크기가 작을 때 트래킹을 추가(예: +20)하면 가독성을 높일 수 있다. 반면, 글자 크기가 클 때는 음의 트래킹을 지정할 수 있다. 모든 문자가 대문자인 경우, 트래킹을 추가하는 것이 늘 좋다(+20 - +50). 대문자는 소문자 옆에 배치될 것을 고려해 더 좁은 간격으로 디자인되기 때문이다.

Kerning 전반적인 tracking과 무관하게 두 문자 사이의 간격을 조절하는 것.

Leading 문단 안에서 베이스라인 사이의 거리. 활자 세팅은 활자 크기와 레딩의 쌍으로 말할 수 있다. 예컨대, 책 본문의 흔한 세팅은 9포인트 사이즈, 12포인트 레딩이며 9/12라고 줄여 쓴다. 활자의 x-height가 레딩에 영향을 줄 수 있는데, x-height가 큰 경우 좀 더 많은 레딩이 필요하다.

Line Length 한 줄에 들어가는 문자의 평균 숫자로 측정할 수 있다. 몇 단어마다 줄의 시작으로 돌아가지 않도록 충분히, 단 다음 줄의 시작을 찾기 힘들지는 않게. 한 줄에 66문자가 스윗 스팟으로 여겨지지만, 80문자까지도 괜찮고 좁은 문단의 경우 40문자까지도 괜찮다. 줄이 길어지면 더 많은 레딩이 필요하다.

Alignment

왼쪽 정렬: 활자체의 본래 문자 간 간격, 단어 간 간격이 보존된다. 단점은 줄 끝이 나란하지 않다는 점이다(=rag).

맞춤 정렬: 줄의 양쪽이 반듯하다. 단점은 줄의 길이를 맞추기 위해 문자 간, 단어 간 간격이 수정되면서, 세로 방향으로 문단을 가로지르는 통로가 생긴다는 것이다. 이를 보정하기 위해 레딩을 늘려야 한다.

[lecturenote1023981-blog]

HCI의 High-level Models

Distributed Cognition, Activity Theory, Situated Action

가치있는 이론이란

이론의 가치는 그것이 얼마나 현실을 잘 설명하느냐보다는 얼마나 연구대상을 잘 구체화해서 관련된 이슈를 드러나게 하는지에 있다.

하이레벨 이론의 목표는 일어날 일을 예상하는 것이 아니다. 이것들은 보통 복잡하고 드문 상황을 가정함으로써 가장 중요한 것에 집중하도록 한다.

HCI 이론의 네 가지 힘

Descriptive: 세계를 설명하는 개념적 프레임워크. 충분히 복잡한 상황을 고려함으로써 oversimplify하지 않고도 현상을 설명할 수 있어야 한다

Rhetorical: 스스로에게도 타인에게도 상황을 설명할 수 있어야 한다. 예컨대 복잡한 인터랙션에 대해 어떻게 용어를 붙일 것인가

Inferential: 현상과 간섭에 대해 추론/예상할 수 있어야 한다

Application: 시스템 디자인에 정보를 주고 가이드할 수 있어야 한다

Distributed Cognition = DCog

구체화된 에이전트들에 의해 액션이 수행된다.

예) 쇼핑 리스트 만들기 = 나와 노트패드의 협동. 나는 살 것을 생각하고 노트패드는 살 것을 저장한다. 나는 기억을 노트패드에 맡기는 셈

정보는 사물이나 액션에 포함될 수 있다. (노트패드에 적힌 살 것처럼)

Edwin Hutchins에 의해 개발됨 비행기 조종석 안에서 조종사, 부조종사, 기계가 협업하는 모습을 보고 떠올림 비행기 조종석의 속도계기판에 speed bug이라는 작은 플라스틱을 붙임으로써 제한속도를 기억할 필요가 없게 된다

중요한 것: 상황에서 의미있는 분석의 단위는 무엇일까? 조종석 케이스에서 조종사, 부조종사만 고려했다면 불완전한 그림을 그렸을 것

Activity Theory = AT

행동이 분석의 기본 단위이다 시스템의 지속적인 변화와 발전 행동을 둘러싼 artifacts(도구, 법칙, 사회적 구조, …)들이 행동을 좌우한다

보통 삼각형으로 표현됨 행동의 주체는 도구를 통해 목적을 달성 행동의 주체는 법칙을 지키며 커뮤니티에 참여 커뮤니티는 분업을 통해 목적 달성에 기여

DCog vs AT

DCog:

유연한 분석 단위

시스템 동작을 드러냄

디자인에 더 쉽게 적용할 수 있다

AT:

시스템의 다양한 측면에 대해 언급하기 쉽다. 예컨대 커뮤니티에 대해 DCog에서 이야기하기는 좀 더 어렵다

개인의 힘을 강조. DCog의 쇼핑리스트 예시에서 개인과 노트패드는 둘다 액션의 에이전트. AT에서 개인은 주체, 노트패드는 툴

과정의 중요성에 대해 고려

공통점:

다양한 상황에 적용될 수 있다.

사회적/협업적 작업과 관련됨: 1인에 관한 것이 아니라 전체 시스템과 여러 사람들의 인터랙션에 관한 것

사회/문화/인지적 상황을 구체화한다: 랩 안이 아닌 큰 시스템 안에서의 연구

Ethnographic 데이터 콜렉션에 의존: 필드에 나가 사람들과 접촉하고 관찰

Situated Action = SA

도움이 되는 책: Lucy A. Schuman “Plans and Situated Actions — The problem of human/machine communication” 인간은 저지르고 설명하는 데 달인이다 계획한 뒤에 차례로 수행하는 것이 아니라 그냥 한다 누군가 뭘 하는지 말해달라고 하면 그제서야 했던 행동에 대해 설명할 계획을 만들어낸다

계획은 situated action의 설명이다: 참고용으로 쓰거나 액션이 끝난 다음 설명하기 위해 씀 (액션은… 그냥 매순간 최선이라고 생각되는 것을 한다)

계획은 보통 행동이 어려워질 때만 생긴다. 쉬운 행동에 대해서는 계획을 만들지 않음. 자전거 가르쳐주기 같은 행동이라면 계획을 세울 수 있음

객관성과 상호 명료성, 즉 자전거를 가르쳐 주는 사람도 이해하고 가르침 받는 사람도 이해하는 것은 노력이 필요하다.

언어는 객관성을 얻기 위한 중심 리소스다: 기술을 놓고 두 사람을 직접 관찰하면서 서로에게 하는 얘기를 듣는 것이 중요한 이유

다른 이론

Actor-Network Theroy: 사람과 사물을 네트워크의 일부로 보는 유명한 이론Learning Science theories: 학습에 관한 이론Economics Theories: 사회적 자본이나 물품교환에 관한 이론Psychology TheoryHuman Development Theories: 특정 연령대에 관한 프로젝트를 진행한다면…

[lecturenote1023981-blog]

STS 디자인 챌린지

사회심리학과 socio-techinal 시스템 디자인

위키피디아, 이베이, 트위터, … 시스템의 경험에서 핵심 요소 = 사람들 사람들은 소프트웨어처럼 쉽게 조작되거나 프로그램될 수 없다

5가지 핵심 챌린지: 사용자가 제공하는 컨텐츠에 의존해야 하므로 시작이 어렵다 새로운 멤버를 끌어들이고 커뮤니티에 기여하도록 사회화시키기 어렵다 사용자의 충성도를 유지하기 어렵다 사용자의 기여도를 유지하기 어렵다 사용자의 행동을 통제하기 어렵다

[lecturenote1023981-blog]

디자인 원리

디자인 원리: Visibility, Feedback, Mappings, Constraints

Visibility 시스템의 상태와 동작을 사용자에게 명확히 보여줘야 한다. 컨트롤을 숨기지 않는다. 디스플레이, 사운드 등을 통해 시스템의 상태를 보여준다 가장 중요한 기능은 눈에 띄도록 보여준다

Mappings 컨트롤하고 싶은 대상과 컨트롤러, 액션과 액션의 결과 사이의 매핑 물리적인 유사성, 물리적 관계, 문화적 기준을 활용할 수 있다 예) 컵 뚜껑 디스펜서: 컵 사이즈에 맞는 뚜껑 찾기. 뚜껑만 따로 놓지 말고, 컵 옆에 맞는 뚜껑을 나란히 놓으면 사이즈를 헷갈리지 않는다 예) The Design of Everyday Things의 스토브 예제

Feedback 사용자의 액션에 대응해 시스템이 행하는 액션 사용자가 시스템의 작동을 이해하고 적절한 모델을 만드는 것을 돕는 가장 중요한 메커니즘

Constraints 사용자가 할 수 있는 액션을 제한하는 것 사용자가 고려해야 하는 옵션을 줄여주고, 작업을 쉽게 만듦 예) 사용불가능한 아이템을 희미하게 보여주는 것 (gray out)

[lecturenote1023981-blog]

액션의 단계

액션의 단계(Stages of Actions Model) 1. 목표를 이루기 위해 행동할 의지를 가진다 2. 뭘 할지 정하고 행동한다: 환경에 변화를 일으킴 3. 행동의 결과를 지각하고 해석한다 4. 목표에 다가섰는지 확인한다 (다시 반복)

Gulf of Execution: 액션을 하는 데 어려움을 겪는 경우 * 시스템에서 사용자가 하고자 하는 액션을 지원하는가? * 사용자가 적합한 액션을 파악할 수 있는가? * 사용가능한 액션 중에서 ��야 하는 것을 선택하는 데 어려움을 겪는 경우

Gulf of Evaluation * 시스템이 사용자의 의도와 목적 달성 측면에서 쉽게 인지되고 해석되는 시각적 표시를 보여주는가? * 시스템의 물리적 상태를 해석하고 목표에 다가섰는지를 확인하는 데 필요한 노력의 양

디자인 가이드로서의 액션의 단계 * 사용자가 얼마나 쉽게 시스템의 기능을 파악할 수 있는가? * 사용자가 얼마나 쉽게 가능한 액션을 파악할 수 있는가? * 사용자가 얼마나 쉽게 적합한 액션을 정하고 수행할 수 있는가? * 사용자가 얼마나 쉽게 행동의 결과를 지각하고 해석할 수 있는가? * 사용자가 얼마나 쉽게 목표로의 진행과정을 파악할 수 있는가?

이 질문에 대답하는 것을 도와줄 Design Principles: Visibility, Feedback, Mappings, Constraints

[lecturenote1023981-blog]

개념 모델(conceptual models)

사람은 설명하는 존재 — 사물이 동작하는 방식을 모델로 만든다 인터페이스는 사용자가 예상한 대로 동작하도록 디자인되어야 한다 디자이너의 일: 사용자가 시스템에 대해 올바른 모델을 쉽게 만들 수 있게 하는 것

디자인 모델과 사용자 모델 디자인 모델: 디자이너가 시스템에 대해 만든 모델. 시스템을 완전히 이해 사용자 모델: 사용자가 시스템에 대해 만든 모델. 디자인 모델과 일치한다면 좋겠지만… 시스템 이미지: 사용자가 볼 수 있는 시스템의 모든 것. 디자이너가 사용자와 커뮤니케이션하는 방법은 시스템 이미지를 통해서만 가능하다. 

사용자는 시스템 이미지를 통해 사용자 모델을 만든다. 디자이너는 사용자가 디자인 모델과 동일한 사용자 모델을 만들 수 있도록 시스템 이미지를 만들어야 한다.

[lecturenote1023981-blog]

Slips and Mistakes

Unconscious slips, conscious mistakes

Slips 사용자가 특정 액션을 하려 했으나, 다른 (비슷한) 액션을 하게 되는 것 예) 치솔에 치약 대신 핸드워시를 짜는 것 방지책: 도움이 되는 제약사항 포함하기, 제안 보여주기, 좋은 기본값 설정하기, 너그러운 포맷팅 사용하기

Mistakes 사용자가 현재 문제나 작업에 부적합한 목표를 설정하는 경우, 사용자가 의식적으로 목표를 달성한다 해도 결국 잘못을 하게 된다. 예) 차의 유압 경고등을 타이어압 경고등으로 오인한 경우 아무리 타이어에 에어를 채워도 문제가 해결되지 않음 방지책: 사용자의 멘탈모델 이해를 위해 사용자 데이터 수집, 디자인 컨벤션 따르기, 어포던스(행동 유도성) 커뮤니케이션, 결과 미리 보여주기

[lecturenote1023981-blog]

지각(perception)의 11가지 특징

1. 근접성(proximity): 가까운 것은 같은 그룹으로 본다 2. 유사성(similarity): 비슷하게 생긴 것들은 같은 그룹으로 본다 3. 패턴 매칭(matching patterns): 같은 모양이면 크기가 달라도 비슷하게 반응한다 4. 간결성(succinctness): 사물에서 완벽하거나 단순한 도형을 찾는다. 그런 것들이 기억하기 쉬우므로 5. 폐쇄성(closure): 뭔가가 닫혀있지(완전하지) 않을 때, 닫힌 것으로 보는 것 (도형이나 단어) 6. 통합성(unity): 닫힌 도형을 만드는 것들을 그룹으로 본다 7. 연속성(continuity): 짧은 선은 자동으로 연장된다 8. 균형(balance): 수직, 수평, 직각은 시각적으로 가장 만족스럽고 보기 편하다 9. 기대(expectancy): 실제로 있는 것이 아니라 있기를 기대하는 것이 있다고 인지하는 것. 교정할 때 오타를 못 보는 경우처럼 10. 맥락(context): 주변의 맥락, 환경에 영향을 받는다 11. 신호 대 소음(signals versus noise): 중요한 자극은 신호, 중요하지 않거나 원치 않는 자극은 소음. 둘이 서로 비슷할수록 신호의 인지가 어려워짐

[lecturenote1023981-blog]

기억과 주의

기억

단기 기억: 3-4개의 항목을 몇 초간 장기 기억: 아주 많은 기억을 장기간 기억, 떠올리는 기억하는 데 오래 걸림

기억을 많이 하지 않도록 해야 한다 정보를 조직적, 구조화된 형태로, 친숙하고 의미있는 방식으로 보여줘야 한다 작업을 효율적으로 하기 위해 필요한 정보를 물리적으로 가깝게 배치한다 정보 표시의 속도를 사용자가 조절할 수 있도록 한다

주의

사물이나 생각에 대해 집중하는 것 주의는 소중하고 제한된 자원이다 정신을 산만하게 하는 것들로 인터페이스의 주변을 어지럽히지 않는다 중요한 요소에 사용자의 주의를 집중시킨다

[lecturenote1023981-blog]

피츠의 법칙

심리학과 인적 요인

두 가지 측면에서 사용자 이해하기 일반적으로 사람들이 기술과 어떻게 상호작용하는가 타겟 (특정) 사용자가 본인의 (특정) 기술과 어떻게 상호작용하는가

사람들의 일반적인 특성을 이해함으로써 바퀴 재발명을 피할 수 있다.

피츠의 법칙

사람들이 어떻게 손을 움직이고, 가리키는가? 가리키는 데 걸리는 시간 = f(타겟의 거리, 타겟의 크기, 포인팅 디바이스) 사람들이 얼마나 잘 가리키는 지에 대한 수학적 모델

가리키기

마우스를 이용해 가리키기, 트랙패드를 이용해 가리키기, 손가락으로 가리키기 포인팅은 많은 인터랙션에서 중요하다.

피츠의 법칙: 단순한 버전

T = a + b * log_2(A/W + 1)

T: 가리키는 데 걸리는 시간 W: 타겟의 크기 (타겟: 버튼, 앱 아이콘, 하이퍼링크, …) A: 타겟의 거리 a, b: 포인팅 디바이스의 속성

W가 커지면, T는 작아진다. A가 커지면, T는 커진다.

피츠의 법칙을 적용한 사례

MS 오피스의 리본: 자주 사용되는 기능을 크게, 함께 자주 사용되는 기능을 가까이

맥OS의 메뉴: 보기에는 작지만, 화면 최상단에 위치해서 마우스를 위로 올리면 무조건 메뉴에 닿는다 -> 메뉴의 높이가 세로로 무제한이 되는 효과

맥OS의 dock magnification

윈도의 Automatically move(snap) pointer to the default button in a dialog 옵션

XEROX - 상용화된 마우스의 발명: 마우스가 키보드나 조이스틱보다 a, b 값이 낮았음.

피츠의 법칙 체험

simonwallner.at/ext/fitts

피츠의 법칙과 정확성

피츠의 법칙은 정확성에 관한 것은 아니지만, 정확성의 면에서 볼 수도 있다. speed-accuracy tradeoff 타겟 사이즈를 키우면 = error threshold를 키우면, 포인팅에 걸리는 시간이 줄어든다. 타겟 사이즈를 줄이면 = error threshold를 줄이면, 포인팅에 걸리는 시간이 늘어난다. 타겟 사이즈를 작게 한 상태에서 빠르게 클릭하려고 하면, 실패율이 높다. (정확성이 낮다)

FFits’ Law: 손가락 포인팅에 적용된 피츠의 법칙

피츠의 법칙 + Fat Finger Problem Fat Finger Problem: 작은 대상을 손가락으로 가리키라고 했을 때,  사람들에게 시간을 무제한으로 주더라도 실패하는 현상

[lecturenote1023981-blog]

아티스트 스테이트먼트

본인의 모티베이션, 방법론, 스타일의 경향, 작업물의 내러티브에 대한 평가. 경력이 쌓임에 따라 계속 발전하는 것. 풀타임 그래픽 디자인 프로그램과 잡 커버레터의 키 컴포넌트.

그래픽 디자인에 왜 흥미를 가지게 되었는가? 그래픽 디자인에 대한 현재 지식수준과 관점 무엇이 그래픽 디자인으로 끌어당기고, 흥미를 불러일으키는가, 왜? 그래픽 디자인에서 볼 수 있는 기회�� 한계는 무엇인가?

이런 관점을 발전시키려면 계속해서 새로운 그래픽 디자인 작품을 보고 그 작품에 대한 의견을 표현해 보자. 작품에 대해 메모하고 동료와 함께 이야기해 보자. 그래픽 디자인과 예술사에서 중요한 디자이너들의 글과 작품을 찾아보고, 그들의 모티베이션, 컨텍스트, 기술, 스타일의 선택을 분석해보자.

아티스트 스테이트먼트에는 디자인 프로젝트에 대한 설명, 비주얼 아트와 그래픽 디자인에 대한 경험, 새로운 작품에 접근하는 방식이 포함되어야 한다. 이것을 metacognition이라고 한다. 본인의 작품을 둘러싼 생각과 과정을 이해하는 것. 이 스테이트먼트는 독자가 본인의 작업 과정, 여러 프로젝트에서 본인의 역할, 작품을 완성한 뒤에 작품에 대한 본인의 생각을 이해하는 데 도움이 되어야 한다.

[lecturenote1023981-blog]

디자인 포트폴리오 팁

대상에 맞게 포트폴리오를 다듬기

풀타임 프로그램 지원용이라면, 포트폴리오에 다양한 스타일과 기술을 포함해 소프트웨어와 전통적인 크래프트 스킬에 능숙함을 보여줄 수 있다. 프리랜스 작업 지원용이라면, 클라이언트는 전문성을 띠는 부분에 집중하기 때문에, 포트폴리오가 본인의 artist statement와 작업 철학을 뒷받침할 수 있어야 한다.

컨텍스트를 전달하기

포트폴리오의 작품마다 컨텍스트를 전달하자. 뒷받침하는 글이나 섬세하게 선택한 이미지, 혹은 작업 과정도 좋다. 스케치와 과정 이미지는 최종 작업물을 뒷받침하기 위해 이용될 수 있다. 따라서 작업할 때 모든 과정을 꼭 저장하자. 나중에 artist statement를 작성할 때 도움이 될 것이고, 포트폴리오에 유용한 자료가 될 것이다. 여러분이 디자이너처럼 생각하고 작업할 수 있음을 보여주자. 아직 배우는 과정이라 기술적으로 부족하더라도 말이다.

글자와 이미지를 함께 다루는 방식을 보여주기

글자를 활용한 좋은 예제를 넣자. 웹 또는 앱 프로토타입, 출판물, 잡지, 이벤트를 위한 포스터, letterform 발전시키기, 핸드레터링 등

이야기를 들려주기

작업물을 보여주는 것은 작업물 + 디자이너로서 여러분의 이야기를 들려주는 것이다. 그래픽 디자인은 이 이야기를 컨트롤하는 것이다. 그 방법이 이미지의 선택/편집이든, 영리한 사진이든, 문서 구조든, 작업물에 대한 잘 쓰인 줄거리이든.

정리하기

포트폴리오는 메시지를 통제하기 위해 잘 정리되고 구조화되어야 한다. 가능하다면, 각 프로젝트의 시각적 표현을 통일하자. documentation은 프로젝트 사이에 일관성이 있어야 한다.

[lecturenote1023981-blog]

풀타임 그래픽 디자인 프로그램

풀타임 그래픽 디자인 프로그램을 통해 더 집중적으로 자극이 되는 환경에서 공부하고, 만들고, 그래픽 디자인에 대해 얘기할 수 있다. 더불어 경력을 쌓을 수 있는 리소스와 강력한 동문 네트워크 등을 접할 수 있다.

선택하기

학생, 교직원, 최근 졸업생들의 작품을 확인해 보자.

필드에서 본인이 전문성을 가지고 싶은 분야를 고려하자.

교실 밖에서 작품을 만들 수 있는 어떤 기회들이 있는지 확인하자.

분위기와 환경을 확인하자.

다양한 면에서 학생들과 교직원의 다양성을 확인하자.

위치와 비용을 확인하자.

[lecturenote1023981-blog]

시각적 대비

형태, 스케일, 무게, 공간, 방향, 텍스처 form, scale, weight, space, direction, texture

abstract shape을 이용한 구성

글자를 이용한 구성: visual cacophony를 피하기 위해서 다양한 폭과 굵기를 가진 한 가지 type family를 선택하는 것도 좋다. (예: Univers)

이미지를 이용한 구성: abstract shape와 다르게 의미를 부여해서 해석하게 됨

이미지를 이용한 구성에서의 방향성

사물 이미지: 기하학적 형태에 따라 방향성을 느낌

사람 이미지: 사람의 시선에 따라 내재적인 방향성을 느낌

[lecturenote1023981-blog]

구성의 전통적인 원리

자연의 비율에서 유래

가운데 배치하기 정가운데, 가로 방향으로 가운데, 세로 방향으로 가운데 자연스럽고, 보통 괜찮음. 하지만 흔히 볼 수 있는 배치이기 때문에 능력을 다 활용하지 못하는 것일수도

1/3의 법칙 (rule of thirds) 페이지나 스크린을 3등분했을 때, 가이드가 교차하는 지점이 points of visual interest 가이드가 교차하는 지점에 요소를 배치한다.

황금비