@shellfishB | @tinnitusprotect #webteachingday Shelley Bartlette Canterbury Christ Church University (School of Media, Art and Design).
Web Design Teaching - Sharing Effective Tools and Techniques
Aug 15, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
- 1. @shellfishB |#webteachingday Shelley Bartlette Canterbury Christ Church University (School of Media, Art and Design).
- 2. #webteachingday Sharing Effective Tools and Practice. @shellfishB |
- 3. #webteachingday @CCCU Broadstairs campus @shellfishB |
- 4. #webteachingday We are a very small team Teaching around 25 FTEs per year group Shelley Bartlette Teaches all the Web Alan Meades Teaches all the Theory Kate McLean Teaches Graphic Design @shellfishB |
- 5. #webteachingday Context: BA Graphic Design BA Web Design @shellfishB |
- 6. #webteachingday When I started teaching web 80% of my students work was dreadful! @shellfishB |
- 7. #webteachingday And this was mostly down to me! @shellfishB | #how #whydonttheygetthis #teachingwebishard #itsallmyfault #yuck #time4adifferentjob #grrrrrr #why #howdoiteachthisstuff
- 8. #webteachingday Level 4 : year 1 Design for Web (12 weeks taught 4 hours per week). @shellfishB |
- 9. #webteachingday Web is compulsory in the first year of study. @shellfishB |
- 10. #webteachingday At the start of the module most students say web intimidates them. oh go ongive it a try..you know more about this stuff than you think! this web thing is too hard I dont want to do it! Hurdles: only 1 in 15 of my students has ever tinkered with web design/code and many of them arent sure they even want to! @shellfishB |
- 11. #webteachingday #5 things have improved the quality of student work. @shellfishB |
- 12. #webteachingday #1 websites that suck http://www.webpagesthatsuck.com/ @shellfishB | As web users you know more about web than you think!
- 13. #webteachingday #1 websites that suck @shellfishB |
- 14. #webteachingday Students sucky list 1. Hard to read text 2. Too many links 3. Too many typefaces 4. Too many colours 5. Splash pages 6. Too much text 7. Inconsistent design 8. Poorly structured content 9. Confusing whats site about? 10. Navbar placement inconsistent 11. Mystery meat 12. Irrelevant images 13. Poor quality images 14. No hierarchy of information 15. No link to home 16. Too much content (busy) 17. Pointless animation 18. Just because you can. 19. Default styles 20. Looks like a link but isnt 21. Slow to load @shellfishB |
- 15. #webteachingday #2 whatfont tool http://chengyinliu.com/whatfont.html @shellfishB | Theory: Getting to grips with, and appreciation for typography.
- 16. #webteachingday whatfont tool: http://chengyinliu.com/whatfont.html h1{ font-family:merriweather, sans- serif; font-size:57px; line-height:3.563em /*57px*/; color:#fff; } @shellfishB |
- 17. #webteachingday Type looked bland or unstyled and unloved! @shellfishB |
- 18. #webteachingday Student typography has improved. @shellfishB |
- 19. #webteachingday #3 The Assignment @shellfishB | Narrow down the brief, make them care about what theyre doing, and guide them through the design cycle.
- 20. #webteachingday - Do whatever you like... - Pick one of these 4 things.. - Find a client... - Heres a client.. @shellfishB | #3 Assignment mistakes The briefs were too vague. Its tricky to focus teaching around the assignment when they are doing different things. Students take too long deciding what the project is about/which direction to take it and often change their mind at the last minute.
- 21. #webteachingday #3 The Revised Brief @shellfishB | For this assignment, you are challenged to devise a concept for an app and then build a website to promote it. The concept can be as playful, fun, or as unusual as you like or a more formal corporate concept if you prefer. Once you have developed the concept, your website should serve as a 3-page promotional/informational tool. hand-code html5 css FTP Brackets C.R.A.P semantic validation standards web conventions name & tagline UX research 960px Photoshop @font-face grids typography thimble Cyberduck suck trends
- 22. #webteachingday #3 The Assignment Idea Describe & Discovery DesignDevelopment Launch Project Development Cycle @shellfishB | Idea: Devise an idea for an app. Develop a clear name and tagline pair. Describe & Discovery: Describe the app idea in detail - goals, image, target audience, ideal site visitor [personas]. Research the competition (moodboard). Design: Sketch, wireframe and create a design concept(s) (inc. style guide to final PS design concept). Development: Turn the design into fully functioning html/css webpages making sure to validate regularly. Launch: Finish & deliver the site to student server via FTP. Week 1 Week 2 Week 3-6 Week 7-9 Week 10-12
- 23. #webteachingday #3 The Assignment @shellfishB | Because students have invested so much time in the idea and the design they believe in it. This provides excellent motivation to learn the more challenging areas of web such as html and css.
- 24. #webteachingday #4 screencast videos @shellfishB | Theory: Call me a control freak but
- 25. #webteachingday #4 screencast videos: recording practical sessions has made my time easier! @shellfishB | Screencasts made with QuickTime
- 26. #webteachingday #5 mozilla thimble @shellfishB | Making the first html/css sessions a little easier.
- 27. #webteachingday #5 mozilla thimble @shellfishB |
- 28. #webteachingday #1 websites that suck breaking down the initial barriers to learning #2 what font tool getting to grips with & appreciating typography #3 assignment brief clear, and linked to design cycle & teaching #4 screencasts providing a solid recap good for them, good for you! #5 thimble prevents scaring them at the first hurdle @shellfishB |
- 29. #webteachingday 95% of my first years are producing good web work! @shellfishB |
- 30. #webteachingday https://stweb.canterbury.ac.uk/~jb1013/ @shellfishB |
- 31. #webteachingday https://stweb.canterbury.ac.uk/~dp225/beanandgone/ @shellfishB |
- 32. #webteachingday http://5hideme4.8u.cz/ @shellfishB |
- 33. #webteachingday @shellfishB |
- 34. #webteachingday @shellfishB | Problems progressing into year 2. My students have forgotten everything! I feel like I need to start again from scratch but we dont have enough time.
- 35. #webteachingday @shellfishB | Possible solutions: - set a summer brief; - scrap the assignment brief and write something better! - get them going with Codecadamy;
- 36. #webteachingday Overview of web teaching Level 4 / Year 1 Level 5 / Year 2 Level 6 / Year 3 The Design Cycle (idea, discovery, design, development, launch) Mobile First Responsive Web (hand code) Contemporary web design practices Basic design principles e.g. C.R.A.P CSS Framework (light touch) Industry expectation/employability Basic UX and web conventions Basic CSS3 animation Independent study Current trends Basic Jquery (plugin usage) HTML[5] hand code (web standards, semantic mark-up, validation) CMS (currently ExpressionEngine probably WP next year) CSS[3] hand code Basic MySql creation/manipulation Basic Grids (960px) .LESS (light touch) Basic Photoshop applied to web design @shellfishB |
- 37. #webteachingday @shellfishB | 21st September 2015 @nationalcodingweek #nationalcodingweek National Coding Week Getting adults interested in coding. http://codexdld.com/national-coding-week/
- 38. #webteachingday @shellfishB | Thank you.
Related Documents
![Effective Wide Spectrum Sharing Techniques Relying on CR ... · comprehensive survey on spectrum sharing toward 5G networks. Reference [29] presented a brief survey on advanced techniques](https://static.cupdf.com/doc/110x72/5f08fdc37e708231d424b501/effective-wide-spectrum-sharing-techniques-relying-on-cr-comprehensive-survey.jpg)
