SlideShare a Scribd company logo
1 of 1
Download to read offline
Content Model for Page Design
                                                                                                                                                           Atsushi HASEGAWA, Ph.D., Hitoshi ENJOJI, Naoko KAWACHI
                                                                                                                                                                    Concent, Inc. (Tokyo, Japan) www.concentinc.jp/lab/


  What?
  - Content Model is a diagram for organizing content and visualizing relationship.
  - This framework shows Content Model helps define page layout by UX strategy.
  How?
  1. Draw Content Model by categories, relationship, volumes (left diagram).
  2. Draw Bold Line an usage comments by UX strategy.
                                                                                                                                          Other products
  3. Place elements on the page by the priority.                                                                                           and services
  Why?                                                                                                                                    Basic product
  - Prioritized Content Model is a basis of the page design.                                                                               information,
                                                                                                                                             and BUY
    You can discuss the page layout and effect by this model.                                                                             NOW button


1) Other product                             Other Products                                                Other Contents
information and
functions are low                                                                                                                              Main
priority, then                                                                                                                              features /
appear only in the            Mac                iPod         iPhone                      Store                   iTunes     Support        Slideshow
global navigation.                                                                                                                         and columns




                                                                                                  3) Product's basic                        Instruction
2) Instruction and                                                                                information items are                        video
explanation                                                                                       defined by the
                          Instruction
contents are high                                                                                 guideline including       Features
                             Video
priority. Especially                                                                              BUY NOW button.
introducing mail                                                                                  They are appear in
features are appear                                                                               the local navigation
in both the mail                                                                                  area.
visual slideshow
and content                 Main                                                                                             Build-in
column.                    Features                                                                                           Apps
                                                                         iPad



                              Use                                               4) The key element of this                    App
                           Situation                                            page is product mail                          Store
                                                                                features slideshow. Each
                                                                                slide has a large picture
                                                                                and copy phrases.
                                                                                                                                                Use
                                                                                                                                             situation
                            iOS 4.3                                                                                            iOS


                                                                                                                                            Buy iPad
                          Featured
                          Contents
                                                                                                                              Tour




          5) BUY NOW is the highest
          priority, so it is placed on the       BUY          Online             Retail
          local navigation area and has                                                               Telephone               Spec
                                                 NOW          Store              Store
          special button shape. Other
          information are less priority.
                                                              Buy iPad                                                        Product
                                                                                                                            Information

More Related Content

Similar to Content Model to Page Design

UI Optimisation For Mobile Web
UI Optimisation For Mobile WebUI Optimisation For Mobile Web
UI Optimisation For Mobile WebIan Homer
 
Scct2013 topic5-introto applicationdevelopment
Scct2013 topic5-introto applicationdevelopmentScct2013 topic5-introto applicationdevelopment
Scct2013 topic5-introto applicationdevelopmentAnies Syahieda
 
Visual Experiences with flex 4
Visual Experiences with flex 4Visual Experiences with flex 4
Visual Experiences with flex 4Saurabh Narula
 
IntrospeQt iCapture Connect for Alfresco
IntrospeQt iCapture Connect for AlfrescoIntrospeQt iCapture Connect for Alfresco
IntrospeQt iCapture Connect for AlfrescoSrikant Tallapragada
 
Genesis Overview Slides from Adobe MAX 2008
Genesis Overview Slides from Adobe MAX 2008Genesis Overview Slides from Adobe MAX 2008
Genesis Overview Slides from Adobe MAX 2008Matthias Zeller
 
Architecting your app in ext js 4, part 1 learn sencha
Architecting your app in ext js 4, part 1   learn   senchaArchitecting your app in ext js 4, part 1   learn   sencha
Architecting your app in ext js 4, part 1 learn senchaRahul Kumar
 
Whats new in IBM Notes & iNotes Version 9 Social Edition
Whats new in IBM Notes & iNotes Version 9 Social EditionWhats new in IBM Notes & iNotes Version 9 Social Edition
Whats new in IBM Notes & iNotes Version 9 Social EditionNovakenstein
 
BBC Mobile Style Guide 1.1 — Global Visual Language for the mobile web:
BBC Mobile Style Guide 1.1 — Global Visual Language for the mobile web:BBC Mobile Style Guide 1.1 — Global Visual Language for the mobile web:
BBC Mobile Style Guide 1.1 — Global Visual Language for the mobile web:Anglo-Studies Educational Consulting
 
Netex learningMaker | Video Template v2.2.2 [En]
Netex learningMaker | Video Template v2.2.2 [En]Netex learningMaker | Video Template v2.2.2 [En]
Netex learningMaker | Video Template v2.2.2 [En]Netex Learning
 
7 steps to becoming a User Experience focused graphic designer
7 steps to becoming a User Experience focused graphic designer 7 steps to becoming a User Experience focused graphic designer
7 steps to becoming a User Experience focused graphic designer thegroop
 
