웨더오브뮤직

사용성평가에서 컨텐츠 뿐만이 아니라. 인터페이스에 대한 이야기도 수렴

단색으로 갔기 때문에 스킨 색상 및 테마 등등을 언급한것이 아닐까?

대화창에서 색상이 너무 강한 감이 있음. 글씨는 어두운 색으로 했으면 어떠했을지?

음악 저작권 표시. 상업적 음원은 사용하지 말고. 다시 영상 음악 작업할것. 



Weathermusic - 송보미, 최솔 from 최솔 on Vimeo.



티톡

김지혜, 김혜진, 윤혜지

이미지를 겹쳐서 인터페이스 디자인을 하는 경우 가독성에 주의 할것 

배경이 밝은 화면에서 글씨를 흰색으로 쓸때 주의 

사진을 이용하는 경우 같은 스타일링의 이미지로 일관성에 주의하고, 투명도를 조절할것 

실제 데이터를 부어봐야 사용성에 대한 정확한 부분을 관찰할수 있을것 같음. 



TEATALK from Hyejin Kim on Vimeo.


데코

김유미, 이서진, 황지영 

웹이라는 특성을 살리는데 고민이 많았을것이라고봄

기본적인 웹의 기술적인 특성과 인터페이스가 맞물려서 표현되는 부분을 앞으로도 공부하여 적용하는데 노력하엿으면 함

네비게이션 메뉴 사이의 검정 라인을 흐리게... 복잡성을 증가시킴 

팔로워 팔로잉의 썸네일도 사람 썸네일로... 이미지도 완성된 화면에 상당한 영향을 줄수 잇음 

웹분야도 지속적 발전 가능성이 있음 

시연 영상 중에 설명하는 캡션이 좀더 들어가면 좋을것 같음. 



DECO1 from kim yu mi on Vimeo.


앤분의일 플레이 앤플

문지영, 이지현 

사용성 리서치를 잘햇고, 그만큼 좀더 인터페이스에서 잘 적용되게 좀더 다양하게 접근했었으면 하는 아쉬움이 있음 

인터페이스 개발에 많은 노력을 기울인 만큼 완성도가 높음 

노랑과 흰색의 박스가 단조로운 감이 잇음. 특희 흰색이 많아지면 드래프트한 느낌이 강해짐. 향후에는 인터페이스를 좀더 디자인적으로 흥미로워 보이게 하는 방법에 대해서 좀더 연구할것 

시연영상의 흐름을 잘잡음. 영상에서 화면 인터페이스를 더 크게 표현하도록 수정요망 


팝 프로토타입 

https://popapp.in/projects/539c6ede065ca9b024f51365/preview


앤분의일플레이 컨셉영상 from lee jihyun on Vimeo.


대준이

조현영, 김다솜, 이지은

사용성 테스트 결과에 대해서 그림에서 어떻게 개선되었는지  프리젠테이션에서 보여줄것 

게시물 작성 버튼이 상단보다는 아이콘으로 눈에 띄는 곳으로 가야 했던것은 아닌지. 

검색창 (사람, 학교 검색시 ) 검색창 채도가 떨어지게 디자인된것 수정

화면 트렌지션을 잘 썼음. 멘토와 멘티의 아이콘을 넣어서 캡션이나 호면부부넹 추가 했으면 좀더 알아보기 쉬웠을것 같음

가장 현재 개발된 앱처럼 잘보이게 완성도 있게 만든팀 


interactive design final from Kim DaSom on Vimeo.


우리

권여울, 한지영, 윤나련

하단의 메뉴 아이콘들은 솔리드한 화면으로 가도되지 않았을까? 복잡해보이는...

환경설정 메뉴에서도 가독성의 문제...

영상의 음악이 연관성이 있다해도... 저작권 문제를 생각해볼것 

영상의 캡션을 한글로 쓰는것은? 타이포가 얇아서 가독성이 떨어짐. 


-> 영상 올리시오. 


수지

최수영, 민영빈

로고디자인에 신경을 많이 쓰려고 노력

인터페이스 디자인이 많이 졸아졌으나 주황색 하일라이트가 좀더 채도가 높은 주황으로 갈것 노랑?

시연 영상 흐름 좋았음. 끝에 사용한 영상 저작권 표시 할것  씨씨마크 

화면 트렌지션을 좀더 다양하게 갔으면 어떻까 함 




-> 영상 올리시오. 

