100% Portfolio (Learning Outcomes 1-6)
A student web based design and implementation portfolio consisting of media elements and supported by 1500 word report.

Students will be given numerous scenarios for which they must design and implement some aesthetic web design elements and web pages. In essence the purpose of the portfolio is to document the students approach to the visual design and implementation of web sites. The portfolio may include brainstorming notes, sketches, design posters, recorded notes from focus groups, design rationale to support design decisions, design rating reviews, and web pages. As the portfolio is a visual document and implementation based, students efforts will be divided equally in producing the designs and implementations. Students will also write 1500 words to explain their design, implementations and testing carried out.

Prior study of Web Concepts CESCOM10098-4 or equivalent
and knowledge equivalent to the Design section of Skills For Computing Professionals CESCOM10093-4

Design applications such as Photoshop, and Illustrator
Various Devices - Phones and tablets

2D Graphics
- Creation of 2D bitmap and vector graphics for the web in tools such as Adobe Illustrator and Photoshop
- Camera Techniques / Photography Techniques
- Animation Techniques
- Sprites and their design
HTML / Advanced CSS
- CSS Advanced features including grids, filter effects, compositing and blending
- CSS 3D transformations - 3D perspective transitions
- CSS Typography
- HTML Drag and Drop
- Boilerplates and tools to help for advanced CSS development
- Practice of design - using CSS and graphics to create an advanced web page design
- Utilising CSS with sprites
- CSS for responsiveness, and adaptiveness
- HTML5 tags to display graphics, such as Adaptive Graphics, when to use different types of graphics
- Animation on the web (for example Flash v CSS v JQuery)
- Introduction to the Canvas API - drawing, animation and interaction
- Using canvas for Filter effects on graphics/video
- SVG Code basics
Visual Aspects of Web Design / Design Concepts
- Theory of design (including typography, visualization, and colour aesthetics)
- Aesthetics / Design Concepts in web design
- Mental models
- Representation of designs using practiced design notation (e.g. brainstorming, sketching, scrapbooks, posters, portfolios, focus groups, design rationale, rating, critiques, and prototypes etc.).
- Adaptive web design / Progressive enhancement / Graceful degradation / Responsive techniques in web design
- Image Gallery Designs

Photoshop CS6 Unlocked: 101 Tips, Tricks, and Techniques 2nd Edition, Haffly, C. (2012), SITEPOINT, 2nd edition, ISBN­10: 0987247875
Photoshop CS6: The Missing Manual (Missing Manuals), Snider, L. (2012), Pogue Press, 1st edition, ISBN-10: 144931615
The Principles of Beautiful Web Design, Beaird, J. (2010), SITEPOINT; 2 edition, ISBN­10: 098057689X
Adobe Illustrator CS6 Classroom in a Book, Adobe Creative Team, (2012), Adobe; 1st edition ISBN­10: 032182248X
Adobe Illustrator CS6 Classroom in a Book, Adobe Creative Team, (2012), Adobe; 1st edition ISBN-10: 032182248X
HTML5 Graphics with SVG & CSS3, Cagle, K. (2013), O'Reilly Media; 1st edition, ISBN­10: 1449304478 Pro CSS3 Animation, Storey, D. (2013), APRESS; 1st edition, ISBN­10: 1430247223, ISBN­13: 978­ 1430247227
Pro CSS3 Animation, Storey, D. (2013), APRESS; 1st edition, ISBN-10: 1430247223, ISBN-13: 978-1430247227
HTML5 Canvas and CSS3 Graphics Primer, Campesato, O. (2012), Mercury Learning & Information, ISBN-10: 1936420341

24 hours of lectures and 48 hours of tutorial/practical sessions.

The module is driven by a lecture to support the weekly lab sessions. The lab sessions will support the development of the student portfolio and will provide opportunity for the student to explore their design and implementation ideas and get feedback through critiques. Group discussions will also take place in these sessions to encourage many design ideas and perspectives to be explored.