Learn Hybrid Mobile Apps Development using PhoneGap Online
Learn Hybrid Mobile Apps Development using PhoneGap OnlineLearn Hybrid Mobile Apps Development using PhoneGap Online
Learn Hybrid Mobile Apps Development using PhoneGap Onlinebigspire
 
Customer Experience Management from Adobe
Customer Experience Management from AdobeCustomer Experience Management from Adobe
Customer Experience Management from AdobeDieter Hovorka
 
Intranet 2.0 - Integrating Enterprise 2.0 into your corporate intranet
Intranet 2.0 - Integrating Enterprise 2.0 into your corporate intranetIntranet 2.0 - Integrating Enterprise 2.0 into your corporate intranet
Intranet 2.0 - Integrating Enterprise 2.0 into your corporate intranetJames Dellow
 
Sap net weaver business client introduction
Sap net weaver business client   introductionSap net weaver business client   introduction
Sap net weaver business client introductionRajesh Adhate
 
Web based drama website and task4
Web based drama website and task4Web based drama website and task4
Web based drama website and task4dpagoffs
 

Similar to Content Model to Page Design (20)

Ota
OtaOta
Ota
 
UI Optimisation For Mobile Web
UI Optimisation For Mobile WebUI Optimisation For Mobile Web
UI Optimisation For Mobile Web
 
Infographic
InfographicInfographic
Infographic
 
Scct2013 topic5-introto applicationdevelopment
Scct2013 topic5-introto applicationdevelopmentScct2013 topic5-introto applicationdevelopment
Scct2013 topic5-introto applicationdevelopment
 
Visual Experiences with flex 4
Visual Experiences with flex 4Visual Experiences with flex 4
Visual Experiences with flex 4
 
IntrospeQt iCapture Connect for Alfresco
IntrospeQt iCapture Connect for AlfrescoIntrospeQt iCapture Connect for Alfresco
IntrospeQt iCapture Connect for Alfresco
 
Apps Builder Tutorial
Apps Builder TutorialApps Builder Tutorial
Apps Builder Tutorial
 
Genesis Overview Slides from Adobe MAX 2008
Genesis Overview Slides from Adobe MAX 2008Genesis Overview Slides from Adobe MAX 2008
Genesis Overview Slides from Adobe MAX 2008
 
Architecting your app in ext js 4, part 1 learn sencha
Architecting your app in ext js 4, part 1   learn   senchaArchitecting your app in ext js 4, part 1   learn   sencha
Architecting your app in ext js 4, part 1 learn sencha
 
Oracle Fusion Applications 101
Oracle Fusion Applications 101Oracle Fusion Applications 101
Oracle Fusion Applications 101
 
Whats new in IBM Notes & iNotes Version 9 Social Edition
Whats new in IBM Notes & iNotes Version 9 Social EditionWhats new in IBM Notes & iNotes Version 9 Social Edition
Whats new in IBM Notes & iNotes Version 9 Social Edition
 
BBC Mobile Style Guide 1.1 — Global Visual Language for the mobile web:
BBC Mobile Style Guide 1.1 — Global Visual Language for the mobile web:BBC Mobile Style Guide 1.1 — Global Visual Language for the mobile web:
BBC Mobile Style Guide 1.1 — Global Visual Language for the mobile web:
 
Netex learningMaker | Video Template v2.2.2 [En]
Netex learningMaker | Video Template v2.2.2 [En]Netex learningMaker | Video Template v2.2.2 [En]
Netex learningMaker | Video Template v2.2.2 [En]
 
Digital Branding
Digital BrandingDigital Branding
Digital Branding
 
7 steps to becoming a User Experience focused graphic designer
7 steps to becoming a User Experience focused graphic designer 7 steps to becoming a User Experience focused graphic designer
7 steps to becoming a User Experience focused graphic designer
 
Learn Hybrid Mobile Apps Development using PhoneGap Online
Learn Hybrid Mobile Apps Development using PhoneGap OnlineLearn Hybrid Mobile Apps Development using PhoneGap Online
Learn Hybrid Mobile Apps Development using PhoneGap Online
 
Customer Experience Management from Adobe
Customer Experience Management from AdobeCustomer Experience Management from Adobe
Customer Experience Management from Adobe
 
Intranet 2.0 - Integrating Enterprise 2.0 into your corporate intranet
Intranet 2.0 - Integrating Enterprise 2.0 into your corporate intranetIntranet 2.0 - Integrating Enterprise 2.0 into your corporate intranet
Intranet 2.0 - Integrating Enterprise 2.0 into your corporate intranet
 
Sap net weaver business client introduction
Sap net weaver business client   introductionSap net weaver business client   introduction
Sap net weaver business client introduction
 