방방곡곡
허주연, 신예지
검색 아이콘이 메뉴바에 꼭 들어가지 않아도 될듯
텍스트를 수정하면서 정리정돈이 많이 되었음 
아직도 지도에서 아래 부분에 공간이 많이 남는데 줌인줌아웃을 고려하여 디자이하면 좋을것 같음 
시연영상의 음성이 재미있음 좀더 음성나올때 화면의 움직임이나 캡션을 같이 처리하면 좋을것 같음 
화면의 크기가 너무 작은감이 있음 
-> 영상 올리시오. 

한지붕
이유지, 이해인, 천지원
핑크 말풍선은 회색으로 할것 
주황색도 나쁘지는 않으나 일부 무채색을 써서 해도 좋을듯. 
영상의 흐름은 좋은데, 손가락이 왼손가락이여서 어색함이 있음 
손가락은 일부만 넣고, 클릭원으로 표시해도 좋을듯. 캠셥에 쓰이는 폰트를 좀더 고려. 

[출처] 14|작성자 



posted by jisunlee

6월10일 검사 맡은 순서로 발표하기 

수업시작 5분전 영상 , 슬라이드 화일 

아래 내용을 담은 발표 문서를  slideshare.net에 올리기 

경쟁사 분석

사용자 리서치

퍼소나

시나리오

과업모델

사용자여정

와이어프레임

프로토타입 사용성 테스트 결과

비쥬얼 디자인

2차 사용성 테스트 결과 

앱 컨셉 영상 스토리보드 및 완성 영상 화면 샷


컨셉영상은 vimeo.com에 올리고 위의 발표 문서에 URL 포함


posted by jisunlee

여기에 댓글로 달것 



비쥬얼 디자인 컨펌 받아야 하는 팀 6월 6일까지 컨펌 받을것 . 여기에 댓글로 달고. 메일로도 줄것 


완료된 팀은 사용성 테스트 6명 진행하고 결과를 가져올것. 

프로토타입 영상 스토리보드 완성하고 영상 프로덕션에 들어갈것 


기말에는 아래의 두개의 발표화일과 영상 URL을 제출하면 됩니다. 


아래 내용을 담은 발표 문서를  slideshare.net에 올리기 

경쟁사 분석

사용자 리서치

퍼소나

시나리오

과업모델

사용자여정

와이어프레임

프로토타입 사용성 테스트 결과

비쥬얼 디자인

2차 사용성 테스트 결과 

앱 컨셉 영상 스토리보드 및 완성 영상 화면 샷


컨셉영상은 vimeo.com에 올리고 위의 발표 문서에 URL 포함

컨셉영상 

posted by jisunlee

여기에 댓글 다세요. 

posted by jisunlee

디자인도 표절이 있습니다.

절대 그래도 베껴서 디자인 과제를 제출하지 말것!

 

http://www.pinterest.com/pin/505177283174376089/

 

Gonna tattoo it on my ankle with a little girl sitting in the bottom while reading a book!

posted by jisunlee

시안 다시 작업해야 하는 조는 금요일까지 검사 맡기 

여기에도 올리고 메일로 주시오. 


시안 작업이 통과된 팀은 다음주까지 UI Patterns gallery 참고해서... 

반드시 꼭 UI 의 완성도를 높이 시각디자인을 가져 올것 


대준이네는 프로토타입 테스트를 실시할것. 기존의 페이퍼프로토타이핑 스크립트 이용

디자인의 디테일의 피드백을 받는데 주력할것 


참고: 

아이폰 UI

http://inspired-ui.com/

http://www.pttrns.com/ios7


안드로이드 UI

http://android.inspired-ui.com/

http://www.android-app-patterns.com/


칼라를 선택해서 볼수 있음 

http://www.awwwards.com/


http://www.pinterest.com/awwwardscom/web-design-inspiration-ui-ux/


http://www.creativebloq.com/web-design/examples-ui-design-7133429


전체 모든 팀은 다음주까지 어떻게 프로토타입 영상을 만들지 간단한 스토리보드 스케치해서 올릴것 

참고 : 

http://www.pinterest.com/sharakarasic/best-app-demo-videos/



posted by jisunlee

와이어프레임 수정, 


비쥬얼 디자인 선택한것 전체 완성. 

posted by jisunlee

http://jmnote.com/wiki/스마트폰_해상도,_화면비율


http://www.codecademy.com/tracks/web


각자 A, B, C 디자인 시안, 메인과 서브 디자인 올릴것. 

개인 이름과 팀 이름 적을것 


