Designing a Website

Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Assignment 4 (Reminder)
• As a trainee at YellowZebra you have
been asked by your manager to design
and create a small interactive website to
demonstrate your creativity and
technical skills in web design and
development.
• Your website must have a minimum of 5
pages but you have some freedom over
what the site is about.
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Your design should include:
•
•
•
•
•
•

User Requirements
Website Ideas
Structure Diagram
Sketches of layouts
File Structure
Project Plan

Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Your design should include:
•
•
•
•
•
•

User Requirements
Website Ideas
Structure Diagram
Sketches of layouts
File Structure
Project Plan

Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Activity 2 – User Requirements
• The purpose of the • The style of the
website
website
– level of language to
• The target audience
– gender
– age
– economic groups
– geographic location
– Etc.

use
– types and size of
graphics,
– colours,
– fonts and sizes,
– layout

• A list of features that
should be included
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
The Purpose of the Site
• What does the client want to do? E.g.
– Sell a product
– Raise awareness of an issue
– Information about product/service/event
– Entertainment
– Build Connections/relationships

• Also, what will the end user want from
the website? Hint: it could be very
different!
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
The Target Audience
• Closely linked to the purpose!
• Try to narrow it down without needlessly
excluding or being unpleasantly
stereotypical
• Think about:
– gender
– age
– economic groups
– geographic location
– Etc.
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
The Style of the Website
• Could be written up
• Moodboards might
be better for at least
some of this?

• Include:
– level of language to
use
– types and size of
graphics,
– colours,
– fonts and sizes,
– layout

Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Your design should include:
•
•
•
•
•
•

User Requirements
Website Ideas
Structure Diagram
Sketches of layouts
File Structure
Project Plan

Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
File Structure
• Don’t worry about links between pages
at this stage
• Just list the files you will need
• How will they be organised into folders?
• Will you also have a folder to keep
images separate from html/css?
• This could be updated later with more
detail of exactly what images & CSS you
might need
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Your design should include:
•
•
•
•
•
•

User Requirements
Website Ideas
Structure Diagram
Sketches of layouts
File Structure
Project Plan

Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Making a Website
• We’re not even going to think about
creating your actual website for the
project until after the New Year
• BUT we need to practice using the
tools so we can design pages we are
actually able to make!
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Software: Serif WebPlus

Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Santa Global
• Santa’s trying to get into the 21st
Century - he’s trying to get online
• Create a small website for him
• His elves have found a few simple
pictures you could use, but
feel free to find more
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

More Related Content

PPTX
Unit 28 Week 10
PPTX
Unit 28 Week 8
PPTX
Unit 28 Week 1
PPTX
Unit 28 Week 5
PPTX
Unit 28 Week 3
PPTX
Unit 28 Week 14
PPTX
Unit 28 Week 6
PPTX
Unit 28 Week 9
Unit 28 Week 10
Unit 28 Week 8
Unit 28 Week 1
Unit 28 Week 5
Unit 28 Week 3
Unit 28 Week 14
Unit 28 Week 6
Unit 28 Week 9

What's hot (17)

PPTX
Unit 28 Week 4
PPTX
Unit 28 Week 2
PPTX
Unit 28 Week 13
PPTX
Unit 28 Week 15
PPTX
Unit 28 Week 12
PPTX
Unit 28 Week 11
PPTX
Pofo – Creative Portfolio and Blog WordPress Theme
PDF
Sallie Goetsch: Making the Events Calendar Sit Up and Beg
PPTX
Web developers (austin ramer)
PDF
WordPress Page builders
PPTX
WordCamp Miami- How to Hire a Web Firm to Build Your Website
KEY
WordPress Tips and Tricks (DFW Meetup)
PDF
WordPress for Business Sites - ConvergeSouth - October 2011
PPTX
WordPress A - Z for beginners
RTF
Gosaiinfotech Resume
PPT
Creating Beautiful Wordpress Sites
PDF
Rob La Gatta; Making the Events Calendar Sit Up and Beg
Unit 28 Week 4
Unit 28 Week 2
Unit 28 Week 13
Unit 28 Week 15
Unit 28 Week 12
Unit 28 Week 11
Pofo – Creative Portfolio and Blog WordPress Theme
Sallie Goetsch: Making the Events Calendar Sit Up and Beg
Web developers (austin ramer)
WordPress Page builders
WordCamp Miami- How to Hire a Web Firm to Build Your Website
WordPress Tips and Tricks (DFW Meetup)
WordPress for Business Sites - ConvergeSouth - October 2011
WordPress A - Z for beginners
Gosaiinfotech Resume
Creating Beautiful Wordpress Sites
Rob La Gatta; Making the Events Calendar Sit Up and Beg

