1. Web Design
J Thrasher
2011
Monday, 7 February 2011

2. Researching Web Sites
START -- Research Purposes and Functions of web Sites (Brainstorm)
Investigate Web Sites that are similar - TV Channels (E4, Ch4, Dave, FX, Nick or Boomerang)
Investigate how audiences use the internet Check the blog!
Identify bad sites, using www.websitesthatsuck.com - to work out what NOT to do
GETTING GOING --Learn HOW to design a site overview - it has to be APPROVED before you can continue
Follow the Instructions on how to use iWeb/Attend the class
Use the guides online, google and Youtube if you get stuck and your teacher is busy :-)
Make sure you line things up and maintain coherence - Fonts should be the same or similar, colours should go
together - you’re creating a BRAND IMAGE so it should be recognisable.
Monday, 7 February 2011

3. Planning for design
- Key Ideas
Site Level
Deep or wide?
Navigability
Page Level
Colour Theory
Layering
Pictures and shapes
Multimedia
Video
Sound
Monday, 7 February 2011

4. Home
Why
About AS M A2 M BTEC Prac Study Blogs & Resou
Study Topics Links skills
Us @
Yr12 Yr13 Media Prod Forums rces
Detail Why
about study
Dept explain
These pages all have main pages with sub pages, all of which
Page with have information and sub pages with downloads
more links
Other links from page e.g. NMT, Sitcom, Video
Games and Game Culture, Textual Analysis-
Action/Adventure, Institutions, Trips, events and
exams, Discussions, Course outline & specs
Hwk,
Assignme
nts &
Support
Pract
Prod AS DOWNLOADS ON PAGE
guidance
Wire in
the
Blood
Advice Schedul
Bond on Pract es/past
Prod papers Yr12 Production Guide, Producing Magazines for Practical
Work, Thriller Opening Sequences etc (all .doc) How
to...music for film, Storyboarding - how to! etc (all .pdf)
Example of deep design using sub groups to ‘hide’ depth; This plan is
for a Media Department site
Monday, 7 February 2011

5. Colour Theory
What is colour theory?
Why is it important?
Monday, 7 February 2011

6. Basic Colour Theory
Monday, 7 February 2011

7. Monday, 7 February 2011

8. Complementary & Analogous
Colours
Monday, 7 February 2011

9. Active colour
Monday, 7 February 2011

10. Combining Colour
Monday, 7 February 2011

11. Monday, 7 February 2011

12. Analogous Colour
Monday, 7 February 2011

13. Good Web Sites...
This link explains the basics of colour theory;
http://www.colourmatters.com/colourtheory.html
This is the best summary resource and is on wikipedia;
http://en.wikipedia.org/wiki/Colour_theory
This link is specifically aimed at applying colour theory to web design;
http://www.coloursontheweb.com/
This has the most wonderful SPIN function where you can press a spin button and it generates three
working colours. You can then jiggle them around to see the affects when changing them between text,
background or complement. This will give you hours of endless fun and lots of ideas for your own sites.
Also try http://www.worqx.com/color/index.htm - source for many of my slides
Monday, 7 February 2011

14. Layering...
Monday, 7 February 2011

15. Monday, 7 February 2011

16. Monday, 7 February 2011

17. Monday, 7 February 2011

18. Monday, 7 February 2011

19. Monday, 7 February 2011

20. Sound
Just a few points here...
Music seems like a good idea but think about how you feel about it when you’re browsing a site and
music comes on! Unless it’s a music web site or the user can choose to click for sound I wouldn’t
bother.
Think USER, USER, USER!
If you must have music, make sure you/the user can turn it off!
Think about copyright
Think about page loading time
Monday, 7 February 2011

21. Other Key Points to consider
Buttons, links and Hypertext
Mouse Over - clarity and labels
Events - what happens when and how to stop it!
Home - Nav Bar
Load times
Differing browsers, screen size, resolution etc
Keep it simple
Coherence and ‘Brand Identity’
Monday, 7 February 2011

22. Monday, 7 February 2011

23. Monday, 7 February 2011

24. Monday, 7 February 2011

25. Monday, 7 February 2011

26. Monday, 7 February 2011

27. Traversals/Trajectories
! - Testing your site
Look at how you want your audience to navigate around your site
Check that the site navigates as you want
How does one get around? How do you exit? Return to home page? Are your links obvious? How
easily can you link out of the site and back?
To ensure your site works, you MUST try it out on others and record their paths
Ask your testers about their experiences and comments
It is absolutely vital you test you site on others who do not know about your site - they will quickly
find errors and faults in your navigation
Monday, 7 February 2011

28. After the design - Evaluation
Before you’ve finished and you’re writing your evaluation (i.e. in the middle of production), you should try a
couple of each other’s web sites for errors - you know how to navigate your own site - do others? They’ll spot
broken links and dead ends and have good advice on the experience.
After all the checks and revisions, when the site is “finished” , a second check of how others navigate your
site is always important, nay imperative! There will/might still be mistakes!
Don’t forget to check trajectories - are the users visiting the places you want them to go? How are they
actually using your site? Do you want to alter this? How?
All these checks and a reference to the relevant theory in the production log are all VERY useful and link
practical skills, research, audience research and evaluation
make sure you keep notes of all your changes and revisions as you goa long and write them in your
sketchbooks - this is where a lot of the MARKS come from!!
Monday, 7 February 2011

29. Key Terms
Coherence - Does your site hold together - does it all look similar?
Traversal - How do you get around the site?
Trajectory - (How) can your users jump across media and other sites?
Hypertextual depth - How deep are your links? Do you have to click
lots of thinsg to get to content?
Monday, 7 February 2011

30. Demand/Offer - what are you offering? what is your audience
demanding?
Hypermodal Connections - What links have you got to other sites and
web content?
Orientation - How do you get around your site?
Choices/Constraints - What choices did you make and why? What
could you NOT do that you wanted to?
Shapes of text, site, pictures
Anchorage - Writing that secures meaning and makes it clear to the
audience
Monday, 7 February 2011

31. Static and Dynamic elements - Mix of moving and non-moving
elements? Not too much?
Horizontal and Vertical elements - How are you going to arrange
your key elements in your site?
Interpretation - What does your audience think about your site (what it
is for? How do they use it?)
Motivation - What meanings did you aim for? Why did you use
particular colours etc
Monday, 7 February 2011

32. and finally...
Don’t Panic!
You can do it!
GOOD LUCK
Extra Info in packs...
jthrasher@westhatch.essex.sch.uk
Monday, 7 February 2011