SlideShare a Scribd company logo
1 of 16
Page Structure CGS2826 Web Design Program in Interdisciplinary Computing Florida State University From  Web Style Guide, Chapter 6: Page Structure
The experienced web designer, like the talented newspaper art director, accepts that many projects she works on will have headers and columns and footers. Her job is not to whine about emerging commonalities but to use them to create pages that are distinctive, natural, brand-appropriate, subtly memorable, and quietly but unmistakably engaging. — Jeffrey Zeldman
Site Design should…  ,[object Object],[object Object],[object Object]
 
Headers Headers provide site identity and global navigation, with search and perhaps other tools.  Headers are the most visible component of site identity.
Scan Columns ,[object Object],[object Object],[object Object],[object Object],[object Object]
Content Area
Footers ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Page Templates ,[object Object]
Page Templates ,[object Object],[object Object]
Home Page
Tag Lines Let visitors know what you do!
Above the Fold
Dropdown menus ,[object Object],[object Object]
Role-based navigation
Splash Page? Author: Don’t ever use an indulgent, functionally useless splash page as “eye candy” at the entrance to your site. Ever. http://www.webdesigndev.com/inspiration/20-crazy-but-creative-website-splash-page-examples

More Related Content

What's hot

MInistry 2 Pensacola: A User-Centered Approach to Web Design
MInistry 2 Pensacola:  A User-Centered Approach to Web DesignMInistry 2 Pensacola:  A User-Centered Approach to Web Design
MInistry 2 Pensacola: A User-Centered Approach to Web DesignMatt Carlisle
 
Responsive Design for SharePoint
Responsive Design for SharePointResponsive Design for SharePoint
Responsive Design for SharePointCathy Dew
 
Tierney.looking back
Tierney.looking backTierney.looking back
Tierney.looking backmadisont
 
Menciptakan dan Membangun Website
Menciptakan dan Membangun WebsiteMenciptakan dan Membangun Website
Menciptakan dan Membangun Websitecokyfauzi
 
5 Quick Starter Guide on How to Earn Higher Income Working Online
5 Quick Starter Guide on How to Earn Higher Income Working Online5 Quick Starter Guide on How to Earn Higher Income Working Online
5 Quick Starter Guide on How to Earn Higher Income Working OnlineJay Pasana
 
How to earn higher income working from home
How to earn higher income working from homeHow to earn higher income working from home
How to earn higher income working from homeMarilyn Pasana
 
Designbriefing
DesignbriefingDesignbriefing
DesignbriefingOnno Groen
 

What's hot (7)

MInistry 2 Pensacola: A User-Centered Approach to Web Design
MInistry 2 Pensacola:  A User-Centered Approach to Web DesignMInistry 2 Pensacola:  A User-Centered Approach to Web Design
MInistry 2 Pensacola: A User-Centered Approach to Web Design
 
Responsive Design for SharePoint
Responsive Design for SharePointResponsive Design for SharePoint
Responsive Design for SharePoint
 
Tierney.looking back
Tierney.looking backTierney.looking back
Tierney.looking back
 
Menciptakan dan Membangun Website
Menciptakan dan Membangun WebsiteMenciptakan dan Membangun Website
Menciptakan dan Membangun Website
 
5 Quick Starter Guide on How to Earn Higher Income Working Online
5 Quick Starter Guide on How to Earn Higher Income Working Online5 Quick Starter Guide on How to Earn Higher Income Working Online
5 Quick Starter Guide on How to Earn Higher Income Working Online
 
How to earn higher income working from home
How to earn higher income working from homeHow to earn higher income working from home
How to earn higher income working from home
 
Designbriefing
DesignbriefingDesignbriefing
Designbriefing
 

Similar to Page Structure and Design Elements CGS2826

Good website design
Good website designGood website design
Good website designKazi Nazmul
 
Designing Article Pages
Designing Article PagesDesigning Article Pages
Designing Article PagesJake Paul
 
JITD kickoff web site presentation
JITD kickoff web site presentationJITD kickoff web site presentation
JITD kickoff web site presentationDonna Liotta
 
Blog creationguide forestview
Blog creationguide forestviewBlog creationguide forestview
Blog creationguide forestviewNikos Stagakis
 
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint BrandingThe Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint BrandingStu King
 
Web project management
Web project managementWeb project management
Web project managementSavaş Şakar
 
BYU-Idaho Web Developers' Information Session 2011-05-16
BYU-Idaho Web Developers' Information Session 2011-05-16BYU-Idaho Web Developers' Information Session 2011-05-16
BYU-Idaho Web Developers' Information Session 2011-05-16BYUIWebmaster
 
