Web Design                             J Thrasher                                2011Monday, 7 February 2011
Researching Web Sites               START -- Research Purposes and Functions of web Sites (Brainstorm)               Inves...
Planning for design         - Key Ideas              Site Level                   Deep or wide?                   Navigabi...
Home                    Why     About                    AS M                   A2 M   BTEC                     Prac      ...
Colour Theory                    What is colour theory?                    Why is it important?Monday, 7 February 2011
Basic Colour TheoryMonday, 7 February 2011
Monday, 7 February 2011
Complementary & Analogous           ColoursMonday, 7 February 2011
Active colourMonday, 7 February 2011
Combining ColourMonday, 7 February 2011
Monday, 7 February 2011
Analogous ColourMonday, 7 February 2011
Good Web Sites...    This link explains the basics of colour theory;    http://www.colourmatters.com/colourtheory.html    ...
Layering...Monday, 7 February 2011
Monday, 7 February 2011
Monday, 7 February 2011
Monday, 7 February 2011
Monday, 7 February 2011
Monday, 7 February 2011
Sound             Just a few points here...                    Music seems like a good idea but think about how you feel a...
Other Key Points to consider                 Buttons, links and Hypertext                 Mouse Over - clarity and labels ...
Monday, 7 February 2011
Monday, 7 February 2011
Monday, 7 February 2011
Monday, 7 February 2011
Monday, 7 February 2011
Traversals/Trajectories           ! - Testing your site                Look at how you want your audience to navigate arou...
After the design - Evaluation                Before you’ve finished and you’re writing your evaluation (i.e. in the middle...
Key Terms                    Coherence - Does your site hold together - does it all look similar?                    Trave...
Demand/Offer - what are you offering? what is your audience                    demanding?                    Hypermodal Co...
Static and Dynamic elements - Mix of moving and non-moving                    elements? Not too much?                    H...
and finally...                   Don’t Panic!                   You can do it!                   GOOD LUCK                ...
Upcoming SlideShare
Loading in …5
×

Web design beginning

480 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
480
On SlideShare
0
From Embeds
0
Number of Embeds
49
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web design beginning

  1. 1. Web Design J Thrasher 2011Monday, 7 February 2011
  2. 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. 3. Planning for design - Key Ideas Site Level Deep or wide? Navigability Page Level Colour Theory Layering Pictures and shapes Multimedia Video SoundMonday, 7 February 2011
  4. 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 siteMonday, 7 February 2011
  5. 5. Colour Theory What is colour theory? Why is it important?Monday, 7 February 2011
  6. 6. Basic Colour TheoryMonday, 7 February 2011
  7. 7. Monday, 7 February 2011
  8. 8. Complementary & Analogous ColoursMonday, 7 February 2011
  9. 9. Active colourMonday, 7 February 2011
  10. 10. Combining ColourMonday, 7 February 2011
  11. 11. Monday, 7 February 2011
  12. 12. Analogous ColourMonday, 7 February 2011
  13. 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 slidesMonday, 7 February 2011
  14. 14. Layering...Monday, 7 February 2011
  15. 15. Monday, 7 February 2011
  16. 16. Monday, 7 February 2011
  17. 17. Monday, 7 February 2011
  18. 18. Monday, 7 February 2011
  19. 19. Monday, 7 February 2011
  20. 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 timeMonday, 7 February 2011
  21. 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. 22. Monday, 7 February 2011
  23. 23. Monday, 7 February 2011
  24. 24. Monday, 7 February 2011
  25. 25. Monday, 7 February 2011
  26. 26. Monday, 7 February 2011
  27. 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 navigationMonday, 7 February 2011
  28. 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. 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. 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 audienceMonday, 7 February 2011
  31. 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 etcMonday, 7 February 2011
  32. 32. and finally... Don’t Panic! You can do it! GOOD LUCK Extra Info in packs... jthrasher@westhatch.essex.sch.ukMonday, 7 February 2011

×