The document provides instructions for an assignment to design and build a small website. It lists the required elements of the design, which include user requirements, website ideas, a structure diagram, sketches of layouts, file structure, and a project plan. The design elements give trainees guidance on demonstrating their technical skills and creativity in web design.

1. Keep on Designing
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. Writing about the Style
of the Website
• This is in addition to the
moodboards you have
done
• It’s about describing the
feel as well as the look
of the website – setting
out the goals you will
achieve
• 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

6. File Structure
• Before Christmas you worked on this
• You just listed the files you will need
• Do you need to update this or add
anything? You can keep updating as
we go
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

7. Example
•
•
•
•
•
•
index.htm
youth-teams.htm
senior-team.htm
fixtures.htm
history.htm
Images (folder)
– Club-logo.png
– Cup-winners.jpg
– Etc…
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

8. Structure Diagram
• This is all about how webpages link
up to each other
• Start with index.htm in the middle
• Then add the main pages (that will
be on the main menu) as they will all
link to each other
• Finally add any pages that are linked
from only one page
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

9. Site Map
• To plan out the links between sites
• Do all link to all the others?
• Are there key ‘central’ pages that link
to a number of others?
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

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

11. Project plan
• Some parts of creating a website are
sequential while others can be parallel
• Sequential means one at a time, one after
another – you can’t start the second until
the first is finished
– E.g. Setting up folders before creating web
pages
• Parallel means both are happening
alongside each other
– E.g. finding images to use while creating web
pages
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

12. Gantt charts
• Gantt charts help us plan, especially
when there’s a mix of parallel and
sequential tasks
• A line represents each task along a
timeline, labelled and carefully
planned
• Search for some examples
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

13. Key Dates
16 Jan
23 Jan
30 Jan
06 Feb
13 Feb
Web design (+ A6 advanced internet architecture)
Learning skills to create website
Creating the website
Creating the website
Creating the website (+ A7 user access)
20 Feb
27 Feb
Half term
Creating the website
06 Mar
13 Mar
20 Mar
Creating the website
A8 Review
A8 Review
Image from: forget testing and time for end-user feedback!
Don’t http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

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

15. Sketches and Wireframes
• I taught you that these are two
different things
• However, for the assignment I’m
prepared to accept a mix of both
• Some must be hand-drawn, however
rough
• You may also want to sketch ideas for
logos, images etc.
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20