=>>> 팀별로 사용자들에게 어떤 디자인이 좋은지 물어보고 시안을 정할것. 



디자인 퀄리티를 높이는데 참고. 


http://www.webdesignerdepot.com/2013/07/20-beautifully-designed-smartphone-apps/


http://www.behance.net/search?field=132


https://play.google.com/store/apps/collection/promotion_3000235_beautiful_apps


http://www.pastemagazine.com/blogs/lists/2014/03/top-10-most-beautifully-designed-apps.html


http://thenextweb.com/apps/2013/11/04/30-beautifully-designed-android-apps/



http://www.businessinsider.com/the-12-best-looking-apps-on-android-2013-8?op=1


posted by jisunlee

사용성테스트 6명 결과 내용정리

와이어프레임 완성

비쥬얼 디자인 완성 (메인, 서브)

 

여기에 댓글로 달아서 제출하세요.

posted by jisunlee
여기에 사용성 스크립트와

화면 프로토타입 개발한것 댓글로 달아서 제출해 주세요. 





posted by jisunlee

중간 발표에서 받은 코멘트를 보시고, 수정사항을 반영하기

와이어프레임 그려오기.

 

다 넣지 말고, 숙제로 수정된것과 새로 작성한거만 댓글로 제출할것

 

다음주에는 와이어 프레임 작성법에 대해서 배우겠습니다.

아울러 페이퍼 프로토타이핑에 대해서도 일부 설명을 듣고 스크립트를 써보는것으로 하겠습니다.

posted by jisunlee

디자인 준전문가 커뮤니티 DECO

김유미, 이서진, 황지영 

소스 공유, 포트폴리오 공유, 디자인 관련 사이트 정보 공유 

커뮤니티와 작품 소스 공유를 지향하는 사이트 

발표시 듣는 사람을 보고 발표할것 

화면만 보고 이야기 하지 말것 

정리하는데 시간이 많이 걸렸으나 진도는 많이 나간것 같음. 

사용자 리서치가 하나밖에 없으므로 좀더 정리할것 

포인트 제도와 상품권을 연결했는데... 상품권은 누가 왜? 금전적인 부분은 빼는 것으로. 

사용자 여정은 모든 페이지들을 연결해 본다고 생각하고  다시 작성 



우리나라 방방곡곡 - 전국 축제 알리미 어플 

허주연, 장은주, 신예지 

축제정보제공 및 커뮤니티 중심 

4번째 퍼소나를 주요 퍼소나로 표기 할것 

사용자여정에서 표시하는  페이지의 색상이 왜 틀린지에 대한 주석을 정할것 

단계별로 어떤 단계에 속하는지를 정리할것 

카카오톡 아이디는  API 공개를 하는지 확인해야 함 로그인하지 않고도 하는 방법은? 둘러보기?

내 주변 말고, 미리 검색하는 경우인 경우, 어떻게정보를 미리 검색할수 있는지? 


차를 이야기하다.  TeaTalk

김지혜, 김혜진, 윤혜지

차의 맛과 향, 주변 찻집, 효능, 찻집 정보 => 비슷한 내용끼리 정리 

사용자가 원하는 차를 검색하기. 

기능위주로 늘어놓는것이 의미 있을까? -> 자꾸, 콘텐츠를 나열하는 방식으로 가는것이 아닌지 우려됨

http://ipodart.net/1350

모바일 앱의 장점을 살린 서비스 개발이 되었으면 함  즉시성, 지역기반 등. 

아니면 지금 먹는 차에 대한 정보를 찾을때는 검색 키워드?


우리 - 감성힐링어플

권여울, 한지영, 윤나련

너에게, 나에게 레이블링이 모호하지 않은자? 

사용자 여정과 과업 흐름이 바뀌었음 

과업흐름은 좀더 단순하게 단계별 과업의 순서를 보여주는 방식으로 기술되어야 함 . 

템플릿을 다시한번 숙지할것 

페이퍼테스트에서 검증과정을 통해서 사용자가 기능을 제대로 이해하는지 확인하는것이 필요함. 


대준이 

김다솜, 이지은, 조현영

아이콘이 먼저 나오는 메뉴가 좋은지.... 최신정보. 

멘토 왜 이것을 할까 ? 

시나리오에서 화면을 상세하게 그리기는 하였으나 알아보기 힘듬. 

잘 알아볼수 있도록 수정 요망 



수지 - 물사용법 

민영빈, 최수영

영어로 갈건가? - 한글 

시나리오에 입력하는 화면도 나와야 함 

