SlideShare a Scribd company logo
Page Layout
BGW chapter 6

 Layout                              Layout Techniques
   Consistent                           Vertical lines
   Focused                              Constrast
   Minimal                              Balance
                                         Repetition &
 Page Components                         consistency

               Constraints, pitfalls solutions
                  Above the fold
                  Top left edge
                  Page width
Designing with Grids
What are grids?


        Grids     Columns
One Column
Two Columns
Two Columns
Three Columns
Three Columns
Four Columns
Four Columns
More Columns
Grids: How-to

1. Figure out page
   size
2. Divide it into a
   grid
3. Start designing
Figure out Page Size
Figure out Page Size




                                              Divisible by
                                      3, 4, 5, 6, 8, 10, 12, 15, a
                                                 nd 16

http://www.cameronmoll.com/archives/001220.html
http://www.welie.com/patterns/showPattern.php?patternID=grid-based-layout
http://www.welie.com/patterns/showPattern.php?patternID=grid-
based-layout
Proportion
b   a
Golden Ratio
b   a
The Rule of Thirds
Does this work?
Does this work?
                  NO
                  GRID!
Alignment
Breaking the Rules
http://dev.opera.com/articles/view/grid-design-basics-grids-for-web-page-l/
http://dev.opera.com/articles/view/grid-design-basics-grids-for-web-page-l/
http://www.emanuelblagonic.com/2007/02/16/developing-the-grid-that-
supports-your-design/
http://www.emanuelblagonic.com/2007/02/16/developing-the-grid-that-supports-your-design/

More Related Content

Viewers also liked

Citizen Shift Media in Action Workshop
Citizen Shift Media in Action WorkshopCitizen Shift Media in Action Workshop
Citizen Shift Media in Action Workshop
reisa101
 
Seminar on excellence in ict enhanced higher education sequent2014
Seminar on excellence in ict enhanced higher education sequent2014Seminar on excellence in ict enhanced higher education sequent2014
Seminar on excellence in ict enhanced higher education sequent2014
Ebba Ossiannilsson
 
Social Media for small business
Social Media for small businessSocial Media for small business
Social Media for small business
Dr. V Vorvoreanu
 
The Wonderful Life of Them
The Wonderful Life of ThemThe Wonderful Life of Them
The Wonderful Life of Them
beardjm2
 
Why Research
Why ResearchWhy Research
Why Research
hsegel
 
Mahavira Tents (India) P Ltd
Mahavira Tents (India) P LtdMahavira Tents (India) P Ltd
Mahavira Tents (India) P Ltd
chimejain
 
Unesconamibia2010 100430064333-phpapp02
Unesconamibia2010 100430064333-phpapp02Unesconamibia2010 100430064333-phpapp02
Unesconamibia2010 100430064333-phpapp02
Ebba Ossiannilsson
 
My Cake Screen Yorkshire 100610
My Cake Screen Yorkshire 100610My Cake Screen Yorkshire 100610
My Cake Screen Yorkshire 100610
brambles
 
РИФ 2016, Как добиться использования CRM на 100%?
РИФ 2016, Как добиться использования CRM на 100%?РИФ 2016, Как добиться использования CRM на 100%?
РИФ 2016, Как добиться использования CRM на 100%?
Тарасов Константин
 
2006 a novel lipoxygenase in pea roots. its function
2006 a novel lipoxygenase in pea roots. its function2006 a novel lipoxygenase in pea roots. its function
2006 a novel lipoxygenase in pea roots. its function
Agrin Life
 
Mis gustos
Mis gustosMis gustos
Mis gustos
Gerardo Flores
 
mobile usability
mobile usabilitymobile usability
mobile usability
Dr. V Vorvoreanu
 
Web 2.0 study tools 02
Web 2.0 study tools 02Web 2.0 study tools 02
Web 2.0 study tools 02
Scott Gilbert
 
Ossiannilsson fbf 210915
Ossiannilsson fbf 210915Ossiannilsson fbf 210915
Ossiannilsson fbf 210915
Ebba Ossiannilsson
 
Album2
Album2Album2
Album2
karimking
 
Nu oer
Nu oerNu oer
Listening: Free Tools & Techniques for Nonprofit Brand Monitoring
Listening: Free Tools & Techniques for Nonprofit Brand MonitoringListening: Free Tools & Techniques for Nonprofit Brand Monitoring
Listening: Free Tools & Techniques for Nonprofit Brand Monitoring
Gregory Heller
 

