SlideShare a Scribd company logo
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 Web
Ian Homer
 
Infographic
InfographicInfographic
Infographic
AdamSangster
 
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 4
Saurabh Narula
 
IntrospeQt iCapture Connect for Alfresco
IntrospeQt iCapture Connect for AlfrescoIntrospeQt iCapture Connect for Alfresco
IntrospeQt iCapture Connect for AlfrescoSrikant Tallapragada
 
Apps Builder Tutorial
Apps Builder TutorialApps Builder Tutorial
Apps Builder Tutorial
Daniele Pelleri
 
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
Matthias 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
 
Oracle Fusion Applications 101
Oracle Fusion Applications 101Oracle Fusion Applications 101
Oracle Fusion Applications 101
Rhapsody Technologies, Inc.
 
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 Online
bigspire
 
Customer Experience Management from Adobe
Customer Experience Management from AdobeCustomer Experience Management from Adobe
Customer Experience Management from Adobe
Dieter 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 intranet
James Dellow
 
Sap net weaver business client introduction
Sap net weaver business client   introductionSap net weaver business client   introduction
Sap net weaver business client introduction
Rajesh 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 2024
Atsushi HASEGAWA, Ph.D.
 
Design Confidence | Designship 2018
Design Confidence | Designship 2018Design Confidence | Designship 2018
Design Confidence | Designship 2018
Atsushi HASEGAWA, Ph.D.
 
デザインする組織、組織のデザイン
デザインする組織、組織のデザインデザインする組織、組織のデザイン
デザインする組織、組織のデザイン
Atsushi HASEGAWA, Ph.D.
 
HCD and NEXT DESIGN
HCD and NEXT DESIGNHCD and NEXT DESIGN
HCD and NEXT DESIGN
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.
 
DE$IGN and NEXT DESIGN
DE$IGN and NEXT DESIGNDE$IGN and NEXT DESIGN
DE$IGN and NEXT 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 Tokyo
Atsushi HASEGAWA, Ph.D.
 
World IA Day 2017 Tokyo
World IA Day 2017 TokyoWorld IA Day 2017 Tokyo
World IA Day 2017 Tokyo
Atsushi HASEGAWA, Ph.D.
 
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
Atsushi 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 HAI2016
Atsushi 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. 1
Atsushi HASEGAWA, Ph.D.
 
Era of UX Team of One
Era of UX Team of OneEra of UX Team of One
Era of UX Team of One
Atsushi 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、弱いIA
Atsushi HASEGAWA, Ph.D.
 
サービスデザインの時代_ FITS2015
サービスデザインの時代_ FITS2015サービスデザインの時代_ FITS2015
サービスデザインの時代_ FITS2015
Atsushi HASEGAWA, Ph.D.
 
UX TOKYO Jam 2014 Closing Keynote
UX TOKYO Jam 2014 Closing KeynoteUX TOKYO Jam 2014 Closing Keynote
UX TOKYO Jam 2014 Closing Keynote
Atsushi 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 Logic
Atsushi HASEGAWA, Ph.D.
 
Age of the Customer
Age of the CustomerAge of the Customer
Age of the Customer
Atsushi HASEGAWA, Ph.D.
 
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
Atsushi 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

一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
h7j5io0
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
gpffo76j
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
pmgdscunsri
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
smpc3nvg
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
9a93xvy
 
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdfPORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
fabianavillanib
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
9a93xvy
 
Connect Conference 2022: Passive House - Economic and Environmental Solution...
Connect Conference 2022: Passive House -  Economic and Environmental Solution...Connect Conference 2022: Passive House -  Economic and Environmental Solution...
Connect Conference 2022: Passive House - Economic and Environmental Solution...
TE Studio
 
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
708pb191
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
asuzyq
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
ameli25062005
 
vernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdfvernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdf
PrabhjeetSingh219035
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
Techno Merch
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
GOWSIKRAJA PALANISAMY
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
jyz59f4j
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
Carolina de Bartolo
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Mansi Shah
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
Chiara Aliotta
 

Recently uploaded (20)

一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
 
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdfPORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
 
Connect Conference 2022: Passive House - Economic and Environmental Solution...
Connect Conference 2022: Passive House -  Economic and Environmental Solution...Connect Conference 2022: Passive House -  Economic and Environmental Solution...
Connect Conference 2022: Passive House - Economic and Environmental Solution...
 
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
 
vernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdfvernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdf
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
 

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