Assessment 2. Freestyle Web Design

A quick note about the practicals...

Remember to use Mozilla Firefox to do these practicals. Please do NOT use Microsoft Internet Explorer / Edge, this is not suitable for web development. Coding should be done in Notepad++

You do not have to run every bit of code in this document. Read through it, and have a go where you feel it would help your understanding. If I explicitly want you to do something, I will write an instruction that looks like this:

This is an instruction that tells you something to either think about, or do.

Shortcuts: Part 1 Part 2

The grand finale!


The Task:

Produce a targeted website including one or more Leaflet web maps designed to meet a set of self-defined design goals.

The website may be intended to collect data, disseminate data, analyse data, or any combination of the three.

You must Submit:

  • A ZIP file containing your code and any additional material (images, files etc) uploaded to the relevant Dropbox links below
  • A 1,000 word Design Rationale, uploaded to the Turnitin Dropbox on Blackboard

The deadline is:

2pm Thursday 19th December 2019 (week 13)

File Submission:

Remember that you also need to submit your Design Rationale on Blackboard!

This assignment is worth 60% of the module credits.

Marking Criteria

  • I will be marking your web page based upon the following criteria:

    • The design (form, function and creativity) of the website itself
    • The adherence of the design to the design goals and rationale
    • The code itself, specifically:
      • effectiveness (i.e. how well it does the job that it is supposed to do)
      • neatness & readability (presentation)
      • elegance (e.g. proper use of functions, conditional statements and loops)
      • efficiency (e.g. not re-running unnecessary code on every iteration of a loop)
      • resilience (i.e. how easily your code breaks / crashes)
    • The descriptive comments provided with the code, demonstrating justification and an understanding of the approaches used
    • The quality of the report, including:
      • The quality of the design goals (not too generic, clearly targeted at audience)
      • The justification of your design decisions (as opposed to simply describing your web page)

Hints, Tips and Resources

RRemember that the goal here is to DESIGN a web page for a particular audience - this should be reflected in the content, functionality and aesthetic (look and feel) of the page. You can see some notes on writing a design rationale here.

When designing your web page, you should consider:

  • Who the web page is targeted at (the ‘target audience’)
  • What information that you want to get across (and what should you not include)
  • How the web map design can be in-keeping with the look and feel of your chosen client
  • How the web map design can support its intended purpose

Some of you might also want to have a think about using some techniques that we have not yet covered in class (hint hint…). For ideas, you could have a look at web resources such as:

I would encourage you to explore the potential in these libraries when deciding what you want your map to do. Whilst a good and well-justified design is more important than the complexity of the code, please do not just replicate one of the practicals - this does not demonstrate a clear understanding of JavaScript, and will not enable you to access the high marks!

Also take care not to fall into any basic coding traps - remember, for example:

  • Do not use absolute links to local files on your computer
  • Do not forget to comment your code properly
  • Do not use HTML templates that you download from the web (there is too much code to adequately comment)

If you get stuck, remember to use the forum, and good luck!!


Some of the material on these pages is derived from the excellent Leaflet Tutorials and Mozilla Developers websites. Mozilla Developers by Mozilla Contributors is licensed under CC-BY-SA 2.5.