문서의 제목 나눔고딕b, 54ptdigital_graduation.sdu.ac.kr/2013/project/pdf/17.pdf사례조사...
TRANSCRIPT
![Page 1: 문서의 제목 나눔고딕B, 54ptdigital_graduation.sdu.ac.kr/2013/project/pdf/17.pdf사례조사 2008~2012 졸전사이트 확인 타학교 온라인 졸전사이트 분석 예술](https://reader034.vdocuments.net/reader034/viewer/2022042312/5edab90ada2ba853470debc4/html5/thumbnails/1.jpg)
디자인스튜디오 졸업작품계획서
2013.12.01
학번 2010300174
이름 권준성
![Page 2: 문서의 제목 나눔고딕B, 54ptdigital_graduation.sdu.ac.kr/2013/project/pdf/17.pdf사례조사 2008~2012 졸전사이트 확인 타학교 온라인 졸전사이트 분석 예술](https://reader034.vdocuments.net/reader034/viewer/2022042312/5edab90ada2ba853470debc4/html5/thumbnails/2.jpg)
1. 졸업 작품 개요
2. 사례조사
3. 졸업작품 소개
4. 졸업작품을 마치며
목차
![Page 3: 문서의 제목 나눔고딕B, 54ptdigital_graduation.sdu.ac.kr/2013/project/pdf/17.pdf사례조사 2008~2012 졸전사이트 확인 타학교 온라인 졸전사이트 분석 예술](https://reader034.vdocuments.net/reader034/viewer/2022042312/5edab90ada2ba853470debc4/html5/thumbnails/3.jpg)
1. 졸업 작품 개요
3 / 18
이름(학번) : 권준성(2010300174)
작품 제목 : 온라인 전시사이트 구축
작품 내용 요약
지금 1년은 예전 10년과 같다.
2050년도 37년 후….
타고, 달리고, 내리는 곳의 그 때의모습은 어떠할까?
“미래형 운송수단(Future Transportation)”.
20여명의 디자이너들이 그 때를 미리 가본다.
2013 SDU 디지털디자인학과 졸업작품 웹사이트.
졸업작품
전시사이트
컨셉
요구
사항
트랜드
적용
기술
정보
구조
제약
사항
작품의 개념도
![Page 4: 문서의 제목 나눔고딕B, 54ptdigital_graduation.sdu.ac.kr/2013/project/pdf/17.pdf사례조사 2008~2012 졸전사이트 확인 타학교 온라인 졸전사이트 분석 예술](https://reader034.vdocuments.net/reader034/viewer/2022042312/5edab90ada2ba853470debc4/html5/thumbnails/4.jpg)
주제설명
세부주제
Station
Vehicle, Vessel
Gas station, Car center
Traffic sign
Road
사례조사
2008~2012 졸전사이트 확인
타학교 온라인 졸전사이트 분석
예술/IT관련 해외 전시사이트
고찰
요구사항
미래지향적이고, 운송수단과 관
련된 스타일의 분위기
인트로, 교수님 및 학생들 인터
뷰, 졸전작품 갤러리, 맺음말
컨셉 Simple
Responsive Web
“미래의 운송수단(Future Transportation)” 졸업작품 전시 웹사이트
키워드 : Future, Station, Vehicle(Vessel), Gas station, Car center, Traffic sign, Road
4 / 18
1. 졸업작품의 개요
![Page 5: 문서의 제목 나눔고딕B, 54ptdigital_graduation.sdu.ac.kr/2013/project/pdf/17.pdf사례조사 2008~2012 졸전사이트 확인 타학교 온라인 졸전사이트 분석 예술](https://reader034.vdocuments.net/reader034/viewer/2022042312/5edab90ada2ba853470debc4/html5/thumbnails/5.jpg)
현황(사례조사) 2008~2012년도 졸업작품 전시사이트 정보구조 및 제작 기술 파악
5 / 18
2. 사례조사
년도 정보구조 적용기술
2008 INTRODUCTION / GALLERY / PROCESSOR / ACTIVITY 전공소개 학생작품/졸업전시회 축사/지도교수 전공활동/학습활동
FLASH, HTML
2009 INTRODUCTION / GALLERY / PROCESSOR / ACTIVITY 학부소개/전공소개 졸업작품/과제작품 지도교수/축사 현장스케치/참여학생후기/자유게시판
FLASH, HTML
2010 INTRODUCTION / GALLERY / PROCESSOR / ACTIVITY 전공소개 축사/지도교수 참여학생후기/현장스케치
FLASH, HTML
2011
2012 What’s SDDG / Introduction / Gallery / Professor / Episode Javascript, HTML
![Page 6: 문서의 제목 나눔고딕B, 54ptdigital_graduation.sdu.ac.kr/2013/project/pdf/17.pdf사례조사 2008~2012 졸전사이트 확인 타학교 온라인 졸전사이트 분석 예술](https://reader034.vdocuments.net/reader034/viewer/2022042312/5edab90ada2ba853470debc4/html5/thumbnails/6.jpg)
현황(사례조사) 타학교 온라인 졸업작품 전시 사이트 장단점 분석
홍익대학교 디지털미디어디자인 졸업작품전 2012 (http://hongikdmd.com/meme/)
6 / 18
2. 사례조사
장점
• 반응형 웹(구축성)
• 작품 표출 및 설명(사용성)
• 심미성
단점
• 접근성(사용성) 미비
• 자바스크립트에러(구축성)
![Page 7: 문서의 제목 나눔고딕B, 54ptdigital_graduation.sdu.ac.kr/2013/project/pdf/17.pdf사례조사 2008~2012 졸전사이트 확인 타학교 온라인 졸전사이트 분석 예술](https://reader034.vdocuments.net/reader034/viewer/2022042312/5edab90ada2ba853470debc4/html5/thumbnails/7.jpg)
현황(사례조사) 타학교 온라인 졸업작품 전시 사이트 장단점 분석
국민대학교 시각디자인학과 2012 졸업작품전(http://www.kmuvcd.com)
7 / 18
2. 사례조사
분석
• 정보구조가 너무 단순하다
• 작품에 대한 설명이 너무 간단하다.
• 인터랙션에 대한 고려가 없다
![Page 8: 문서의 제목 나눔고딕B, 54ptdigital_graduation.sdu.ac.kr/2013/project/pdf/17.pdf사례조사 2008~2012 졸전사이트 확인 타학교 온라인 졸전사이트 분석 예술](https://reader034.vdocuments.net/reader034/viewer/2022042312/5edab90ada2ba853470debc4/html5/thumbnails/8.jpg)
현황(사례조사) 갤러리 작품 리스트 및 인터랙션 벤치마킹
8 / 18
2. 사례조사
마우스롤오버시 인터랙션
![Page 9: 문서의 제목 나눔고딕B, 54ptdigital_graduation.sdu.ac.kr/2013/project/pdf/17.pdf사례조사 2008~2012 졸전사이트 확인 타학교 온라인 졸전사이트 분석 예술](https://reader034.vdocuments.net/reader034/viewer/2022042312/5edab90ada2ba853470debc4/html5/thumbnails/9.jpg)
현황(사례조사) 갤러리 작품 리스트 및 인터랙션 벤치마킹
9 / 18
2. 사례조사
마우스롤오버시 인터랙션
![Page 10: 문서의 제목 나눔고딕B, 54ptdigital_graduation.sdu.ac.kr/2013/project/pdf/17.pdf사례조사 2008~2012 졸전사이트 확인 타학교 온라인 졸전사이트 분석 예술](https://reader034.vdocuments.net/reader034/viewer/2022042312/5edab90ada2ba853470debc4/html5/thumbnails/10.jpg)
내용 및 범위 정보구조(Information Architecture)
10 / 18
3. 졸업작품 소개
Gallery Episode Introduction
• 지난졸업작품 • 학과홈페이지 • 학교홈페이지
•졸업작품전 소개 •인사말 •학과소개
•작품소개 •Episode 사진 •Episode 동영상
2013 SDU 디지털디자인학과 졸업작품 전시 웹사이트
![Page 11: 문서의 제목 나눔고딕B, 54ptdigital_graduation.sdu.ac.kr/2013/project/pdf/17.pdf사례조사 2008~2012 졸전사이트 확인 타학교 온라인 졸전사이트 분석 예술](https://reader034.vdocuments.net/reader034/viewer/2022042312/5edab90ada2ba853470debc4/html5/thumbnails/11.jpg)
11 / 18
3. 졸업작품소개 - 시안 #1
![Page 12: 문서의 제목 나눔고딕B, 54ptdigital_graduation.sdu.ac.kr/2013/project/pdf/17.pdf사례조사 2008~2012 졸전사이트 확인 타학교 온라인 졸전사이트 분석 예술](https://reader034.vdocuments.net/reader034/viewer/2022042312/5edab90ada2ba853470debc4/html5/thumbnails/12.jpg)
12 / 18
3. 졸업작품소개 - 시안 #2(채택)
![Page 13: 문서의 제목 나눔고딕B, 54ptdigital_graduation.sdu.ac.kr/2013/project/pdf/17.pdf사례조사 2008~2012 졸전사이트 확인 타학교 온라인 졸전사이트 분석 예술](https://reader034.vdocuments.net/reader034/viewer/2022042312/5edab90ada2ba853470debc4/html5/thumbnails/13.jpg)
13 / 18
3. 졸업작품소개 - 시안 • 작품리스트를 정형적으로 표현
• 작품배열순서는 랜덤하게 표출
• 마우스롤오버 인터랙션 – 선택된 작품은 높이 혹은 너비가 넓어지면서 작가정보 혹은 작품설명 추가 표출
• 작품리스트를 비정형적으로 표현
• 작품배열순서는 랜덤하게 표출
• 마우스롤오버 인터랙션 – ①선택된 오브젝트만 color 유지하고 나머지는 작품은 흑백으로
• ② 작품리스트가 마우스를 움직일 떄 동적인 움직임 표현
![Page 14: 문서의 제목 나눔고딕B, 54ptdigital_graduation.sdu.ac.kr/2013/project/pdf/17.pdf사례조사 2008~2012 졸전사이트 확인 타학교 온라인 졸전사이트 분석 예술](https://reader034.vdocuments.net/reader034/viewer/2022042312/5edab90ada2ba853470debc4/html5/thumbnails/14.jpg)
14 / 18
3. 졸업작품소개 - 메인
• 자유로움을 표현하기 위해 비정형 레이아웃을 선택
• Simple한 정보 구조 설계
• Interactive Animation 기법 채용
![Page 15: 문서의 제목 나눔고딕B, 54ptdigital_graduation.sdu.ac.kr/2013/project/pdf/17.pdf사례조사 2008~2012 졸전사이트 확인 타학교 온라인 졸전사이트 분석 예술](https://reader034.vdocuments.net/reader034/viewer/2022042312/5edab90ada2ba853470debc4/html5/thumbnails/15.jpg)
15 / 18
3. 졸업작품소개 - Episode • 메뉴 접기 기능
![Page 16: 문서의 제목 나눔고딕B, 54ptdigital_graduation.sdu.ac.kr/2013/project/pdf/17.pdf사례조사 2008~2012 졸전사이트 확인 타학교 온라인 졸전사이트 분석 예술](https://reader034.vdocuments.net/reader034/viewer/2022042312/5edab90ada2ba853470debc4/html5/thumbnails/16.jpg)
16 / 18
3. 졸업작품소개 - Introduction
![Page 17: 문서의 제목 나눔고딕B, 54ptdigital_graduation.sdu.ac.kr/2013/project/pdf/17.pdf사례조사 2008~2012 졸전사이트 확인 타학교 온라인 졸전사이트 분석 예술](https://reader034.vdocuments.net/reader034/viewer/2022042312/5edab90ada2ba853470debc4/html5/thumbnails/17.jpg)
17 / 18
3. 졸업작품소개 – 졸업작품전 로고 제작
• 학교로고와 아이덴티티 통일시키고
• 학과 색인 오렌지 색 채택하여
• 로고와 어플리케이션 제작
![Page 18: 문서의 제목 나눔고딕B, 54ptdigital_graduation.sdu.ac.kr/2013/project/pdf/17.pdf사례조사 2008~2012 졸전사이트 확인 타학교 온라인 졸전사이트 분석 예술](https://reader034.vdocuments.net/reader034/viewer/2022042312/5edab90ada2ba853470debc4/html5/thumbnails/18.jpg)
18 / 18
4. 졸업작품을 마치며
극도로 양극화되고 있는 사회 프레임 한편으론 통섭과 융합의 세상 그 한가운데 Core로서 Digital Design이 있다. 우리는 그 전쟁터의 핵심 전사이다. 그러한 자부심과 함께 우리 스스로 각자가 생산 완결 구조를 갖추었으면 좋겠다는 바람이 있다. 열정으로 독려하고 지도해 주신 김미연교수님과 졸업전시회에 함께 참여한 고생한 학우님들께 감사를 드립니다.
![Page 19: 문서의 제목 나눔고딕B, 54ptdigital_graduation.sdu.ac.kr/2013/project/pdf/17.pdf사례조사 2008~2012 졸전사이트 확인 타학교 온라인 졸전사이트 분석 예술](https://reader034.vdocuments.net/reader034/viewer/2022042312/5edab90ada2ba853470debc4/html5/thumbnails/19.jpg)
감사합니다