project design 어린이 디자인 놀이터...

8
DINOL 11 PROJECT DESIGN 어린이 디자인 놀이터 디놀(DINOL) PROJECT DESIGN 10

Upload: others

Post on 18-Jan-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: PROJECT DESIGN 어린이 디자인 놀이터 디놀(DINOL)hongsi.x-y.net/2016_ui1/lje_c/pdf/02dinol.pdf · 편리한 ui / ux 심미성있는 디자인 양질의 컨텐츠 planning

DINOL

11

PROJECT DESIGN

어린이 디자인 놀이터디놀(DINOL)

PROJECT DESIGN

10

Page 2: PROJECT DESIGN 어린이 디자인 놀이터 디놀(DINOL)hongsi.x-y.net/2016_ui1/lje_c/pdf/02dinol.pdf · 편리한 ui / ux 심미성있는 디자인 양질의 컨텐츠 planning

PROJECT DESIGN

Category

Program

Term

WEB DESIGN

PHOTOSHOP / ILLUST / HTML&CSS / JQUERY

2016.06.20 ~ 2016.07.25

BRANDING디놀은 ‘디자인 놀이터’의 약자로 미취학 아동부터 초등학생, 청소년까지 대한민국의 파릇파릇한 새싹들의 꿈과 호기심, 상상력을 키우기 위해 설립된 복합 놀이공간입니다. 디놀에서는 전시물과의 직접적인 상호작용을 통해 아이들이 스스로 배우며 알아가는 재미를 느낄 수 있도록 고안하였습니다. 또한 디놀에서는 디자인을 직접적으로 경험할 수 있는 다양한 체험의 기회를 제공하며, 아이들의 창의력과 감성 발달에 초점을 두고 있습니다. 모두가 행복한 공간 디놀로 놀러오세요!

MISSION창업하고 싶은 분야의 브랜드 기존 동종업계와 차별화 전략 수익 창출이 가능한 창업 아이템

어린이 디자인 놀이터 디놀

12 13

PROJECT DESIGN DINOL

Page 3: PROJECT DESIGN 어린이 디자인 놀이터 디놀(DINOL)hongsi.x-y.net/2016_ui1/lje_c/pdf/02dinol.pdf · 편리한 ui / ux 심미성있는 디자인 양질의 컨텐츠 planning

BACKGROUND

행복한 아이들이 행복한 미래를 만든다.

몇 년간 디자인을 공부하면서 ‘디자인’이란 삶을 윤택하게 만드는 기술이라 배웠습니다. 어렸을 적부터 미술과 디자인을 접할 수 있는 공간을 마련하여 다양한 체험활동을 접할 수 있도록 도와준다면 우리나라의 미래를 짊어지고 갈 어린이들이 좀 더 밝고 행복한 창의적인 인재로 자라나게 될 것이고, 나아가 ‘행복한 사회가 되지 않을까?’ 라는 생각을 하게 되었습니다. 이러한 발상에서부터 어린이 디자인 놀이터 디놀이 탄생하였습니다.

PURPOSE

어린이디자인놀이터 디놀의 목적은?

디놀에서는 어린이들이 쉽고 다양한 놀이체험을 통하여 자연스럽게 디자인을 접할 수 있도록 도움을 줍니다. 이러한 활동을 통해 아이들이 성장에 필요한 협동심, 배려심 등의 능력을 발달시키는 것이 디놀의 궁극적 목표이고, 디자인·미술 전문가와 함께하는 수업과 특강을 마련하여 미래 디자인 산업을 이끌어 갈 인재를 육성하며, 디자인 관련 전시 및 다양한 도서 제공으로 어린이들의 상상력과 창의력을 증진시키는데 목적을 두고 있습니다.

TARGET

디놀의 코어타겟, 서브타겟은?

어린이 디자인 놀이터 디놀의 코어타겟은 체험활동을 즐기는 어린이, 그리고 어린이들의 학부모님들과 선생님들로 선정하였고 서브타겟은 디자인 체험활동에 관심이 있는 누구나로 폭넓게 선정하였습니다.