Website Audit Questionnaire
Website Audit QuestionnaireWebsite Audit Questionnaire
Website Audit QuestionnaireRohas Nagpal
 
BA 65 Hour 04 Promoting Your Site
BA 65 Hour 04 Promoting Your SiteBA 65 Hour 04 Promoting Your Site
BA 65 Hour 04 Promoting Your Sitedpd
 
BA 65 Hour 4 ~ Promoting Your Site
BA 65 Hour 4 ~ Promoting Your SiteBA 65 Hour 4 ~ Promoting Your Site
BA 65 Hour 4 ~ Promoting Your Sitedpd
 
Everything You Need to Know about SEO
Everything You Need to Know about SEOEverything You Need to Know about SEO
Everything You Need to Know about SEOiProspect Canada
 
Everything You Need to Know about SEO
Everything You Need to Know about SEOEverything You Need to Know about SEO
Everything You Need to Know about SEOguest6271d55
 
SMX@adtech: Search Engine Optimization Tactics — BruceClay
SMX@adtech: Search Engine Optimization Tactics — BruceClaySMX@adtech: Search Engine Optimization Tactics — BruceClay
SMX@adtech: Search Engine Optimization Tactics — BruceClayadtech_fan
 
Seo Best Practices for Web Design
Seo Best Practices for Web DesignSeo Best Practices for Web Design
Seo Best Practices for Web Design6S Marketing
 
· Assignment 1 Emotional Intelligence and Effective LeadershipA.docx
· Assignment 1 Emotional Intelligence and Effective LeadershipA.docx· Assignment 1 Emotional Intelligence and Effective LeadershipA.docx
· Assignment 1 Emotional Intelligence and Effective LeadershipA.docxLynellBull52
 
WordPress North East (Jan 2021) ~ SEO Fundamentals For WordPress
WordPress North East (Jan 2021) ~ SEO Fundamentals For WordPressWordPress North East (Jan 2021) ~ SEO Fundamentals For WordPress
WordPress North East (Jan 2021) ~ SEO Fundamentals For WordPressDan Taylor
 

Similar to Page Structure and Design Elements CGS2826 (20)

4 Interface Design
4 Interface Design4 Interface Design
4 Interface Design
 
Good website design
Good website designGood website design
Good website design
 
Designing Article Pages
Designing Article PagesDesigning Article Pages
Designing Article Pages
 
JITD kickoff web site presentation
JITD kickoff web site presentationJITD kickoff web site presentation
JITD kickoff web site presentation
 
Blog creationguide forestview
Blog creationguide forestviewBlog creationguide forestview
Blog creationguide forestview
 
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint BrandingThe Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
 
Web project management
Web project managementWeb project management
Web project management
 
BYU-Idaho Web Developers' Information Session 2011-05-16
BYU-Idaho Web Developers' Information Session 2011-05-16BYU-Idaho Web Developers' Information Session 2011-05-16
BYU-Idaho Web Developers' Information Session 2011-05-16
 
Website Audit Questionnaire
Website Audit QuestionnaireWebsite Audit Questionnaire
Website Audit Questionnaire
 
Web Site Design
Web Site DesignWeb Site Design
Web Site Design
 
Design for the Web
Design for the WebDesign for the Web
Design for the Web
 
BA 65 Hour 04 Promoting Your Site
BA 65 Hour 04 Promoting Your SiteBA 65 Hour 04 Promoting Your Site
BA 65 Hour 04 Promoting Your Site
 
BA 65 Hour 4 ~ Promoting Your Site
BA 65 Hour 4 ~ Promoting Your SiteBA 65 Hour 4 ~ Promoting Your Site
BA 65 Hour 4 ~ Promoting Your Site
 
Lecture 3
Lecture 3Lecture 3
Lecture 3
 
Everything You Need to Know about SEO
Everything You Need to Know about SEOEverything You Need to Know about SEO
Everything You Need to Know about SEO
 
Everything You Need to Know about SEO
Everything You Need to Know about SEOEverything You Need to Know about SEO
Everything You Need to Know about SEO
 
SMX@adtech: Search Engine Optimization Tactics — BruceClay
SMX@adtech: Search Engine Optimization Tactics — BruceClaySMX@adtech: Search Engine Optimization Tactics — BruceClay
SMX@adtech: Search Engine Optimization Tactics — BruceClay
 
Seo Best Practices for Web Design
Seo Best Practices for Web DesignSeo Best Practices for Web Design
Seo Best Practices for Web Design
 
