SM5024 - Designing for Web and Mobile (2020/21)
|Module specification||Module approved to run in 2020/21|
|Module title||Designing for Web and Mobile|
|Module level||Intermediate (05)|
|Credit rating for module||30|
|School||School of Computing and Digital Media|
|Total study hours||300|
|Running in 2020/21||
This module will provide students with a detailed understanding of the contexts and practice of making content for web and mobile content. It will introduce them to the production of media suitable for both web and mobile and discover design trends related to interface design. The course will examine different scripting languages and the production process.
The module aims to identify the nature of the web and mobile as a medium and introduces a range of design concepts. In particular, it focuses on the key issues of usability on the web and mobile. It also focuses on a range of technical skills including basic text formatting; working with images and interactive programming. This module aims to:
- To examine and evaluate the major issues involved in production for desktop, tablet and mobile.
- To enable students to design & produce a web design project which also works cross mobile device.
- To encourage innovative design of applications for mobile environments
Prior learning requirements
Designing and Scripting for Interactive Media
The syllabus for this module covers practice-based project work comprising the techniques and skills developed in the module. The module enables students to explore ideas about the nature of the Web and to develop good web design practice. An indicative programme of study covers:
Key concepts: Analysis and discussion of research, debates and techniques relating to usability design and accessibility for both mobile and desktop applications.LO1
Visualisation: communicating design ideas through visualisation, text and presentation. LO3
Wireframing: proof-of-concept and prototyping.LO2
User-centred design: usability, accessibility, and design heuristics. LO3
Website design: the design process, opportunities and constraints that exist for the creation of web content. LO3
Design of mobile applications: exploration of ideas and best practice for mobile application design. LO1
Web coding and uploading: including the mark-up languages used to format web pages, the techniques involved in creating and checking code and the issues involved in placing websites online. LO2
Web Scripting: programming languages that are used to add dynamic content to web sites. LO3
Web Imagery: introduction to software for creating image-rich designs for the Web. LO2
Multimedia web integration: incorporation of multimedia objects into web pages. LO3
Industry Links: Development of employability skills in the context of design and production, technology and communication. LO3
Balance of independent study and scheduled teaching activity
This module will be delivered through a combination of modes of delivery, including formal lectures, seminars, workshops and individual coursework. The mixed-mode module delivery will be used to encourage a supportive environment for individual and peer-group learning. A blended learning strategy will be employed to enhance the learning experience, facilitate communication between students and tutors and develop collaboration among students. The Virtual Learning Environment (VLE: Weblearn) will be used as a platform to support online activities including evaluation of online resources, access to materials and electronic reading packs. The VLE will also be used to facilitate assessment and related feedback, as well as a tool to integrate useful online learning materials provided by research institutions, academic publications, professional organisations and other relevant sources.
On successful completion of this module students will be able to:
Research current trends in web and mobile design and communicate design ideas through online visualisation and documentation (LO1).
Design and produce a website on a given theme compliant with web standards and current best practice in usability (LO2).
Apply techniques and design contexts to web and mobile creative web design process. (L03)
1 - Website & Mobile Project Outline
Students have to produce a minimum of 2500 word project document developing the pre-production of a website for a non- profit organisation. The subject can be based on a real activity or can be fictitious.
2: The Website and mobile design
Students have to produce the web and mobile artefact outlined in project 1. The website should conform to the rules of usability and accessibility, demonstrating a full understanding of web design best practice.
3: The Website and mobile presentation
Students have to present the web and mobile artefact outline to the class and take Q and A on their presentation and design process
Frain, B. (2015) Responsive web design with HTML5 and CSS3: build responsive and future-proof websites to meet the demands of modern web users. 2nd edition. Birmingham: Packt Publishing.
Garrett, J. J. (2011) The elements of user experience: user-centered design for the Web and beyond. 2nd edition. Berkeley, Calif: New Riders.
Colborne, G. ( 2010) Simple and Usable Web, Mobile, and Interaction Design (Voices That Matter). N-Y: New Riders.
Cooper, A. & Reimann, R. (2007) About Face 3: The Essentials of Interaction Design (3rd Rev Ed edition). N-Y: John Wiley & Sons.
Coyier, C. & Starr, J. (no date) Digging Into WordPress. Available at: https://digwp.com/book/.
Duckett, J. (2011) HTML & CSS: design and build websites. Hoboken: John Wiley & Sons.
Fling, B. (2009). Mobile Design and Development. New York: O’Reilly Media.
Hyndman, S. (2016). Why Fonts Matter. London: Virgin Books.
Krug, S. (2014) Don’t make me think, revisited: a common sense approach to Web usability. [3rd ed.]. [Berkeley, Calif.]: New Riders.
Lynch, P. & Horton, S., (2009) Web Style Guide: Basic Design Principles for Creating Web Sites. Yale: Yale University Press
Norman, D. (2005) Emotional Design: Why We Love (or Hate) Everyday Things. N-Y: Basic Books
O’Neil, P. (2014). Web Designer's Idea Book, Volume 4: Inspiration from the best web design trends, themes and styles Paperback
Porter, J. (2008) Designing for the Social Web. Berkeley, CA: New Riders.
Redish, J. (2012) Letting go of the words. 2nd ed. [Waltham, MA]: Morgan Kaufmann.
Rose, D. (2015) Responsive Web Design with Adobe Photoshop. San Francisco: Adobe Press, 2015.
Sikos, L. F. (2014). Web Standards – Mastering HTML5, CSS3, and XML (Second
Edition). Apress, New York.
Saffer, D. (2010) Designing for Interaction 2nd edition.
Watrall E & Siarto J. (2016). Head First Web Design. O’Reilly Media, Inc.
Weinschenk, S. (2008) Neuro Web Design: What Makes Them Click? N-Y: New Riders
Lynda.com Excellent movie tutorials http://www.lynda.com
World Wide Web Consortium (W3C) https://www.w3.org/
A List Apart: For People Who Make Websites
Awwwards - Website Awards - Best Web Design Trends www.awwwards.com/
Webdesigner Depot: Web Design Blog www.webdesignerdepot.com/
Smashing Magazine – For Professional Web Designers and Developers https://www.smashingmagazine.com
The Net Magazine