BTEC L3 IT Unit 28 - week 7 lesson on designing and making websites

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