Viewers also liked (20)

Citizen Shift Media in Action Workshop
Citizen Shift Media in Action WorkshopCitizen Shift Media in Action Workshop
Citizen Shift Media in Action Workshop
 
Seminar on excellence in ict enhanced higher education sequent2014
Seminar on excellence in ict enhanced higher education sequent2014Seminar on excellence in ict enhanced higher education sequent2014
Seminar on excellence in ict enhanced higher education sequent2014
 
Social Media for small business
Social Media for small businessSocial Media for small business
Social Media for small business
 
The Wonderful Life of Them
The Wonderful Life of ThemThe Wonderful Life of Them
The Wonderful Life of Them
 
Why Research
Why ResearchWhy Research
Why Research
 
Mahavira Tents (India) P Ltd
Mahavira Tents (India) P LtdMahavira Tents (India) P Ltd
Mahavira Tents (India) P Ltd
 
Unesconamibia2010 100430064333-phpapp02
Unesconamibia2010 100430064333-phpapp02Unesconamibia2010 100430064333-phpapp02
Unesconamibia2010 100430064333-phpapp02
 
My Cake Screen Yorkshire 100610
My Cake Screen Yorkshire 100610My Cake Screen Yorkshire 100610
My Cake Screen Yorkshire 100610
 
РИФ 2016, Как добиться использования CRM на 100%?
РИФ 2016, Как добиться использования CRM на 100%?РИФ 2016, Как добиться использования CRM на 100%?
РИФ 2016, Как добиться использования CRM на 100%?
 
2006 a novel lipoxygenase in pea roots. its function
2006 a novel lipoxygenase in pea roots. its function2006 a novel lipoxygenase in pea roots. its function
2006 a novel lipoxygenase in pea roots. its function
 
Pac Pac
Pac PacPac Pac
Pac Pac
 
Mis gustos
Mis gustosMis gustos
Mis gustos
 
mobile usability
mobile usabilitymobile usability
mobile usability
 
Web 2.0 study tools 02
Web 2.0 study tools 02Web 2.0 study tools 02
Web 2.0 study tools 02
 
Ossiannilsson fbf 210915
Ossiannilsson fbf 210915Ossiannilsson fbf 210915
Ossiannilsson fbf 210915
 
Album2
Album2Album2
Album2
 
Resum Tema 13
Resum Tema 13Resum Tema 13
Resum Tema 13
 
Session 06
Session 06Session 06
Session 06
 
Nu oer
Nu oerNu oer
Nu oer
 
Listening: Free Tools & Techniques for Nonprofit Brand Monitoring
Listening: Free Tools & Techniques for Nonprofit Brand MonitoringListening: Free Tools & Techniques for Nonprofit Brand Monitoring
Listening: Free Tools & Techniques for Nonprofit Brand Monitoring
 

More from Dr. V Vorvoreanu

Dia2 tues persona
Dia2 tues persona Dia2 tues persona
Dia2 tues persona
Dr. V Vorvoreanu
 
Dia2 sketches
Dia2 sketchesDia2 sketches
Dia2 sketches
Dr. V Vorvoreanu
 
DIA2 Design requirements presentation personas
DIA2 Design requirements presentation personasDIA2 Design requirements presentation personas
DIA2 Design requirements presentation personas
Dr. V Vorvoreanu
 
gestalt principles cats
gestalt principles catsgestalt principles cats
gestalt principles cats
Dr. V Vorvoreanu
 
07 principles 1 affordance
07 principles 1 affordance07 principles 1 affordance
07 principles 1 affordance
Dr. V Vorvoreanu
 
HCDD for ASEE 2015 presentation
HCDD for ASEE 2015 presentationHCDD for ASEE 2015 presentation
HCDD for ASEE 2015 presentation
Dr. V Vorvoreanu
 
Controls
ControlsControls
Responsive design UX intro
Responsive design UX introResponsive design UX intro
Responsive design UX intro
Dr. V Vorvoreanu
 
Attention info scent recognition vs recall
Attention info scent recognition vs recallAttention info scent recognition vs recall
Attention info scent recognition vs recall
Dr. V Vorvoreanu
 
03 bad usability kills
03 bad usability kills03 bad usability kills
03 bad usability kills
Dr. V Vorvoreanu
 
03 usability def designprocess
03 usability def designprocess03 usability def designprocess
03 usability def designprocess
Dr. V Vorvoreanu
 