Similar to Unit 28 Week 7 (20)

PPT
Website Introduction
PPT
Chapter5
PDF
Module 1 Web design & Development Lexington Minuteman
PDF
Tech 802: Web Design Part 2
PPT
Website designing company in delhi
PDF
Chapter 2 | Website design & development - pf
PDF
Chapter 2 | Website design & development
PDF
web development materials enhancement as computer technician
PDF
Chapter 4 Web design tech in formation technology msc class .pdf
PDF
Digital Content for Business
PPT
PPTX
Java Unit 5(part 1)
PPT
PPTX
Beginning Site Design
PDF
DOCX
Web project – Web SiteConsistency with Web Design Site PlanYou.docx
DOC
web design course description.doc
PPT
Website world
DOCX
Project PlanPlan the website for your project by completing th.docx
PPTX
Web Concepts_Introduction to Website Planning
Website Introduction
Chapter5
Module 1 Web design & Development Lexington Minuteman
Tech 802: Web Design Part 2
Website designing company in delhi
Chapter 2 | Website design & development - pf
Chapter 2 | Website design & development
web development materials enhancement as computer technician
Chapter 4 Web design tech in formation technology msc class .pdf
Digital Content for Business
Java Unit 5(part 1)
Beginning Site Design
Web project – Web SiteConsistency with Web Design Site PlanYou.docx
web design course description.doc
Website world
Project PlanPlan the website for your project by completing th.docx
Web Concepts_Introduction to Website Planning

More from MrJRogers (16)

PPTX
L6 diary management
PPTX
L4 proofs
PPTX
L3 cookies
PPTX
L2 identifying photos
PPTX
L1 intro & hardware
PPTX
Image reflections intro
PPTX
Dame Elizabeth Cadbury Year 8 ICT Homework Project Introduction
PPTX
Dame Elizabeth Cadbury Year 8 ICT Homework Project
PPTX
Unit 3 assessment 3 lesson
PPT
Types of Software - Y9 Computing
PPTX
Types & sources of info
PPTX
Databases & spreadsheets
PPTX
Lesson 7
PPTX
Lesson 5
PPTX
Lesson 4
PPTX
Lesson 3
L6 diary management
L4 proofs
L3 cookies
L2 identifying photos
L1 intro & hardware
Image reflections intro
Dame Elizabeth Cadbury Year 8 ICT Homework Project Introduction
Dame Elizabeth Cadbury Year 8 ICT Homework Project
Unit 3 assessment 3 lesson
Types of Software - Y9 Computing
Types & sources of info
Databases & spreadsheets
Lesson 7
Lesson 5
Lesson 4
Lesson 3

Recently uploaded (20)

