SlideShare ist ein Scribd-Unternehmen logo
1 von 56
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/

Weitere ähnliche Inhalte

Andere mochten auch

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
 
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
 
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
 

Andere mochten auch (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
 

Mehr von 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 usability def designprocess
03 usability def designprocess03 usability def designprocess
03 usability def designprocess
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
 

Mehr von 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
 

Kürzlich hochgeladen

CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Kürzlich hochgeladen (20)

CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 

grids