Web design beginning
- 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