· Assignment 1 Emotional Intelligence and Effective LeadershipA.docx
· Assignment 1 Emotional Intelligence and Effective LeadershipA.docx· Assignment 1 Emotional Intelligence and Effective LeadershipA.docx
· Assignment 1 Emotional Intelligence and Effective LeadershipA.docx
 
WordPress North East (Jan 2021) ~ SEO Fundamentals For WordPress
WordPress North East (Jan 2021) ~ SEO Fundamentals For WordPressWordPress North East (Jan 2021) ~ SEO Fundamentals For WordPress
WordPress North East (Jan 2021) ~ SEO Fundamentals For WordPress
 

More from Program in Interdisciplinary Computing (20)

Phpmysqlcoding
PhpmysqlcodingPhpmysqlcoding
Phpmysqlcoding
 
Database basics
Database basicsDatabase basics
Database basics
 
CGS2835 HTML5
CGS2835 HTML5CGS2835 HTML5
CGS2835 HTML5
 
Mysocial databasequeries
Mysocial databasequeriesMysocial databasequeries
Mysocial databasequeries
 
Mysocial databasequeries
Mysocial databasequeriesMysocial databasequeries
Mysocial databasequeries
 
CGS2835 HTML5
CGS2835 HTML5CGS2835 HTML5
CGS2835 HTML5
 
01 intro tousingjava
01 intro tousingjava01 intro tousingjava
01 intro tousingjava
 
Web architecture v3
Web architecture v3Web architecture v3
Web architecture v3
 
Xhtml
XhtmlXhtml
Xhtml
 
Webdev
WebdevWebdev
Webdev
 
Web architecture
Web architectureWeb architecture
Web architecture
 
Sdlc
SdlcSdlc
Sdlc
 
Mysocial
MysocialMysocial
Mysocial
 
Javascript
JavascriptJavascript
Javascript
 
Javascript
JavascriptJavascript
Javascript
 
Html5
Html5Html5
Html5
 
Frameworks
FrameworksFrameworks
Frameworks
 
Drupal
DrupalDrupal
Drupal
 
Database
DatabaseDatabase
Database
 
Javascript2
Javascript2Javascript2
Javascript2
 

Recently uploaded

Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationnomboosow
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxSayali Powar
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphThiyagu K
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13Steve Thomason
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdfssuser54595a
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfciinovamais
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104misteraugie
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityGeoBlogs
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...Marc Dusseiller Dusjagr
 
Hybridoma Technology ( Production , Purification , and Application )
Hybridoma Technology  ( Production , Purification , and Application  ) Hybridoma Technology  ( Production , Purification , and Application  )
Hybridoma Technology ( Production , Purification , and Application ) Sakshi Ghasle
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformChameera Dedduwage
 
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfArihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfchloefrazer622
 
Separation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and ActinidesSeparation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and ActinidesFatimaKhan178732
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingTechSoup
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactPECB
 
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...RKavithamani
 

Recently uploaded (20)

INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communication
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
 
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
 
Hybridoma Technology ( Production , Purification , and Application )
Hybridoma Technology  ( Production , Purification , and Application  ) Hybridoma Technology  ( Production , Purification , and Application  )
Hybridoma Technology ( Production , Purification , and Application )
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
 
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfArihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdf
 
Separation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and ActinidesSeparation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and Actinides
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...
Privatization and Disinvestment - Meaning, Objectives, Advantages and Disadva...
 

Page Structure and Design Elements CGS2826

  • 1. Page Structure CGS2826 Web Design Program in Interdisciplinary Computing Florida State University From Web Style Guide, Chapter 6: Page Structure
  • 2. The experienced web designer, like the talented newspaper art director, accepts that many projects she works on will have headers and columns and footers. Her job is not to whine about emerging commonalities but to use them to create pages that are distinctive, natural, brand-appropriate, subtly memorable, and quietly but unmistakably engaging. — Jeffrey Zeldman
  • 3.
  • 4.  
  • 5. Headers Headers provide site identity and global navigation, with search and perhaps other tools. Headers are the most visible component of site identity.
  • 6.
  • 8.
  • 9.
  • 10.
  • 12. Tag Lines Let visitors know what you do!
  • 14.
  • 16. Splash Page? Author: Don’t ever use an indulgent, functionally useless splash page as “eye candy” at the entrance to your site. Ever. http://www.webdesigndev.com/inspiration/20-crazy-but-creative-website-splash-page-examples

Editor's Notes

  1. !