STRENGTH & WEAKNESS

강점친환경적인 재료로 안전하게 설계되었다.감성교육을 통해 정서발달에 도움을 준다.SNS를 활용하여 고객과 소통을 할 수 있다.다양한 체험활동, 행사를 활발히 진행한다.

약점타사보다 입장료가 비싸다.도슨트를 제공하고 있지 않다.타겟층이 어린이, 청소년으로 한정되어있다.체험을 추가하면 추가비용이 발생한다.

NEEDS & WANTS

고객이 원하는 디자인은 무엇일까?

디놀의 강점과 약점은?

고객이 필요로 하는 정보 순으로 우선순위를 매겨 컨텐츠를 구성하고, 익숙한 상단 네비게이션 레이아웃을 이용하여 혼란이 오지 않도록 구상하려고 합니다. 또, 타겟에 맞는 심미성 있는 디자인으로 고객의 눈길을 사로잡으며 양질의 컨텐츠로 고객들이 원하는 정보들을 얻을 수 있도록 기획하려고 합니다.

ANLYSIS

타사의 약점과 우수사의 강점

타사와 우수사를 분석하여 타사의 약점을 디놀의 강점으로 가져와 기획단에 반영하고, 우수사의 심미적인 강점을 디놀의 디자인의 강점 및 우위성 및 차별화 전략을 도출하였습니다.

타사 - 디키빌광주 어린이 디자인 체험관 디키 빌은 디놀과 유사한 컨셉의 체험 공간으로, 메인에서 예약가능한 날짜가 노출되어 사용자들이 좀 더 쉽고 편리하게 이용할 수 있도 록 기획되습니다. 하지만 사이트 디자인이 올드한 점과 실내 활동 위주의 체험 컨텐츠, 그리고 후기 및 Q&A가 활성화되지 않는 것이 약점이라고 생각합니다.

편리한 UI / UX 심미성있는 디자인 양질의 컨텐츠

PLANNING

PLANNING

CORE TARGET

체험활동을 즐기는 어린이와어린이들의 학부모, 선생님

SUB TARGET

디자인 체험활동에 관심이 있는 누구나

14 15

PROJECT DESIGN DINOL

타사 - 서울상상나라서울상상나라는 서울시가 어린이 들을 위해 건립한 복합체험문화 시설입니다. 강점으로는 다양한 주제의 체험 전시에 특화되었다 는점과, 슬라이드 제이쿼리를 통 해 여러 체험 활동을 노출시킨 점 이고, 약점으로는 메인에 예약버 튼 홍보 동영상을 볼 수 있는 공 간이 있지만 작게 배치되어 주목 성 이 떨어지는 점이 있습니다.

우수사 - 고양어린이박물관고양어린이박물관은 다양한 체 험이 준비되어있는 박물관입니 다. 강점으로는 어린이와 어울리 는 룩앤필로 디자인 되어 주목성 이 높다는 점과, 현장 예약현황이 노출이 되고있다는 점 이지만 전 체적으로 곡선의 굴곡이 너무 심 하여 여백이 넓게 사용 되어 퀄리 티가 떨어져 보이는 느낌을 준다 는 것이 약점입니다.

Page 4: PROJECT DESIGN 어린이 디자인 놀이터 디놀(DINOL)hongsi.x-y.net/2016_ui1/lje_c/pdf/02dinol.pdf · 편리한 ui / ux 심미성있는 디자인 양질의 컨텐츠 planning

16 17

PROJECT DESIGN DINOL

디놀에서 놀자!어린이 체험 활동 사이트로서 메인비쥬얼만 보아도 아이들이 연상되고 고객들이 흥미를 느낄 수 있게끔 유도하였고, 상단을 하늘에 있는 놀이 터로 표현하여 상상력을 풍부하게 만들어주는 디놀의 느낌을 전달하게 끔 노력하였습니다. 컨셉은 ‘디놀에서 놀자!’로 정하여, 아이들을 위한 신나는 공간이라는 이미지를 전달하였습니다.

