SlideShare ist ein Scribd-Unternehmen logo
1 von 14
Planning – Layout
Lesson 11
Lesson Goals
 Know key features of the website layout
 Understand how to structure individual pages
 Be able to plan the internal pages of your website

#user #needs
#layout
Assessment Criteria
 The assessment criteria for this part of the unit is as follows:

Detailed planning for the design
and function of the website
considering how information flows
and pages link. Justify choices in
relation to target audience appeal
and usability. Relevant legal and
ethical issues considered.

D1

P2

Plan the development of a multi-page website:
• Purpose
• Target Audience
• Content
• Production Plan

M1

LO2 – Plan the development of a multipage website

Consider visitor needs and how
they will navigate the website. The
info provided on a budget, launch
date and timescale is realistic. Some
consideration to relevant revenue
potential.
What will a user expect?
Think about the whole website experience…
Technical Needs

Be able to plan website pages
Understand audience needs

 A typical user on any of these sites may be looking for the following:
 Navigation – Easy to get from page to page
 Flow – Obvious which bit comes next
 Loading – Relatively quick load times
 Access – Site accessible to disabled users

 Consistency – A clear style across all pages
 Browsers – Displays correctly in all browsers
 Colours – Effective contrasting colour scheme
 Form – Allowing user interaction e.g. Contact

 Planning website pages effectively can ensure

you adhere to each of these considerations.

#user #needs
#layout
Page Layout
Identify the similarities between all four web pages…
Site – Homepage
Site – Media Page
Site – Gallery Page
Site – Contact Page
Template
What webpage elements are included on a template?
Templates

Be able to plan website pages
Understand audience needs

 A template can help you to design

a consistent theme for all of your
web pages.
 The template should include all of

the elements of your website that
you want to appear in the same
position on every page.
 All other information will go into

editable regions which would be
different for every page depending
on each page’s content.
#user #needs
#layout
Editable Region
This area would contain any information relevant to
the individual page. This area is not for information
that would go onto every page as that would be part
of your template for the webpages.

Site Template
Your Task

Be able to plan website pages
Understand audience needs

 Use mybalsamiq to design the internal

pages of your website considering the
needs of your target audience.
 Your site should use a template and

include the following features:
 Navigation
 Information Flow
 Consistency
 Good Content

 Use the markup section to add notes

explaining your designs.

#user #needs
#layout

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

LO1 - Lesson 1 - Research
LO1 - Lesson 1 - ResearchLO1 - Lesson 1 - Research
LO1 - Lesson 1 - Research
 
LO2 - Lesson 16 - Legal Issues
LO2 - Lesson 16 - Legal IssuesLO2 - Lesson 16 - Legal Issues
LO2 - Lesson 16 - Legal Issues
 
LO2 - Lesson 5 - Purpose
LO2 - Lesson 5 - PurposeLO2 - Lesson 5 - Purpose
LO2 - Lesson 5 - Purpose
 
LO2 - Lesson 10 - Layout
LO2 - Lesson 10 - LayoutLO2 - Lesson 10 - Layout
LO2 - Lesson 10 - Layout
 
LO3 - Lesson 18 - Navigation
LO3 - Lesson 18 - NavigationLO3 - Lesson 18 - Navigation
LO3 - Lesson 18 - Navigation
 
LO2 - Lesson 7 - Survey
LO2 - Lesson 7 - SurveyLO2 - Lesson 7 - Survey
LO2 - Lesson 7 - Survey
 
LO3 - Lesson 22 - Home Page
LO3 - Lesson 22 - Home PageLO3 - Lesson 22 - Home Page
LO3 - Lesson 22 - Home Page
 
LO4 - Lesson 1 - Review
LO4 - Lesson 1 - ReviewLO4 - Lesson 1 - Review
LO4 - Lesson 1 - Review
 
LO4 - Lesson 24 - Feedback
LO4 - Lesson 24 - FeedbackLO4 - Lesson 24 - Feedback
LO4 - Lesson 24 - Feedback
 
LO5 - Lesson 26 - Review
LO5 - Lesson 26 - ReviewLO5 - Lesson 26 - Review
LO5 - Lesson 26 - Review
 
LO3 - Lesson 21 - Page Setup
LO3 - Lesson 21 - Page SetupLO3 - Lesson 21 - Page Setup
LO3 - Lesson 21 - Page Setup
 
LO2 - Lesson 3 - Target Audience
LO2 - Lesson 3 - Target AudienceLO2 - Lesson 3 - Target Audience
LO2 - Lesson 3 - Target Audience
 
Principle of a good web design
Principle of a good web designPrinciple of a good web design
Principle of a good web design
 
