Coronavirus (Covid-19) Information

Module ICP-2005:
Graphics & Web Design

Module Facts

Run by School of Computer Science and Electronic Engineering

10 Credits or 5 ECTS Credits

Semester 1

Organiser: Dr Panagiotis Ritsos

Overall aims and purpose

To develop students’ ability to produce high-quality designs of interactive applications, to be able to follow design principles to produce industry-standard, quality websites & to develop a basic knowledge of graphics theory & HCI.

Course content

How images are represented by a computer, basics of image storage & compression, different image formats, resolutions, display size, print size and interpolation.

Concepts of usability, user experience, information architecture and their relationship.

Design practices for the (mobile) web, including wire-framing, storyboarding and other lo-fi prototyping techniques

Human-Computer Interaction best-practice principles for web design, and human-perception concepts that influence graphical interface design

Learning outcomes mapped to assessment criteria







Understanding of user-centred design and HCI principles.

Demonstrate an understanding of basic HCI principles and comment on what is / isn’t good design practice & provide examples. Understands the reasoning behind current HCI principles and able to follow HCI guidelines consistently throughout work. Able to extrapolate from HCI guidelines provided in order to reason about good design, navigational structure & clarity of presentation.

Demonstrate an understanding of image theory, including aspects of colour theory and image compression

Basic understanding of storage / compression techniques. Students should understand the difference between display size, colour, print size and how the quality of an image may be affected by these. Good understanding of image storage & compression techniques. Furthermore, basic understanding of higher level concepts such as interpolation and colour perception. Student should understand how images are represented by the computer and the tradeoffs involved in the use various image formats.

Utilise graphics packages to produce & manipulate website templates and images to a high standard.

Students are able to use graphics package functionality to put together templates and images for use in websites as well as to repair / adjust images to suit an intended purpose. Able to develop website templates and graphics & manipulate image (e.g. reparation of photographs) to a standard which could be considered professional Able to select the appropriate image format & optimise images bearing in mind the intended purpose of materials; able to produce higher quality work than might be expected at threshold.

Display an understanding of various web design features & technologies such as forms, image maps, media, text/typography for a variety of display mechanisms and device form-factors

Students should be able to utilise basic web design features to improve the clarity / communication of information as well as to lend interest to a website. Students understand that browsers in different form-factor devices may not render mark-up in the same fashion & account for this; able to make use of more complex design functionality to compensate. Students able to utilise all web design features & features shown and are able to utilise these for their own purposes to a high standard, for various form-factors.

Demonstrate competence in use of web design strategies (e.g. wire framing, low-fidelity prototyping techniques ) for the production of high-quality websites and graphical-user interfaces.

Students demonstrate good judgement in presenting information and navigational structure. User experience recommendations and best practices used to enhance quality of work. High standard of work produced which follows best practice HCI guidelines & fundamental model of user-centred design for the web. Students should be able to use web design strategies to produce a website prototype of a higher standard than could be achieved without such techniques.

Assessment Methods

Type Name Description Weight
COURSEWORK Website Web Audit 30
COURSEWORK Designing a Commercial Website 40
COURSEWORK Low fidelity Prototyping 30

Teaching and Learning Strategy


11 hours over 12 weeks


22 hours over 12 weeks


ASSESSED project work, supported by lab sessions

Private study

Supported by lab-based tutorials and supervision


Transferable skills

  • Computer Literacy - Proficiency in using a varied range of computer software
  • Self-Management - Able to work unsupervised in an efficient, punctual and structured manner. To examine the outcomes of tasks and events, and judge levels of quality and importance
  • Exploring - Able to investigate, research and consider alternatives
  • Information retrieval - Able to access different and multiple sources of information
  • Critical analysis & Problem Solving - Able to deconstruct and analyse problems or complex situations. To find solutions to problems through analyses and exploration of all possibilities using appropriate methods, rescources and creativity.

Subject specific skills

  • Knowledge and understanding of facts, concepts, principles & theories
  • Use of such knowledge in modelling and design
  • Problem solving strategies
  • Deploy theory in design, implementation and evaluation of systems
  • Knowledge and understanding of commercial and economic issues
  • Knowledge of management techniques to achieve objectives
  • Specify, design or construct computer-based systems
  • Evaluate systems in terms of quality and trade-offs
  • Deploy tools effectively
  • Development of general transferable skills
  • Defining problems, managing design process and evaluating outcomes
  • Principles of appropriate supporting engineering and scientific disciplines

Pre- and Co-requisite Modules

Courses including this module