일반적으로 많이 사용하는 상단 네비게이션 레이아웃을 사용하여 사 용자들이 조금 더 익숙하고 편리하게 이용할 수 있도록 작업하였고, 경제성을 고려하여 여러 컨텐츠 들을 한 눈에 볼 수 있는 일반형 인덱스 방식의 레이아웃 을 사용하였으며, 고객들이 가장 궁금해 하는 체험 관련 컨텐츠, 예약 관련 컨텐츠, 공지사항, 리뷰, SNS(페이스북) 정보 등을 노출시켜 컨텐츠 를 구성하였습니다.

C O N C E P T

브라이트한 컬러주조색은 편안함과 친근함을 표현하는 민트색과 귀여움과 희망, 명랑함 을 나타내는 노란색을 이용하였고, 보조 컬러로는 평화와 안정을 나타내 는 초록색과 갈색을 사용하여 디놀이 가지고있는 특징을 상징화 해 주었 습니다.

LOOK&FEEL을 고려한 폰트폰트는 둥글고 귀여운 느낌이 드는 야놀자 야체를 사용하여 사이트의 전반적인 분위기와 어우러지도록 선정하였으며, 컨텐츠의 내용은 가독 성이 높은 고딕체 중 둥근느낌을 가지고 있는 나눔 고딕체를 사용하 였습니다.

C O L O R & F O N T

고객의 편의성을 고려한 레이아웃

L A Y O U T

디놀은 아이들이 주 타겟이 되는 사이트이기 때문에 아이들이 좋아하는 고무찰흙 느낌의 입체감 있는 캐릭터 표현기법과 아이들과 어울리는 밝은 컬러를 사용하여 흥미를 유발하고자 하였습니다. 또, 고객이 원하는 정보 를 얻음에 불편을 겪지 않도록 전략을 세워 메인페이지에 디놀 이용에 관련된 동영상을 배치하여 많은 양의 정보를 시각적으로 쉽게 얻을 수 있도록 기획하였습니다.

입체감있는 일러스트 표현기법과 동영상

S T R A T E G Y

어린이디자인놀이터 디놀어린이디자인놀이터 디놀

MINT편안함

#20A398

GREEN평화

#085E04

YELLOW희망

#FEE852

BROWN안정

#432E19

Page 5: PROJECT DESIGN 어린이 디자인 놀이터 디놀(DINOL)hongsi.x-y.net/2016_ui1/lje_c/pdf/02dinol.pdf · 편리한 ui / ux 심미성있는 디자인 양질의 컨텐츠 planning

메인페이지MAIN PAGE

18 19

PROJECT DESIGN MAIN PAGE

▶ 러프스케치

사이트에 접속했을 때 처음으로 보이는 메인비쥬얼에서는 디놀에서 현재 진행 중인 프로그램 정보를 노출해 버튼을 통해 바로 예약할 수 있도록 구성하여 경제성과 이윤창출에 초점을 맞추었습니다. 2단에는 관람예약 에 관련된 배너들과 간략한 관람정보와 이용안내, 자주 하는 질문을 배치하여 고객이 편리하게 예약 가능일을 볼 수 있도록 구성하였으며, 3단에는 디놀영상 을 볼 수 있는 공간을 마련 해 주었습니다. 이 디놀 영상에서는 디놀에 대한 전반적인 설명과 이용 방법, 디놀 시설의 안전성 등... 다양한 컨텐츠를 한눈에 편하게 볼 수 있도록 구성하였습니다. 4단에서는 디놀의 공지사항 및 체험후기, 페이스북을 볼 수 있는 디놀소식을 넣어 새로운 소식을 접할 수 있도록 하였고, 마지막으로 풋터영역에는 로고와 이용약관, 개인정보취급방침, 디놀 주소 및 전화번호, SNS 아이콘 등을 배치하였습니다.