International SEO Strategy by Morino Neto
International SEO Strategy by Morino Neto International SEO Strategy by Morino Neto
International SEO Strategy by Morino Neto
 
Seo services-prices
Seo services-pricesSeo services-prices
Seo services-prices
 
B2B SEO in 2020
B2B SEO in 2020B2B SEO in 2020
B2B SEO in 2020
 
SEO Case Studies
SEO Case StudiesSEO Case Studies
SEO Case Studies
 
JR SEO copywriter
JR SEO copywriterJR SEO copywriter
JR SEO copywriter
 
Xebec india pdf jan 2018
Xebec india pdf jan 2018Xebec india pdf jan 2018
Xebec india pdf jan 2018
 
Professional Information with CV
Professional Information with CVProfessional Information with CV
Professional Information with CV
 

Andere mochten auch

Andere mochten auch (20)

LO3 - Lesson 9 - Conventions
LO3 - Lesson 9 - ConventionsLO3 - Lesson 9 - Conventions
LO3 - Lesson 9 - Conventions
 
LO2 - Lesson 4 - Primary Sources
LO2 - Lesson 4 - Primary SourcesLO2 - Lesson 4 - Primary Sources
LO2 - Lesson 4 - Primary Sources
 
LO2 - Lesson 9 - Software
LO2 - Lesson 9 - SoftwareLO2 - Lesson 9 - Software
LO2 - Lesson 9 - Software
 
LO3 - Lesson 7 - File Formats
LO3 - Lesson 7 - File FormatsLO3 - Lesson 7 - File Formats
LO3 - Lesson 7 - File Formats
 
LO3 - Lesson 5 - Script
LO3 - Lesson 5 - ScriptLO3 - Lesson 5 - Script
LO3 - Lesson 5 - Script
 
LO1 - Lesson 6 - Visualisation
LO1 - Lesson 6 - VisualisationLO1 - Lesson 6 - Visualisation
LO1 - Lesson 6 - Visualisation
 
LO2 - Lesson 13 - Colours & Fonts
LO2 - Lesson 13 - Colours & FontsLO2 - Lesson 13 - Colours & Fonts
LO2 - Lesson 13 - Colours & Fonts
 
LO3 - Lesson 4 - Visualisation
LO3 - Lesson 4 - VisualisationLO3 - Lesson 4 - Visualisation
LO3 - Lesson 4 - Visualisation
 
LO2 - Lesson 5 - Secondary Sources
LO2 - Lesson 5 - Secondary SourcesLO2 - Lesson 5 - Secondary Sources
LO2 - Lesson 5 - Secondary Sources
 
Year 12 parents' information evening 2015
Year 12   parents' information evening 2015Year 12   parents' information evening 2015
Year 12 parents' information evening 2015
 
LO1 - Lesson 1 - Introduction
LO1 - Lesson 1 - IntroductionLO1 - Lesson 1 - Introduction
LO1 - Lesson 1 - Introduction
 
LO2 - Lesson 6 - Work Plans
LO2 - Lesson 6 - Work PlansLO2 - Lesson 6 - Work Plans
LO2 - Lesson 6 - Work Plans
 
LO2 - Lesson 2 - Target Audience
LO2 - Lesson 2 - Target AudienceLO2 - Lesson 2 - Target Audience
LO2 - Lesson 2 - Target Audience
 
LO4 - Lesson 2 - Feedback
LO4 - Lesson 2 - FeedbackLO4 - Lesson 2 - Feedback
LO4 - Lesson 2 - Feedback
 
LO1 - Lesson 3 - Research
LO1 - Lesson 3 - ResearchLO1 - Lesson 3 - Research
LO1 - Lesson 3 - Research
 
LO2 - Lesson 13 - Film Classification
LO2 - Lesson 13 - Film ClassificationLO2 - Lesson 13 - Film Classification
LO2 - Lesson 13 - Film Classification
 
LO2 - Lesson 8 - Hardware
LO2 - Lesson 8 - HardwareLO2 - Lesson 8 - Hardware
LO2 - Lesson 8 - Hardware
 
LO1 - Lesson 2 - Mood Boards
LO1 - Lesson 2 - Mood BoardsLO1 - Lesson 2 - Mood Boards
LO1 - Lesson 2 - Mood Boards
 
LO3 - Lesson 3 - Mind Maps
LO3 - Lesson 3 - Mind MapsLO3 - Lesson 3 - Mind Maps
LO3 - Lesson 3 - Mind Maps
 
LO1 - Lesson 3 - Mood Boards
LO1 - Lesson 3 - Mood BoardsLO1 - Lesson 3 - Mood Boards
LO1 - Lesson 3 - Mood Boards
 