Web based drama website and task4
Web based drama website and task4Web based drama website and task4
Web based drama website and task4
 

More from Atsushi HASEGAWA, Ph.D.

IA Dark Patterns and challenges WIAD Tokyo 2024
IA Dark Patterns and challenges WIAD Tokyo 2024IA Dark Patterns and challenges WIAD Tokyo 2024
IA Dark Patterns and challenges WIAD Tokyo 2024Atsushi HASEGAWA, Ph.D.
 
デザインする組織、組織のデザイン
デザインする組織、組織のデザインデザインする組織、組織のデザイン
デザインする組織、組織のデザインAtsushi HASEGAWA, Ph.D.
 
サービスデザインの時代 〜顧客価値をビジネスに〜
サービスデザインの時代 〜顧客価値をビジネスに〜サービスデザインの時代 〜顧客価値をビジネスに〜
サービスデザインの時代 〜顧客価値をビジネスに〜Atsushi HASEGAWA, Ph.D.
 
A Guide to Service Design / サービスデザインの基礎・応用・最新事例
A Guide to Service Design / サービスデザインの基礎・応用・最新事例A Guide to Service Design / サービスデザインの基礎・応用・最新事例
A Guide to Service Design / サービスデザインの基礎・応用・最新事例Atsushi HASEGAWA, Ph.D.
 
Taxonomy issues in the IA community_WIAD17 Tokyo
Taxonomy issues in the IA community_WIAD17 TokyoTaxonomy issues in the IA community_WIAD17 Tokyo
Taxonomy issues in the IA community_WIAD17 TokyoAtsushi HASEGAWA, Ph.D.
 
Human Agent Interaction and Information Architecture at HAI2016
Human Agent Interaction and Information Architecture at HAI2016Human Agent Interaction and Information Architecture at HAI2016
Human Agent Interaction and Information Architecture at HAI2016Atsushi HASEGAWA, Ph.D.
 
SDN Japan | Service Business Model SIG Vol. 1
SDN Japan | Service Business Model SIG Vol. 1SDN Japan | Service Business Model SIG Vol. 1
SDN Japan | Service Business Model SIG Vol. 1Atsushi HASEGAWA, Ph.D.
 
Japanese IA, Weak IA - 日本のIA、弱いIA
Japanese IA, Weak IA - 日本のIA、弱いIAJapanese IA, Weak IA - 日本のIA、弱いIA
Japanese IA, Weak IA - 日本のIA、弱いIAAtsushi HASEGAWA, Ph.D.
 
サービスデザインの時代_ FITS2015
サービスデザインの時代_ FITS2015サービスデザインの時代_ FITS2015
サービスデザインの時代_ FITS2015Atsushi HASEGAWA, Ph.D.
 
Good Dominant Logic and Service Dominant Logic
Good Dominant Logic and Service Dominant LogicGood Dominant Logic and Service Dominant Logic
Good Dominant Logic and Service Dominant LogicAtsushi HASEGAWA, Ph.D.
 

More from Atsushi HASEGAWA, Ph.D. (20)

IA Dark Patterns and challenges WIAD Tokyo 2024
IA Dark Patterns and challenges WIAD Tokyo 2024IA Dark Patterns and challenges WIAD Tokyo 2024
IA Dark Patterns and challenges WIAD Tokyo 2024
 
Design Confidence | Designship 2018
Design Confidence | Designship 2018Design Confidence | Designship 2018
Design Confidence | Designship 2018
 
デザインする組織、組織のデザイン
デザインする組織、組織のデザインデザインする組織、組織のデザイン
デザインする組織、組織のデザイン
 
HCD and NEXT DESIGN
HCD and NEXT DESIGNHCD and NEXT DESIGN
HCD and NEXT DESIGN
 
サービスデザインの時代 〜顧客価値をビジネスに〜
サービスデザインの時代 〜顧客価値をビジネスに〜サービスデザインの時代 〜顧客価値をビジネスに〜
サービスデザインの時代 〜顧客価値をビジネスに〜
 
A Guide to Service Design / サービスデザインの基礎・応用・最新事例
A Guide to Service Design / サービスデザインの基礎・応用・最新事例A Guide to Service Design / サービスデザインの基礎・応用・最新事例
A Guide to Service Design / サービスデザインの基礎・応用・最新事例
 
DE$IGN and NEXT DESIGN
DE$IGN and NEXT DESIGNDE$IGN and NEXT DESIGN
DE$IGN and NEXT DESIGN
 
Taxonomy issues in the IA community_WIAD17 Tokyo
Taxonomy issues in the IA community_WIAD17 TokyoTaxonomy issues in the IA community_WIAD17 Tokyo
Taxonomy issues in the IA community_WIAD17 Tokyo
 