자신의 일 알람도? 그럴필요가? 주말 일어나는 시간?

시간마다 어떻게 알람을 설정? 

운동량, 음식섭취와 관련된 물의 섭취로 정리해야.. 

와이어프레임과 사용자 여정에 잘못 이해됨 



우리끼리 - 더치페이어플

문지영, 이지현

우리끼리 이름이 모호하지 않은지? 부제를 붙여야 할것 같음 

카카오톡 라인등과 초대 연계가 가능?

더치페이와 모임후기와 연계를 유기적으로 하려면?

특별한 상황인경우에 대한 복잡성이 증가하지 않도록. 

특정인을 금액을 기입하는 경우 나머지를 자동으로 나누어주는 기능 필요.  

연결된 플로어를 만들어줄것 - 사용자 여정 

달력이 좋은지 최근 모임의 리스트가 좋은지... 


웨더뮤직

최솔, 송보미 

시나리오에 상황에 대한 좀더 디테일한 그림설명 필요 

방안 앞부분은 사용자 여정에서 뺄것. 대신 좀더 자세히 만들것. 

 YouTube 활용가능 여부 조사. 

사용자 여정에서 마름모와 그렇지 않은 페이지를 구분하여 좀더 자세하게 작성할것 


한지붕 

이유진, 이해인, 천지원

가족 스케쥴 , 가족간의 소통 

사용자 여정은 모든 기능을 한번에 연결해서 전체적으로 정리할것 

따로 되는것보다는 전체적으로 기능이 유기적으로 연결되게 만들것 

전체 구성앱보다는 ..

우리가족 중심이되. 다른 가족도 볼수 있는건지?




posted by jisunlee

비번을 입력하여 볼수 있습니다.

 

task flow 와 user journey

 

https://www.slideshare.net/secret/97xHllZI8C2HYF

 

task flow 와 user journey 템플릿

https://www.slideshare.net/secret/o8iZst03YOEMJf

 

 

UI/UX 디자인 중간과제 발표 템플릿은 아래를 참고해 주시고. 

다음이 포함되어 있어야 합니다. 


- 리서치 

- 퍼소나

- 시나리오

- 타스트 플로어 

- 와이어 프레임 



중간발표화일은 ppt나 pdf 화일로 slideshare.net에 올리고 그 임베디드를 가져다가 본인의 블로그에 붙이신뒤에  여기에 댓글로 해당 포스트의 URL을 달것! 
참고 예 : http://www.slideshare.net/rorymai/webdesign2-mobileweb

http://www.slideshare.net/slideshow/embed_code/20419902

* slideshare.net에 회원가입을 한후 ppt화일이나 pdf 화일을 업로드하면 위의 URL 처럼 보이고 여기서 슬라이드의 상단에 < > Embed를 눌러서 자신의 블로그에 삽입한뒤에 그 포스트 URL을 복사해서 여기에 댓글로 달면됨




 프리젠테이션 템플릿은 Design Research  by Brenda Laurel 책중 BJ FOGG가 만든 Conceptual Design Template에서 가져왔음

이책의 내용중 이에 해당하는것을 PDF로 첨부하니 좀더 자세한 내용을 보고 싶으신분은 아래의 PDF를 다운로드 받아서 읽어보기 바람



1. The Title Page
[Concept Name Here]
design by [your name here]
2009 spring 




2. The Overview
[Name of Project Here]

Persuasive Purpose
   -To [put design challenge summary here]

[put a visual image of your concept here]




3. User Description
-[info about your target user, perhaps with visual]




4. The Storyboard of User Experience
[Storyboard title here]