Ähnlich wie LO2 - Lesson 11 - Layout

Ninghua Ch3
Ninghua Ch3Ninghua Ch3
Ninghua Ch3
ninghua
 
How to build an efficient website
How to build an efficient websiteHow to build an efficient website
How to build an efficient website
OanaChiva
 

Ähnlich wie LO2 - Lesson 11 - Layout (20)

LO3 - Lesson 19 - Template & CSS
LO3 - Lesson 19 - Template & CSSLO3 - Lesson 19 - Template & CSS
LO3 - Lesson 19 - Template & CSS
 
Mkt460 Week3
Mkt460 Week3Mkt460 Week3
Mkt460 Week3
 
Website analysis basic tools and illustration
Website analysis basic tools and illustrationWebsite analysis basic tools and illustration
Website analysis basic tools and illustration
 
Basic Web Design Principles and Elements
Basic Web Design Principles and ElementsBasic Web Design Principles and Elements
Basic Web Design Principles and Elements
 
MKT 460 Week 3
MKT 460 Week 3MKT 460 Week 3
MKT 460 Week 3
 
Digital Marketing By krishna.pdf
Digital Marketing By krishna.pdfDigital Marketing By krishna.pdf
Digital Marketing By krishna.pdf
 
Websites
WebsitesWebsites
Websites
 
Ninghua Ch3
Ninghua Ch3Ninghua Ch3
Ninghua Ch3
 
Website development company in mumbai
Website development company in mumbaiWebsite development company in mumbai
Website development company in mumbai
 
Web site design
Web site designWeb site design
Web site design
 
Web Site Design,
Web Site Design,Web Site Design,
Web Site Design,
 
The more information Website Design_New.pdf
The more information Website Design_New.pdfThe more information Website Design_New.pdf
The more information Website Design_New.pdf
 
Understanding the Concept of Web Design and Development.pdf
Understanding the Concept of Web Design and Development.pdfUnderstanding the Concept of Web Design and Development.pdf
Understanding the Concept of Web Design and Development.pdf
 
Website world
Website worldWebsite world
Website world
 
LO3 - Lesson 20 - Template
LO3 - Lesson 20 - TemplateLO3 - Lesson 20 - Template
LO3 - Lesson 20 - Template
 
Java Unit 5(part 1)
Java Unit 5(part 1)Java Unit 5(part 1)
Java Unit 5(part 1)
 
How to build an efficient website
How to build an efficient websiteHow to build an efficient website
How to build an efficient website
 
Website usability ideas for business growth
Website usability ideas for business growthWebsite usability ideas for business growth
Website usability ideas for business growth
 
ًWebsite_development and design
ًWebsite_development and designًWebsite_development and design
ًWebsite_development and design
 
Basics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the webBasics of Web Design: A primer of what you need to know to design for the web
Basics of Web Design: A primer of what you need to know to design for the web
 

Mehr von The English Martyrs School & Sixth Form College

Mehr von The English Martyrs School & Sixth Form College (20)

UCAS Finance Presentation
UCAS Finance PresentationUCAS Finance Presentation
UCAS Finance Presentation
 
UCAS Parents Information
UCAS Parents InformationUCAS Parents Information
UCAS Parents Information
 
LO1 - Lesson 1 - Use of Graphics
LO1 - Lesson 1 - Use of GraphicsLO1 - Lesson 1 - Use of Graphics
LO1 - Lesson 1 - Use of Graphics
 
LO4 - Lesson 4 - Feedback
LO4 - Lesson 4 - FeedbackLO4 - Lesson 4 - Feedback
LO4 - Lesson 4 - Feedback
 
LO4 - Lesson 3 - Feedback
LO4 - Lesson 3 - FeedbackLO4 - Lesson 3 - Feedback
LO4 - Lesson 3 - Feedback
 
LO4 - Lesson 2 - Review
LO4 - Lesson 2 - ReviewLO4 - Lesson 2 - Review
LO4 - Lesson 2 - Review
 
LO4 - Lesson 1 - Testing
LO4 - Lesson 1 - TestingLO4 - Lesson 1 - Testing
LO4 - Lesson 1 - Testing
 
LO3 - Lesson 6 - Algorithms
LO3 - Lesson 6 - AlgorithmsLO3 - Lesson 6 - Algorithms
LO3 - Lesson 6 - Algorithms
 
LO3 - Lesson 5 - Popups
LO3 - Lesson 5 - PopupsLO3 - Lesson 5 - Popups
LO3 - Lesson 5 - Popups
 
LO3 - Lesson 4 - Pickups
LO3 - Lesson 4 - PickupsLO3 - Lesson 4 - Pickups
LO3 - Lesson 4 - Pickups
 
