Class Program for Web Design II

Web Design II RWD

"정보에
질서와 구조를
부여한다"

2016년 2학기 웹디자인 II 수업을 위한 주차별 수업내용 목록입니다. 더욱 상세한 내용은 주별 강의로 들을 수 있습니다.
( 참고로 이미지를 클릭하면 간단한 설명 확인 가능. )

1 WEEK

Orientation

설문 및 오리엔테이션…

2 WEEK

New Designer

웹의 특성과 디자이너의 진화…

3 WEEK

@media query

미디어쿼리와 HTML5 & CSS의 이해…

4 WEEK

Default RWD

각 그리드별 기본 레이아웃 소스 경험 및 활용(Desktop, Tablet, Mobile)…

5 WEEK

Web Grid

웹 그리드를 통한 레이아웃 경험(Desktop, Tablet, Mobile 순으로 사이즈/콘텐츠 변화)…

6 WEEK

3type Layout

Static, Float, FlexBox layout & Response Layout 변화과정과 표준화에 따른 진화…

7 WEEK

Flexible Website

HTML5 & CSS3를 통한 RWD의 위력…

8 WEEK

Midterm exam

KNU Multi Design 학과 사이트 모던 스타일로 리뉴얼(Front Page)…

9 WEEK

2nd Orientation

WCIS & Gravatar 가입 Slack/Spaces 가입…

10 WEEK

My Portfolio

Sketch 3 & Adobe XD를 통한 프로토타입 접근…

11 WEEK

Research

주제를 중심으로 자료조사…

12 WEEK

Sketch & Wireframe

프로토타입 툴을 통한 와이어프레임 형식 아이디어 구성…

13 WEEK

Prototype

운영될 수 있는 포트폴리오 프로토타입을 완성…

14 WEEK

Make it interactive prototype

실전과 똑같은 테스트를 한다는 것은 디자이너 워크플로(Workflow)의 대부분을 차지한다…

15 WEEK

Finalterm exam

자신 있게 많은 사람 앞에서 당신의 생각과 아이디어를 전달한다는 것은…

Professor

KOKOMO

"가로에서 세로로의 전환은 휴먼 인터액션의 우연의 사건이다!"
- by kokomo

Web Resources  

Orientation

반응형 웹이란 하루아침에 태어난 것이 아니라 수많은 요구와 필요로 발전한 디지털 그래픽 문법이자 레이아웃의 효율적 방법론이다.
by kokomo

New Designer

시대 변화에 따른 디자이너의 역할과 프로세스는 꾸준히 변화하고 있으며, 현재 인쇄 매체와는 현격히 다른 하이퍼텍스트가 주류를 이룬다고 할 수 있다.
이것은 바로 그래픽적 커뮤니케이션의 개념이 180도 달라졌다는 의미이기도 하다.
정적인 것에서 동적인 것으로, 생산자가 기업에서 개인으로 또는 대중 매체의 포맷이 가로에서 세로 포맷으로 바뀌었다는 의미이기도 하다.

@media query

절대적 답은 아니지만, 개발자들과 디자이너들의 많은 시도를 통해 깨달은 것은 바로 수많은 매체 기기들의 진화하는 해상도에 대응해야 한다는 것이다.
이를 통해 HTML5/CSS3에서는 미디어쿼리가 태어나게 되었으며 이제 점차 발전해 나갈 것으로 기대된다.

Default RWD

북디자인에 활용된 대지 작업과는 현격히 다른 웹 문서는 유사한 점도 다소 있지만 대부분이 다양한 그룹화 된 데이터를 가지고 있으므로 논리적이고 체계적인 단계를 갖추지 않으면 많은 문제점을 발생시키기 때문에 반응형 웹을 통해 좀 더 체계적인 구성 요소로 관리가 필요하다. 대표적인 구성 요소를 예로 들면 Header, Footer, Article, Aside, Navigation 등으로 이야기할 수 있다.
하지만 Desktop/Tablet/Mobile 기기에 따라 더욱 효율적인 구성을 갖추려면 좀 더 반응형 웹의 자동화된 구성 방법에 심혈을 기울여야 한다.

Web Grid

그리드 시스템은 페이지를 구성하는 정보를 의미 있고 논리적으로 일관성 있게 구성하는 것을 중요시하는 그래픽 디자이너에게 도움을 주는 정밀한 프레임워크(구조, 체제)이다. 그리드 시스템의 초기 버전은 중세 시대(대략 476년~1453년 사이를 중세라 부름)에서부터 존재했지만, 대부분의 그래픽 디자이너들은 타이포그래피 브로슈어(프린트 디자인 결과물) 제작 과정에서 영감을 얻어 페이지 레이아웃에 대한 정밀하고 일관된 시스템을 구축하기 시작했다. 이후 그리드에 대한 철저한 분석을 담은 스위스의 그래픽 디자이너 요제프 뮐러 브로크가 저술한 책 Grid Systems의 발표로 그리드 시스템에 관한 지식이 전 세계적으로 전파되는 데 있어 큰 기여를 이룬다.
웹 디자인에도 많은 개발자와 디자이너들의 노력으로 다양한 그리드 시스템이 개발되는데 대표적으로 근래에 960Grid 시스템을 예로들 수 있다.