PDF
zbrain.ai-Scope Key Metrics Configuration and Best Practices.pdf
PDF
CCUS-as-the-Missing-Link-to-Net-Zero_AksCurious.pdf
PPTX
Build automations faster and more reliably with UiPath ScreenPlay
PDF
Transform-Your-Supply-Chain-with-AI-Driven-Quality-Engineering.pdf
PDF
The-Future-of-Automotive-Quality-is-Here-AI-Driven-Engineering.pdf
PPTX
Rise of the Digital Control Grid Zeee Media and Hope and Tivon FTWProject.com
PPTX
Blending method and technology for hydrogen.pptx
PDF
A hybrid framework for wild animal classification using fine-tuned DenseNet12...
PPTX
AQUEEL MUSHTAQUE FAKIH COMPUTER CENTER .
PDF
Co-training pseudo-labeling for text classification with support vector machi...
PPTX
Report in SIP_Distance_Learning_Technology_Impact.pptx
PDF
CXOs-Are-you-still-doing-manual-DevOps-in-the-age-of-AI.pdf
PDF
Launch a Bumble-Style App with AI Features in 2025.pdf
PDF
Altius execution marketplace concept.pdf
PDF
Streamline Vulnerability Management From Minimal Images to SBOMs
PDF
Decision Optimization - From Theory to Practice
PDF
CEH Module 2 Footprinting CEH V13, concepts
PDF
Connector Corner: Transform Unstructured Documents with Agentic Automation
PPTX
Information-Technology-in-Human-Society.pptx
PDF
giants, standing on the shoulders of - by Daniel Stenberg
zbrain.ai-Scope Key Metrics Configuration and Best Practices.pdf
CCUS-as-the-Missing-Link-to-Net-Zero_AksCurious.pdf
Build automations faster and more reliably with UiPath ScreenPlay
Transform-Your-Supply-Chain-with-AI-Driven-Quality-Engineering.pdf
The-Future-of-Automotive-Quality-is-Here-AI-Driven-Engineering.pdf
Rise of the Digital Control Grid Zeee Media and Hope and Tivon FTWProject.com
Blending method and technology for hydrogen.pptx
A hybrid framework for wild animal classification using fine-tuned DenseNet12...
AQUEEL MUSHTAQUE FAKIH COMPUTER CENTER .
Co-training pseudo-labeling for text classification with support vector machi...
Report in SIP_Distance_Learning_Technology_Impact.pptx
CXOs-Are-you-still-doing-manual-DevOps-in-the-age-of-AI.pdf
Launch a Bumble-Style App with AI Features in 2025.pdf
Altius execution marketplace concept.pdf
Streamline Vulnerability Management From Minimal Images to SBOMs
Decision Optimization - From Theory to Practice
CEH Module 2 Footprinting CEH V13, concepts
Connector Corner: Transform Unstructured Documents with Agentic Automation
Information-Technology-in-Human-Society.pptx
giants, standing on the shoulders of - by Daniel Stenberg

Unit 28 Week 7

  • 1. Designing a Website Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  • 2. Assignment 4 (Reminder) • As a trainee at YellowZebra you have been asked by your manager to design and create a small interactive website to demonstrate your creativity and technical skills in web design and development. • Your website must have a minimum of 5 pages but you have some freedom over what the site is about. Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  • 3. Your design should include: • • • • • • User Requirements Website Ideas Structure Diagram Sketches of layouts File Structure Project Plan Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  • 4. Your design should include: • • • • • • User Requirements Website Ideas Structure Diagram Sketches of layouts File Structure Project Plan Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  • 5. Activity 2 – User Requirements • The purpose of the • The style of the website website – level of language to • The target audience – gender – age – economic groups – geographic location – Etc. use – types and size of graphics, – colours, – fonts and sizes, – layout • A list of features that should be included Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  • 6. The Purpose of the Site • What does the client want to do? E.g. – Sell a product – Raise awareness of an issue – Information about product/service/event – Entertainment – Build Connections/relationships • Also, what will the end user want from the website? Hint: it could be very different! Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  • 7. The Target Audience • Closely linked to the purpose! • Try to narrow it down without needlessly excluding or being unpleasantly stereotypical • Think about: – gender – age – economic groups – geographic location – Etc. Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  • 8. The Style of the Website • Could be written up • Moodboards might be better for at least some of this? • Include: – level of language to use – types and size of graphics, – colours, – fonts and sizes, – layout Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  • 9. Your design should include: • • • • • • User Requirements Website Ideas Structure Diagram Sketches of layouts File Structure Project Plan Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  • 10. File Structure • Don’t worry about links between pages at this stage • Just list the files you will need • How will they be organised into folders? • Will you also have a folder to keep images separate from html/css? • This could be updated later with more detail of exactly what images & CSS you might need Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  • 11. Your design should include: • • • • • • User Requirements Website Ideas Structure Diagram Sketches of layouts File Structure Project Plan Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  • 12. Making a Website • We’re not even going to think about creating your actual website for the project until after the New Year • BUT we need to practice using the tools so we can design pages we are actually able to make! Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  • 13. Software: Serif WebPlus Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
  • 14. Santa Global • Santa’s trying to get into the 21st Century - he’s trying to get online • Create a small website for him • His elves have found a few simple pictures you could use, but feel free to find more Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20