Information architecture
Information architectureInformation architecture
Information architecture
Dr. V Vorvoreanu
 
UX Conceptual design - sketches, wireframes, mockups, prototypes
UX Conceptual design - sketches, wireframes, mockups, prototypesUX Conceptual design - sketches, wireframes, mockups, prototypes
UX Conceptual design - sketches, wireframes, mockups, prototypes
Dr. V Vorvoreanu
 
Cgt 256 course review
Cgt 256 course reviewCgt 256 course review
Cgt 256 course review
Dr. V Vorvoreanu
 
Cross channel ux
Cross channel uxCross channel ux
Cross channel ux
Dr. V Vorvoreanu
 
UX user-centered design process overview
UX user-centered design process overviewUX user-centered design process overview
UX user-centered design process overview
Dr. V Vorvoreanu
 
26 social interaction design
26 social interaction design26 social interaction design
26 social interaction design
Dr. V Vorvoreanu
 
Sketches wireframes mockups prototypes
Sketches wireframes mockups prototypesSketches wireframes mockups prototypes
Sketches wireframes mockups prototypes
Dr. V Vorvoreanu
 
11 info architecture-2014
11 info architecture-201411 info architecture-2014
11 info architecture-2014
Dr. V Vorvoreanu
 

More from Dr. V Vorvoreanu (20)

Dia2 tues persona
Dia2 tues persona Dia2 tues persona
Dia2 tues persona
 
Dia2 sketches
Dia2 sketchesDia2 sketches
Dia2 sketches
 
DIA2 Design requirements presentation personas
DIA2 Design requirements presentation personasDIA2 Design requirements presentation personas
DIA2 Design requirements presentation personas
 
gestalt principles cats
gestalt principles catsgestalt principles cats
gestalt principles cats
 
07 principles 1 affordance
07 principles 1 affordance07 principles 1 affordance
07 principles 1 affordance
 
HCDD for ASEE 2015 presentation
HCDD for ASEE 2015 presentationHCDD for ASEE 2015 presentation
HCDD for ASEE 2015 presentation
 
Controls
ControlsControls
Controls
 
Responsive design UX intro
Responsive design UX introResponsive design UX intro
Responsive design UX intro
 
Attention info scent recognition vs recall
Attention info scent recognition vs recallAttention info scent recognition vs recall
Attention info scent recognition vs recall
 
03 bad usability kills
03 bad usability kills03 bad usability kills
03 bad usability kills
 
03 usability def designprocess
03 usability def designprocess03 usability def designprocess
03 usability def designprocess
 
Information architecture
Information architectureInformation architecture
Information architecture
 
UX Conceptual design - sketches, wireframes, mockups, prototypes
UX Conceptual design - sketches, wireframes, mockups, prototypesUX Conceptual design - sketches, wireframes, mockups, prototypes
UX Conceptual design - sketches, wireframes, mockups, prototypes
 
Cgt 256 course review
Cgt 256 course reviewCgt 256 course review
Cgt 256 course review
 
Cross channel ux
Cross channel uxCross channel ux
Cross channel ux
 
UX user-centered design process overview
UX user-centered design process overviewUX user-centered design process overview
UX user-centered design process overview
 
26 social interaction design
26 social interaction design26 social interaction design
26 social interaction design
 
Purdue MS degree CGT
Purdue MS degree CGTPurdue MS degree CGT
Purdue MS degree CGT
 
Sketches wireframes mockups prototypes
Sketches wireframes mockups prototypesSketches wireframes mockups prototypes
Sketches wireframes mockups prototypes
 
11 info architecture-2014
11 info architecture-201411 info architecture-2014
11 info architecture-2014
 

Recently uploaded

Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Kumud Singh
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Zilliz
 
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIEnchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Vladimir Iglovikov, Ph.D.
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
Claudio Di Ciccio
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Zilliz
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
James Anderson
 
Data structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdfData structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdf
TIPNGVN2
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Neo4j
 

Recently uploaded (20)

Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...Building RAG with self-deployed Milvus vector database and Snowpark Container...
Building RAG with self-deployed Milvus vector database and Snowpark Container...
 
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIEnchancing adoption of Open Source Libraries. A case study on Albumentations.AI
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AI
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
 
Data structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdfData structures and Algorithms in Python.pdf
Data structures and Algorithms in Python.pdf
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
 

grids