Page 6: PROJECT DESIGN 어린이 디자인 놀이터 디놀(DINOL)hongsi.x-y.net/2016_ui1/lje_c/pdf/02dinol.pdf · 편리한 ui / ux 심미성있는 디자인 양질의 컨텐츠 planning

PLANNING서브페이지서브페이지는 총 4페이지로, 디놀소개 페이지, 개인관람예약 페이지, 자주하는질문 및 FAQ 페이지, 사이트맵 페이지를 작업하였습니다. 서브페이지 상단은 메인페이지 상단 에서 보여졌던 느낌을 가져와 통일성을 주었고, 요소들의 배치를 다르게 하여 변화가 느껴지도록 하였습니다. 첫번째, 디놀 소개 페이지에서는 CEO인사말과 디놀 핵심가 치, 디놀영상을 살펴볼 수 있습니다.

사이트맵 페이지에서는 어린이 디자인 놀이터 디놀 사이 트의 전체적인 메뉴들을 살펴볼 수 있으며 각각의 메뉴를 클릭하면 원하는 페이지로 바로 이동할 수 있도록 하였 습니다.

두번째, 개인관람예약 페이지에서는 개인관람을 원하는 고객 님들의 대기시간을 줄이기 위하여 날짜와 시간 등을 선택하여 예약할 수 있도록 제작한 페이지입니다. 예약과 결제에 앞서 유의사항을 먼저 윗단에 배치하여 잘 숙지하고 예매할 수 있도록 하였고, 예약 인원 선택 전 입장료 감면 대상 리스트를 넣어주어 할인정보를 제공하였습니다. 또 서브페이지 전체 에 서 퀵메뉴를 이용하여 빠른 예매를 할 수 있고, TOP버튼을 이 용하여 상단으로 빠르게 올라갈 수 있도록 디자인하였습니다.

자주하는질문과 상담게시판을 한 페이지로 묶어주어 고 객들이 먼저 자신이 하고 싶은 질문을 먼저 검색해본 후, 만약 원하는 FAQ가 없으면 상담게시판에 상담을 바로 남길 수 있도록 정보 설계를 하였습니다.

SUB PAGE

20 21

SUB PAGE

Page 7: PROJECT DESIGN 어린이 디자인 놀이터 디놀(DINOL)hongsi.x-y.net/2016_ui1/lje_c/pdf/02dinol.pdf · 편리한 ui / ux 심미성있는 디자인 양질의 컨텐츠 planning

H T

C

&

S

M L

S

HTML & CSS 디자인 작업이 끝난 후 코딩작업에 들어갔습니다. 처음 해보는 사이트 코딩이라 구조를 이해하는데 쉽지 않았지만, 제가 입력한 코드들이 구현되는걸 보니 신기하기도 하고 보람이 많이 느껴지는 작업이 였습니다.

JQUERY 제이쿼리는 디놀에 접속하자마자 바로 보이는 귀여 운 캐릭터들이 돋보일 수 있는 제이쿼리를 사용하여 동적 효과를 주어 사이트의 분위기를 살려주었으며, 메인 슬라이드에도 자동롤링 효과를 주어 고객들이 여러행사에 대한 정보를 볼 수 있도록 구현하였습 니다.

22 23

PROJECT DESIGN CORDING

Page 8: PROJECT DESIGN 어린이 디자인 놀이터 디놀(DINOL)hongsi.x-y.net/2016_ui1/lje_c/pdf/02dinol.pdf · 편리한 ui / ux 심미성있는 디자인 양질의 컨텐츠 planning

브랜드 이미지 상승기업 이미지를 고려한

디자인으로 브랜드 이미지 상승타겟층을 고려한 전략적인

메인페이지 설계 및 컨텐츠 제공놀이를 통한 즐거운

체험으로 통합적 교육을 지향