"정보에 질서와 구조를 부여한다."
- 요제프 뮐러 브로크(Josef Muller Brockmann)

3type Layout

Static/Float/Flex 레이아웃 형식은 어찌 보면 웹 문서의 변화과정과 표준화에 따른 플랫폼의 진화를 의미한다.
공존하지만 가로에서 세로로 확장된 3type Layout(Desktop, Tablets, Mobile)은 과거 프린트 매체의 A4, B4, A3~ 등 표준화된 사이즈로 픽스되었다.

Flexible Website

반응형 웹 콘텐츠의 효율적인 접근법
- 동선을 파악하라.
- html layout 기본 구조에 충실하라.
- 그룹과 그룹 박스와 박스 사이에 길을 만들어라.
- 정렬에 우선순위를 부과하라.
- 가장 중요한 콘텐츠는 top에 올려라.
- 특징이 될만한 컬러 또는 이미지를 1가지를 선택하라.
- 약방에 감초 애니메이션을 적용하라.
- Static/Float/Fixed의 장점을 이해하고 적절히 적용하라.
- LINK는 웹콘텐츠의 보배이다.
- Open/Close의 원리를 활용하라.
- 스크롤은 타임라인이다.
- 리듬이 없는 웹 콘텐츠는 죽은 콘텐츠이다.

Midterm exam

주제 :
KNU Multi Design 학과 사이트 모던 스타일로 리뉴얼
"디자이너의 Paper-less를 향한 끝없는 도전~"

2nd Orientation

http://jamesturrell.com/
https://www.wimdelvoye.be/
http://www.wescoatfineart.com/
http://www.kellyraeroberts.com/
http://www.durimel.io/nel
http://toyfight.co/
http://hannahpurmort.com/
http://corentinfardeau.fr/
https://minglabs.com/en
http://www.pellmell.fr/
http://method.digital/
https://www.rodesk.com/
http://pharrellwilliams.com/
http://springsummer.dk/
더 많은 내용을 확인하려면 다음 페이지로 이동~

My Portfolio

온라인으로 자신의 포트폴리오를 준비했다는 것은 전쟁터에 나갈 준비가 되어있다는 것이다.

Research

많은 아티스트들의 포트폴리오를 참고함으로 나만의 포트폴리오를 기획하고 꾸밀 수 있는 능력을 키운다.
이제 어디에서도 접근 가능한 나만의 포트폴리오를 만들자~!

Sketch & Wireframe

상상한 것 그 이상의 디자인을 하려면 수많은 시행착오와 스케치가 필요하다. 디지털 미디어에서의 스케치는 바로 와이어프레임/프로토타입 과정이 최고~

Prototype

프로토타입의 접근은 단일 디자인에서 스토리 디자인으로 전환되는 프로세스이며, 샘플링하는 과정이기도 합니다. 최종 결과물에 가깝게 접근하게 되므로 디자인의 꽃이라 할 수 있습니다.

Mirror & Simulation

아무리 평면적이고 정적인 디자인이 마음에 든다 해도 현실적으로 적용되는 인터액션(Interaction)의 상태를 대신할 수는 없습니다. 그러기에 최종 프로토타입에 타임라인을 적용하여 동적인 결과물을 만드는 과정이 필요한데 이것이 바로 시뮬레이션(Simulation) 과정입니다.

Finalterm exam

디자이너가 맞이하는 최종 단계는 바로 프레젠테이션(Presenseation) 과정입니다. 누군가의 앞에서 자신이 디자인한 결과물을 가지고 설명하고 설득한다는 것은 매우 흥미롭고 설래는 일일 것입니다. 여러분들도 자신이 준비한 결과물을 가지고 멋진 브리핑(Briefing)에 도전하기를 바랍니다.

Thanks for everybody~!

[사용된 오픈소스 목록]
- Wordpress 4.6.1
- Magnific Popup
   Responsive lightbox & dialog script for jQuery
- Google font: Roboto, Roboto+Slab, Fjalla+One
- Bootstrap & Font Awesome 4.7.0
- 이외의 수많은 웹 리소스( 만든 사람의 표기는 퍼온 자료들의 내부에 표기되어 있습니다.)