LO3 - Lesson 3 - Characters
LO3 - Lesson 3 - CharactersLO3 - Lesson 3 - Characters
LO3 - Lesson 3 - Characters
 
LO3 - Lesson 2 - Door Triggers
LO3 - Lesson 2 - Door TriggersLO3 - Lesson 2 - Door Triggers
LO3 - Lesson 2 - Door Triggers
 
LO4 - Lesson 25 - Testing
LO4 - Lesson 25 - TestingLO4 - Lesson 25 - Testing
LO4 - Lesson 25 - Testing
 
LO3 - Lesson 23 - Contact Page
LO3 - Lesson 23 - Contact PageLO3 - Lesson 23 - Contact Page
LO3 - Lesson 23 - Contact Page
 
LO3 - Lesson 1 - Level Map
LO3 - Lesson 1 - Level MapLO3 - Lesson 1 - Level Map
LO3 - Lesson 1 - Level Map
 
Predict The Score Leaderboard 2014
Predict The Score Leaderboard 2014Predict The Score Leaderboard 2014
Predict The Score Leaderboard 2014
 
LO2 - Lesson 8 - Feedback
LO2 - Lesson 8 - FeedbackLO2 - Lesson 8 - Feedback
LO2 - Lesson 8 - Feedback
 
LO2 - Lesson 7 - Feedback
LO2 - Lesson 7 - FeedbackLO2 - Lesson 7 - Feedback
LO2 - Lesson 7 - Feedback
 
LO2 - Lesson 6 - Legal Issues
LO2 - Lesson 6 - Legal IssuesLO2 - Lesson 6 - Legal Issues
LO2 - Lesson 6 - Legal Issues
 
LO2 - Lesson 5 - Flow Diagram
LO2 - Lesson 5 - Flow DiagramLO2 - Lesson 5 - Flow Diagram
LO2 - Lesson 5 - Flow Diagram
 

Kürzlich hochgeladen

Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
KarakKing
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
AnaAcapella
 

Kürzlich hochgeladen (20)

Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdf
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701
 
Spatium Project Simulation student brief
Spatium Project Simulation student briefSpatium Project Simulation student brief
Spatium Project Simulation student brief
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Fostering Friendships - Enhancing Social Bonds in the Classroom
Fostering Friendships - Enhancing Social Bonds  in the ClassroomFostering Friendships - Enhancing Social Bonds  in the Classroom
Fostering Friendships - Enhancing Social Bonds in the Classroom
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
Dyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptxDyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptx
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
 

LO2 - Lesson 11 - Layout

  • 2. Lesson Goals  Know key features of the website layout  Understand how to structure individual pages  Be able to plan the internal pages of your website #user #needs #layout
  • 3. Assessment Criteria  The assessment criteria for this part of the unit is as follows: Detailed planning for the design and function of the website considering how information flows and pages link. Justify choices in relation to target audience appeal and usability. Relevant legal and ethical issues considered. D1 P2 Plan the development of a multi-page website: • Purpose • Target Audience • Content • Production Plan M1 LO2 – Plan the development of a multipage website Consider visitor needs and how they will navigate the website. The info provided on a budget, launch date and timescale is realistic. Some consideration to relevant revenue potential.
  • 4. What will a user expect? Think about the whole website experience…
  • 5. Technical Needs Be able to plan website pages Understand audience needs  A typical user on any of these sites may be looking for the following:  Navigation – Easy to get from page to page  Flow – Obvious which bit comes next  Loading – Relatively quick load times  Access – Site accessible to disabled users  Consistency – A clear style across all pages  Browsers – Displays correctly in all browsers  Colours – Effective contrasting colour scheme  Form – Allowing user interaction e.g. Contact  Planning website pages effectively can ensure you adhere to each of these considerations. #user #needs #layout
  • 6. Page Layout Identify the similarities between all four web pages…
  • 11. Template What webpage elements are included on a template?
  • 12. Templates Be able to plan website pages Understand audience needs  A template can help you to design a consistent theme for all of your web pages.  The template should include all of the elements of your website that you want to appear in the same position on every page.  All other information will go into editable regions which would be different for every page depending on each page’s content. #user #needs #layout
  • 13. Editable Region This area would contain any information relevant to the individual page. This area is not for information that would go onto every page as that would be part of your template for the webpages. Site Template
  • 14. Your Task Be able to plan website pages Understand audience needs  Use mybalsamiq to design the internal pages of your website considering the needs of your target audience.  Your site should use a template and include the following features:  Navigation  Information Flow  Consistency  Good Content  Use the markup section to add notes explaining your designs. #user #needs #layout