이윤 창출 새로운 교육 문화 제시

PREDICTION

새로운 문화 공간 창출모든 시민들에게 열려있는 문화 공간으로서 신선한

소통의 매개체로 자리매김

성장 발달에 적합한 전시와 프로그램으로 인재 육성 기여

행복하게 자란 아이들이 성장하여 올바른 선진사회 구현

미래 인재 육성 기여 아름다운 사회구현

결과예측

DINOL

START

FINISH

발상

기획

수정

디자인

코딩

THINKING

발상해보고서지금까지는 팀 기획으로 디자인에 들어 갔는 데 이번에는 나 혼자 기획을 하고 디자인을 해야하는 미션이 주어졌다. 어떤 창업을 하는 게 좋을까 고민을 해봤는데, 내가 원하는 삶에 대한 내용을 담을 수 있는 아이템을 선정 하여 구체화 시키도록 해야겠고 생각했다.

DESIGNING

디자인해보고서내가 기획해서 내 의도대로 작업을 하는 특색 메인 디자인이였기 때문에, 작업을 하는 내내 즐거운 마음으로 작업에 임할 수 있었고, 그 어떤 작품보다 애착이 갔다. 메인비쥬얼 작업 을 할 때 공간감이 잘 안나고 애매하게 연출 되어서 고민이 많이 생겼었는데, 선생님의 디 렉션과 동기들의 브레인 스토밍을 받은게 많은 도움이 되었다. 너무 감사했고, 나도 줄 수 있는 만큼 도움을 많이 줘야겠다!

CORDING

코딩해보고서처음으로 해보는 웹표준! 우여곡절 끝에 사이 트가 웹에서 구현되게 되었다. 제이 쿼리가 날 힘들게 했다. 하지만 코드를 하나씩 하나씩 입력할수록 구현되는 모습을 보니 굉장히 보람이 느껴졌다. 코딩을 하면서 느낀점은 디 자이너도 어느정도 기본 코딩은 알고 있어야 퍼블리셔와 협업을 할때 혼선을 일으키지 않을 거라는 생각이 들었다. 어렵지만 차근차 근 꼼꼼하게 익혀보아야겠다.

좋은 사회가 되기 위해서는 어렸을때 부터 보고 듣고 경험한 것들이 참 중요 하다는 생각 이 문득 들었다. 그래서 아이들을 위한 공간을 만들어보자 했고, 내가 디자이너 이기도 하고 디자인, 미술 분야가 정서 발달에 큰 도움을 주기 때문에 '어린이 디자인 놀이터'라는 주제 로 행복하고 창의력 높은 아이들로 자라날 수 있는 공간을 설립하고 디자인하는 기획에 들 어갔다. 고객을 위한 양질의 컨텐츠 설계를 통해 정보 제공과 예약으로 이어질 수 있도록 디자인 하는게 목표이다. 표현 기법은 지금 까지 내가 써보지 않았던 주목도 높은 3D 일러 스트 표현 기법에 도전 해 보려고 한다. 디자인 이 기획한 대로 목적성에 맞게 잘 나왔으면 정말 좋겠고, 최선을 다해서 임하겠다는 마 음으로 노력해야겠다.

PLANNING

기획해보고서

디자인은 수정이다! 라는 말이 정말 뼈저 리게 느껴졌다. 목업부터 5차 디자인까지 해온걸 보니 ‘정말 많이 발전되었구나’ 라는 생각이 들 었다. 매 차시마다 들었던 디렉션은 크기 대비 와 여백 조절이였다. 디자인을 하면서 항상 유 의해야 생각하였다.

DEVELOPING

수정해보고서

FINISH

마무리해보고서멋진 디자이너가 되어서 꼭! 20년, 30년 후 에는 내가 처음으로 기획한 어린이 디자인 놀 이터 디놀을 창업해야겠다는 목표가 생겼다.

24 25

PROJECT DESIGN DINOL