Designing Web Apps

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    3 Favorites

    Designing Web Apps - Presentation Transcript

    1. 웹애플리케이션 디자인 방법론 마이크로소프트 황리건 uxfactory.com
    2. 사진촬영 OK me2sms OK
    3. 이번 세션에서 다룰 내용
    4. 웹 애플리케이션 • 웹 브라우저 등을 통해서 접근 가능 • 웹에 연결 되어 있음 • 작업 지향적(Task-oriented) 소프트웨어
    5. 웹 애플리케이션의 패러다임 Web Site: User navigates to information Web App: Functionality comes to the user This is about wayfinding… This is about working in one place…
    6. 디자인 원칙
    7. 1. 단순함 JONE MAEDA
    8. 2. 정보 EDWARD TUFTE
    9. 3. 사용자 중심
    10. 4. 문제 해결 BILL BUXTON
    11. 5. 싞뢰성 BJ FOGG
    12. 디자인 방법론
    13. 웹 애플리케이션 디자인 방법롞 Web Site Web Application – User Research – User Research – Personas – Activity Scenarios – Card Sorting – Task Analysis – Content Structure – Workflow Diagram – Wireframes – Storyboards – Usability Test – Usability Test – Refine – Refine – Site Map – Screenflow diagrams – Treat – Treat – ... – ...
    14. 워크플로우 The Hiser Group
    15. Work Flow Diagram Interpolate Set Parameters Retouch Images Select Nodes Convert & Arrange Convert & Record Scan in Plan Special Build Manipulate Elements on Composite Manipulate Composite Film Rolls Effect Flowgraph Tape Lightbox Tape to Film Preview Preparation Planning Implementation Completion
    16. Interaction Model Node Palette Palette Palette Palette Interpolation Palette Node Parameters File Conversion/ Flowgraph Manager Lightbox Paint Transfer Manager Console Navigation Job Preview Composite Notes Scrapbook Minature The Hiser Group Early draft
    17. Screen Flow Diagram Edit Default Edit  Property Location Save PRO020 2.1.2   Offender File Offender File window – Select Property Item window – View Offender Property Item Property  Edit from PRO010 PRO030 A11 PRO030 Open item for Editing Print Property Add New Item… Update  Add/Edit from PRO010 Transaction Property Item  PRO110 A10 PRO040 If launched from PRO100  Offender File window – In Store  Edit Property Property Update Location History PRO100  PRO060
    18. Paper Prototyping
    19. 디자인 가이드
    20. 디자인 솔루션
    21. 프롞트엔드 기술 Thin Client RIA Rich Client AJAX AIR Java FX Silverlight XBAP Web Desktop Open Rich User Experience Wide Reach Local Processing No Footprint UI Toolkits Deployment Offline Availability
    22. 고상한 것이 현재의 기술이면 대중적인 것은 미래의 기술이다.
    23. 프롞트엔드 기술 고려 사항 1. User Experience 2. Deployment & Reach 3. Processing 4. Interface Components & Customization 5. Back-end Integration 6. Unique Features 7. Future Proofing 8. Staffing & Cost
    24. 한글 글꼴 사용 방식 • HTML/CSS • 브라우저 글꼴 설정 • 운영체제 기본 글꼴 • 임베디드 글꼴 • IME • 웹폰트(EOT)
    25. 협업으로 가는 길 Expression Night 지난 10월 4일에 있었던 이야기
    26. 어부바 모델 piggyback
    27. 어부바 중 ;;
    28. “코딩은 왜 하는 것입니까?”
    29. 개발자에게는 코딩이 밥이다.
    30. 협업으로 가는 길 1. 중계자 모델 2. 협업 도구 3. 공통의 언어 4. 작업 규칙 문서
    31. 디자이너 vs 개발자
    32. 누군가는 해야 하는 작업 ? layout, animation, events, markup, integration
    33. 중계자 모델 Integrator layout, animation, events, integration
    34. 팀 작업을 돕는 도구
    35. 도구 갂의 작업 연계 PhotoShop Illustrator Expression Expression Expression Visio... Design Web Web Expression AfterEffects Media FinalCut Pro Expression Expression Expression Audigy... Encoder Blend Blend Zam3D DeepZoom ... Composer
    36. 공통의 언어 필요 XAML XAML XAML
    37. <XAML>
    38. Common Controls
    39. Wireframe
    40. 경험을 통해 배운 점 • 작업 규칙의 중요성 – 미리 약속한 이름 사용 – 이름 정하기 규칙 • 디자이너-개발자 갂의 프로젝트 공유 • 디자인-개발 툴 워크플로우 • 와이어프레임의 활용
    41. 좋은 개발 파트너의 6가지 조건 1. 프로젝트 문서 작성 능력. 요구사항 문서는 필수. 2. 요구사항 문서가 실제 요구를 정확하게 반영. 3. 좋은 방법롞과 분명한 프로젝트 계획. 4. 깔끔하고 뛰어난 커뮤니케이션 채널. 5. 프로젝트 범위를 잘 정의하고 공유함. 6. 비즈니스 모델에 대한 이해도.
    42. 5C 프로세스 모델 Concept Content Composition Construction Contract Naming conventions Sketch Events Media Layout Wireframe States Graphics Slice User Comp Data sources controls Copy HTML • Pen • TFS • Expression • Expression • Expression • Visio • Word Blend Media Design • Expression • Expression • Expression Web Design Encoder • Omnigraffle • Expression design • Axure • Photoshop • ...
    43. Contract 작업 규칙 문서(Contract) Naming conventions • 디자이너와의 협업을 Events 위한 오브젝트 네이밍, States 파일 형식, 이미지 사이 Data sources 즈, 애니메이션 구조 정 의 문서 • 백엔드와의 통싞에 대 한 통싞 방식, 오브젝트, 이벤트, 프로토콜 정의 문서
    44. 테스트 방법론
    45. 사용성 테스트
    46. Eye-tracking 테스트 1. 일반적인 생각과 다르게 그래픽 보다는 텍스트가 더 주목을 끈다. 3. 사용자는 웹페이지의 맨 윗 쪽부터 F 자 형태로 웹페이지를 탐색한다. 5. 예쁜 장식이나 폰트는 대개 무시된다. 7. 글씨 크기는 보는 방식에 영향을 미친다.(작은 폰트는 집중, 큰 폰트는 탐색) 8. 흥미로운 요소(관심있는 키워드)가 있을 때만 부제를 본다. 14. 텍스트 광고를 가장 주의깊게 본다. 15. 이미지가 크면 클수록 더 큰 주목을 받는다. 22. 여백은 내용을 젂달하는데 좋은 영향을 준다.
    47. 오늘의 내용 정리 • 웹 애플리케이션 디자인 원칙 – 단순함, 정보, 사용자 중심, 문제 해결, 싞뢰성 • 디자인 방법롞 – 워크플로우, 인터랙션 모델, 페이퍼 프로토타이핑, 디자인 가이드 • 디자인 솔루션 – Thin Client, RIA, Rich Client • 협업으로 가는 길 – 중계자, 도구, 비주얼 언어, 작업 규칙 문서(5C모델) • 평가 및 테스트 – 사용성 테스트, 아이트래킹
    48. UI 개발자는 인터랙션 디자이너다.
    49. 2008년 유망 직종 Usability/ User Experience Specialist
    50. 디자인을 똑똑하게 하면 개발도 효과적으로 할 수 있다
    51. 감사합니다
    52. 참고 자료 • http://www.slideshare.net/garrettdimon/improving-interface-design • http://www.slideshare.net/shanemo/web311-designing-compelling-silverlight-user-experiences-with-expression- studio-presentation • http://www.slideshare.net/shanemo/from-website-to-webapp-shane-morris-presentation • http://www.slideshare.net/guest83d3e0/how-to-express-your-creative-self-with-windows-presentation- foundation-and-silverlight • http://www.slideshare.net/billwscott/designing-for-ajax/ • http://www.lukew.com/resources/articles/ajax_design.asp • http://www.uie.com/articles/malouf_scott_interview/ • http://looksgoodworkswell.blogspot.com/2006/01/nine-tips-for-designing-rich-internet.html • http://www.lukew.com/resources/webapplicationsolutions.pdf • http://www.sapdesignguild.org/resources/TSDesignGL/INDEX.HTM • http://www.lukew.com/resources/articles/web_forms.html http://www.lukew.com/resources/articles/web_applications.html • http://www.adaptivepath.com/ideas/essays/archives/000385.php • http://www.flickr.com/photos/factoryjoe/collections/72157600001823120/ • http://me2day.net/sumanpark/2008/10/19#15:21:48 • http://dobiho.com/?p=113 • http://dobiho.com/?p=922 • http://kin.naver.com/knowhow/entry.php?d1id=10&dir_id=10&eid=B53b7vcreAmITtnA2HpEcXS79zZ+Hj1p&qb= vsbAzLXwvu4gvcOwosit • http://www.uigarden.net/english/the-human-interface • http://uxlog.net/46 • http://interaction.tistory.com/150

    + guest46baab9guest46baab9, 2 years ago

    custom

    2050 views, 3 favs, 15 embeds more stats

    Web Application Conference Korea

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 2050
      • 1388 on SlideShare
      • 662 from embeds
    • Comments 0
    • Favorites 3
    • Downloads 59
    Most viewed embeds
    • 428 views on http://uxfactory.com
    • 112 views on http://www.uxfactory.com
    • 90 views on http://www.hanrss.com
    • 14 views on http://hsmtree.kr
    • 4 views on file://

    more

    All embeds
    • 428 views on http://uxfactory.com
    • 112 views on http://www.uxfactory.com
    • 90 views on http://www.hanrss.com
    • 14 views on http://hsmtree.kr
    • 4 views on file://
    • 4 views on http://uxfactory.tistory.com
    • 2 views on http://www.attractions.co.kr
    • 1 views on http://santasong.tistory.com
    • 1 views on http://mail19.paran.com
    • 1 views on http://wzd.com
    • 1 views on http://mail.cyworld.com
    • 1 views on http://mail.teaminterface.com
    • 1 views on http://mail37.paran.com
    • 1 views on http://team.malltb.com
    • 1 views on http://attractions.co.kr

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories