g053 - lecture 07 designing your web pages mr c johnston ict teacher
Post on 01-Jan-2016
218 Views
Preview:
TRANSCRIPT
G053 - Lecture 07
Designing Your Web Pages
Mr C JohnstonICT Teacher
www.computechedu.co.uk
Session Objectives
Understand different tools and techniques which can be used to design a website
Understand the benefits of using a template within website design,
Know common layouts for websites, Understand best practice for template design and level
of annotation required, Produce a template design for your website.
Design Stages
1. Initial Ideas
2. Template Design – including defining house style
3. Storyboard Designs
4. Structure Diagram
Initial Ideas
Recording all your ideas down no matter how strange and then considering which to use,
Spider diagram / mind map is useful – can be either paper based or created using software,
Freemind and Easy Draw software both allow simple diagrams to be created and are available from the G048 page.
Mind map for a website homepage
Design Stages
1. Initial Ideas
2. Template Design – including defining house style
3. Storyboard Designs
4. Structure Diagram
What is a template?? Templates are used to ensure all pages on a website are
consistent, They show the layout, colours and the position of graphics and
text which will appear on each page, You only need to make your template once – then its used as a
starting point for all other pages, They save time as you don’t have to start each page from
scratch and if a change to the template is made all pages change,
Before you can design your template you need to decide upon a layout for your pages – what will be fixed and what will change on each page.
Common Webpage Layouts
Navigation BarArea For ContentHeader – Company Name / Logo
Footer – Contact details / terms and conditions
My Template Design
Take a piece of A3 paper, hole punch and fold off centre so it will fit in your folder,
Draw around a piece of A4 to create an outline which you template can be drawn inside.
A3 Paper
Fold paper in half off centre
Draw round a piece of A4 to create an outline for your template
Fold paper in half off centre
Draw the Design
Ensure your design is detailed enough so somebody else could make it – remember only items which will appear on every page should be included.
Add Annotation
Main content of each page will go here
Colour scheme used – Green, white and red because these are the colours of the Italian flag and pizzas come from Italy.
Menu bar with hyperlinks – modern shape for buttons to give a trendy feel – buttons have roll over effect and turn black background with green writing when mouse is over so know which option is about to be pressed.
Small pictures of food which look tasty – to tantalise taste buds, remind customers what we sell and encourage them to purchase
Depth of Annotation Required
Mark Band #1 Limited annotation with little justification for the choice of font
style, graphics, colour and hyperlinks planned. Mark Band #2
Some annotation with justification for the choice of font style, graphics, colour and hyperlinks planned.
Mark Band #3 Full annotation which clearly explains the choice of font style,
graphics, colour and hyperlinks planned.
!You may want to make these notes on a separate sheet so you have enough room for the level of detail required for band 3. Another suggestion could be to type the notes in text boxes, cut them out and glue them onto your designs
Topic Task
Create a template design for your website – use colours and annotate in enough depth to achieve your target grade.
You will need to present your plan to the rest of the group so use your time wisely.
Design a page layout for each of your proposed pages in your site.
!Remember to include ideas from task a – revisit the websites if you have forgotten.
Final Structure Diagram
Shows how all the pages will link together, Most people will have a menu bar so every page will
link to every other page to form a mesh, Needs to also include any links, email, and databases
on your site Diagram is made up of boxes for pages and arrows to
show what links to what – take care with the arrow heads – some will be double as can go
back and forth, other will be one way
Example
HOME PAGE
ORDER PAGE
MENU PAGE
ABOUT PAGE
1. Draw box for each page with the page name in2. Link each page with double arrow – start in top left and work around clockwise3. Add one way arrows for any external links and email addresses4. Add any database connectivity – each form will have its own process script and
database file
INTERNETINTERNET
www.goats.co.ukEmail
ORDERFILE
process.asp
In a mesh structure number of arrows from each page should
be:NUMBER OF PAGES -1
Using the method shown on this slide draw a final structure diagram showing your website
www.maps.co.uk
Topic Task
Create a final structure diagram for your site. Lay the diagram out neatly so its clear.
top related