World IA Day 2017 Tokyo
World IA Day 2017 TokyoWorld IA Day 2017 Tokyo
World IA Day 2017 Tokyo
 
World IA Day 2017 Tokyo opening remarks
World IA Day 2017 Tokyo opening remarksWorld IA Day 2017 Tokyo opening remarks
World IA Day 2017 Tokyo opening remarks
 
Human Agent Interaction and Information Architecture at HAI2016
Human Agent Interaction and Information Architecture at HAI2016Human Agent Interaction and Information Architecture at HAI2016
Human Agent Interaction and Information Architecture at HAI2016
 
SDN Japan | Service Business Model SIG Vol. 1
SDN Japan | Service Business Model SIG Vol. 1SDN Japan | Service Business Model SIG Vol. 1
SDN Japan | Service Business Model SIG Vol. 1
 
Era of UX Team of One
Era of UX Team of OneEra of UX Team of One
Era of UX Team of One
 
Japanese IA, Weak IA - 日本のIA、弱いIA
Japanese IA, Weak IA - 日本のIA、弱いIAJapanese IA, Weak IA - 日本のIA、弱いIA
Japanese IA, Weak IA - 日本のIA、弱いIA
 
サービスデザインの時代_ FITS2015
サービスデザインの時代_ FITS2015サービスデザインの時代_ FITS2015
サービスデザインの時代_ FITS2015
 
UX TOKYO Jam 2014 Closing Keynote
UX TOKYO Jam 2014 Closing KeynoteUX TOKYO Jam 2014 Closing Keynote
UX TOKYO Jam 2014 Closing Keynote
 
Good Dominant Logic and Service Dominant Logic
Good Dominant Logic and Service Dominant LogicGood Dominant Logic and Service Dominant Logic
Good Dominant Logic and Service Dominant Logic
 
Age of the Customer
Age of the CustomerAge of the Customer
Age of the Customer
 
Definition of UX from UX White Paper
Definition of UX from UX White PaperDefinition of UX from UX White Paper
Definition of UX from UX White Paper
 
UXSTRAT 2013 Redux in Tokyo via schoo
UXSTRAT 2013 Redux in Tokyo via schooUXSTRAT 2013 Redux in Tokyo via schoo
UXSTRAT 2013 Redux in Tokyo via schoo
 

Recently uploaded

Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Nightssuser7cb4ff
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10uasjlagroup
 
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一diploma 1
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书zdzoqco
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一z xss
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCRdollysharma2066
 
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一Fi L
 
Apresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus RizzoApresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus RizzoCarolTelles6
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxmapanig881
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree ttt fff
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一F dds
 
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxmarckustrevion
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in designnooreen17
 
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一Fi sss
 
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...mrchrns005
 

Recently uploaded (20)

Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
 
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
 
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
办理(麻省罗威尔毕业证书)美国麻省大学罗威尔校区毕业证成绩单原版一比一
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
 
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
 
Apresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus RizzoApresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus Rizzo
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
Call Girls in Pratap Nagar, 9953056974 Escort Service
Call Girls in Pratap Nagar,  9953056974 Escort ServiceCall Girls in Pratap Nagar,  9953056974 Escort Service
Call Girls in Pratap Nagar, 9953056974 Escort Service
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptx
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
 
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptx
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in design
 
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
 
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
 

Content Model to Page Design

  • 1. Content Model for Page Design Atsushi HASEGAWA, Ph.D., Hitoshi ENJOJI, Naoko KAWACHI Concent, Inc. (Tokyo, Japan) www.concentinc.jp/lab/ What? - Content Model is a diagram for organizing content and visualizing relationship. - This framework shows Content Model helps define page layout by UX strategy. How? 1. Draw Content Model by categories, relationship, volumes (left diagram). 2. Draw Bold Line an usage comments by UX strategy. Other products 3. Place elements on the page by the priority. and services Why? Basic product - Prioritized Content Model is a basis of the page design. information, and BUY You can discuss the page layout and effect by this model. NOW button 1) Other product Other Products Other Contents information and functions are low Main priority, then features / appear only in the Mac iPod iPhone Store iTunes Support Slideshow global navigation. and columns 3) Product's basic Instruction 2) Instruction and information items are video explanation defined by the Instruction contents are high guideline including Features Video priority. Especially BUY NOW button. introducing mail They are appear in features are appear the local navigation in both the mail area. visual slideshow and content Main Build-in column. Features Apps iPad Use 4) The key element of this App Situation page is product mail Store features slideshow. Each slide has a large picture and copy phrases. Use situation iOS 4.3 iOS Buy iPad Featured Contents Tour 5) BUY NOW is the highest priority, so it is placed on the BUY Online Retail local navigation area and has Telephone Spec NOW Store Store special button shape. Other information are less priority. Buy iPad Product Information