5. User Feedback
[User research results here, if any. It's great to include photos.]




6. The Summary or Ending
[your contact info]


위의 템플릿을 이용하여 프리젠테이션과 마지막 과제를 정리하여 제출하거나
아니면 위 템플릿의 모든 요소를 넣은것으로 자유롭게 구성하여 정리하여 제출하여도 무방
자신의 블로그에도 정리한 내용을 포스트할것

 

 

 

posted by jisunlee

6주차 과제를 공지합니다.

지난주에 미진했던 사용자 리서치와 동시에 퍼소나와 시나리오를 진행하여 오시면 됩니다.

퍼소나와 시나리오 템플릿은 아래에 있습니다.

http://visualcommunication.tistory.com/927

 

강의 내용은 여기에...  

http://visualcommunication.tistory.com/738

 

협업이니 만큼 중간에 서로의 의견을 잘 조율하여 좋은 방향으로 아이디어가 발전할수 있도록 미팅을 가지시기 바랍니다. 단순히 그룹과제를 할당해서만 진행하는 것은 서로에게 도움이 안됩니다.

디자인은 협업이 중요한 분야이므로, 협업의 과정또한 매우 중요합니다. 이점 주의하여 실행하시고, 보고서에 반영하시기 바랍니다.

다음주는 7주차를 진행하고. 8주차에는 중간발표가 있고 2시30분부터는 다음커뮤티케이션즈의 안정호 동문의 특강이 있을 예정입니다.

posted by jisunlee

팀별로 사용자 리서치 진행하고 발견점 정리해 오기

1. 대상 사용자를 정하고, 리쿠르트 한다.

2. 관찰방법 및 어떤 것을 발견할것인지 리스트한다.

3. 관찰하면서 영상, 사진, 노트 등의 기록을 남기고 정리한다.

4. 정리한 내용을 분석하여 발견점을 리스트한다.

 

한사람당 세명씩 진행하시고, 기록내용과 발견점을  팀이 함께 정리하여 파워포인트로 작성하고

슬라이드쉐어에 올린뒤에 여기에 댓글로 달아 제출합니다.

 

IDEO  쇼핑카트 리디자인 영상 

https://www.youtube.com/watch?v=M66ZU2PCIcM

 

 

참고 : IDEO Method Cards


http://www.ideo.com/work/method-cards/

http://visualcommunication.tistory.com/attachment/cfile29.uf@262491455241373A12AF58.pdf

 

4월 22일은 중간발표입니다. 중간 발표는 팀별로 5분 발표 5분 크리틱으로 진행하고,

이후 다음커뮤니케이션즈 안정호 동문의 특강이 있을 예정입니다.

posted by jisunlee

이번주에는 경쟁사분석을 과제로 진행하면 됩니다.

경쟁사 분석 템플릿은 여기에 있습니다.

 

일을 잘 나누어 진행하시기 바랍니다.

 

니즈 지원표 작성

화면 상세 분석 내용 작성

2X2 다이아그램 작성

http://visualcommunication.tistory.com/910

비번은 문자로 공지합니다.

 

 

위 내용을 팀원끼리 매주 돌아가면서 정리하고 여기에 댓글로 달면됩니다.

팀에서 진행한것이라도 개인블로그에 매주 과제 진행된것은 업데이트 하시기 바랍니다.

 

posted by jisunlee

아이디어 발표가 오늘 있었습니다.

발표한 아이디어로 가라고 했던사람, 좀더 고민하라했던사람, 다른거 하라 했던 사람

다들 아이디어 한번씩 더 고민해 오시기 바랍니다.

 

과제

1. 타겟 사용자 정의하기

사용자에 대한 관찰사항을 포스트잍에 정리하거나 사진을 찍습니다.

2. 자신의 아이디어에 대한 리서치 실시

일반적인 아이디어 조사 방법을 쓰면 됩니다.

마인드스톰, 인터뷰, FGI, 설문, 문헌조사 등등

 

가져오기

A4 용지 한장에는 아이디어에 대한 설명을

다른 한장에는 관찰한 포스트잍을 정리해 오면 됩니다. (A4 가 작은경우 큰 사이즈의 종이를 사용해도 무방합니다.)

 

위의 내용을 발표화일로 만들고 동일하게 댓글로 제출합니다.

 

posted by jisunlee

1. 자신이 개발하고 싶은 모바일, 웹, 인터렉션 등등의 아이디어를 생각하고

이것과 관련한 서비스의 3개 사례 이상의 벤치 마킹을 할것

2. 자신의 아이디어에 필요한 자료들을 리서치 하고 정리해 올것 


위 내용을 파워포인트에 정리하고   sldeshare.net 에 올린뒤에 자신의 블로그에  임베디드 코드로 삽입하고

해당 블로그 포스트 URL   을 여기에 댓글로 달아서 제출할것 


posted by jisunlee

블로그나 워드프레스등에 숙제를 포스트한뒤 포스트한 URL을 

여기에 댓글을 달아 숙제를 제출해주세요. 

Donal Norman (돈 노만)의 서적 및 주장에 대해서 시기별로 조사하거나, 특정 부분에 대해서 조사하여 오기

초첨은 노만이 어떻게 인터렉션 디자인을 바라보았는가에 대해서... 



http://www.acornpub.co.kr/book/iphone-ux-design


posted by jisunlee