Description
A2: Final Assignment – Website Prototype
The assignment consists of a detailed website prototype and a report. This assignment needs to draw on what you have proposed for the mid-term assignment A1. In your report, you will reflect on your design choices.
Give your project a title and use this title as a reference in both parts of the submission.
The assignment includes designing a prototype in Figma for both desktop and mobile and developing pages of the desktop design in functioning HTML code using Bootstrap. You will reflect on the process in a report. The design will include 3 to 4 pages. The content should be in English.
Part 1. Report (max length 1500-1800 words, excluding references)
Your report (max length 1500-1800 words, excluding references) should be a coherent and detailed reflection on your project. There might be some overlap with A1, but this report needs to address the prototype process in greater detail. The report should include appropriate figures for your design and implementation (e.g., high-quality screenshots from Figma), as well as academic and technical references to justify your choices (you can reference web design textbooks and articles). Follow this structure:
URLs.Include the URLs to your Figma design and to your Bootstrap prototype.
Introduction. Introduce the core theme and objectives of the website.
Content. Explain how you generated the website content, including your sources. Specify how you handled copyright issues.
Design. Critically present your design choices and how they support the user experience, including interactivity, responsiveness, and accessibility. Document what specific web technologies you used. Motivate your choices. Explain how you tested your design on different browsers and devices, and how you validated your website code.
SEO.Discuss your Search Engine Optimization strategy to make the website findable and how to reach your target audiences. Using evidence from Google Trends, specify what keywords might be appropriate.
Limitations and future work.What are the issues in your design? How would you improve the website if you had more time?
Plagiarism, copyright, and AI disclosure statement(max 200 words).
References. List the cited academic and technical references.
Part 2. Website Prototype (Figma and Bootstrap)
This prototype of the website will include different, complementary elements, one in Figma and one in HTML/ CSS, using Bootstrap. It should be modeled on your project in A1, but it can diverge significantly in terms of design and content.
Your prototype should include two elements:
Part 2a: A Figma prototype, including a mobile and a desktop version of your pages.
It should be a high-quality, non-interactive mock-up with images, colors, fonts, and graphics.
This design should be on a single canvas.
Adopt a mobile-first strategy.
Provide a public URL to this design using the “share” function in Figma. Example of valid link: https://www.figma.com/file/liR2gDGySusmgItAzFKKx2/The-Blog—A-Web-Personal-Blog-(Community)
Part 2b: An HTML and CSS implementation of your desktop design, using Bootstrap.
You only need to develop 3 to 4 pages; these pages should be linked and navigable.
This implementation does not need to be responsive.
Interactive features like filters and forms need not be functional, just explain how they would work.
Additional JavaScript is not required, use the framework in its basic functionality.
Include a homepage called ‘index.html’.
The website will be evaluated on the following assessment criteria:
Quality of presentation and consistency in style and content
Demonstrate a systematic approach to the design
Make appropriate and varied use of images
Evidence responsive design principles in the Figma prototype
Evidence a clear understanding of user-centred design and usability principles, including evidencing research to meet the needs of your stakeholders (e.g. end users and clients)
Embed accessibility principles (e.g. alternative text in images)
Demonstrate an understanding of Search Engine Optimisation
Ensure that the HTML prototype is operational and available on the development web server
Plagiarism, Copyright, and AI Disclosure Statement (200 words) see in the docx
Unformatted Attachment Preview
A2: Final Assignment – Website Prototype
The assignment consists of a detailed website prototype and a report. This assignment needs
to draw on what you have proposed for the mid-term assignment A1. In your report, you will
reflect on your design choices.
Give your project a title and use this title as a reference in both parts of the submission.
The assignment includes designing a prototype in Figma for both desktop and mobile and
developing pages of the desktop design in functioning HTML code using Bootstrap. You will
reflect on the process in a report. The design will include 3 to 4 pages. The content should be
in English.
Here are some examples of relevant websites. Note that these are just examples, and you are
encouraged to develop your project:
https://seealso.org
http://www.aemap.ac.uk/en
http://www.medievalswansea.ac.uk/en
http://hiddenhistories.omeka.net
http://www.textal.org
https://pudding.cool/
https://dotcomarchive.bristol.ac.uk/
https://tinlizzie.org/histograms/
https://litlab.stanford.edu/
https://dhlab.yale.edu/projects/vogue/
https://hpcbristol.net/
Part 1. Report
Your report (max length 1500-1800 words, excluding references) should be a coherent and
detailed reflection on your project. There might be some overlap with A1, but this report
needs to address the prototype process in greater detail. The report should include appropriate
figures for your design and implementation (e.g., high-quality screenshots from Figma), as
well as academic and technical references to justify your choices (you can reference web
design textbooks and articles). Follow this structure:
•
•
•
•
URLs. Include the URLs to your Figma design and to your Bootstrap prototype.
Introduction. Introduce the core theme and objectives of the website.
Content. Explain how you generated the website content, including your sources.
Specify how you handled copyright issues.
Design. Critically present your design choices and how they support the user
experience, including interactivity, responsiveness, and accessibility. Document what
specific web technologies you used. Motivate your choices. Explain how you tested
•
•
•
•
your design on different browsers and devices, and how you validated your website
code.
SEO. Discuss your Search Engine Optimization strategy to make the website findable
and how to reach your target audiences. Using evidence from Google Trends, specify
what keywords might be appropriate.
Limitations and future work. What are the issues in your design? How would you
improve the website if you had more time?
Plagiarism, copyright, and AI disclosure statement (max 200 words).
References. List the cited academic and technical references.
Part 2. Website Prototype (Figma and Bootstrap)
This prototype of the website will include different, complementary elements, one in Figma
and one in HTML/ CSS, using Bootstrap. It should be modeled on your project in A1, but it
can diverge significantly in terms of design and content.
Your prototype should include two elements:
Part 2a: A Figma prototype, including a mobile and a desktop version of your pages.
•
•
•
•
It should be a high-quality, non-interactive mock-up with images, colors, fonts, and
graphics.
This design should be on a single canvas.
Adopt a mobile-first strategy.
Provide a public URL to this design using the “share” function in Figma. Example of
valid link: https://www.figma.com/file/liR2gDGySusmgItAzFKKx2/The-Blog—AWeb-Personal-Blog-(Community)
Part 2b: An HTML and CSS implementation of your desktop design, using Bootstrap.
•
•
•
•
•
You only need to develop 3 to 4 pages; these pages should be linked and navigable.
This implementation does not need to be responsive.
Interactive features like filters and forms need not be functional, just explain how
they would work.
Additional JavaScript is not required, use the framework in its basic functionality.
Include a homepage called ‘index.html’.
The website will be evaluated on the following assessment criteria:
1.
2.
3.
4.
Quality of presentation and consistency in style and content
Demonstrate a systematic approach to the design
Make appropriate and varied use of images
Evidence responsive design principles in the Figma prototype
5. Evidence a clear understanding of user-centred design and usability principles,
including evidencing research to meet the needs of your stakeholders (e.g. end users
and clients)
6. Embed accessibility principles (e.g. alternative text in images)
7. Demonstrate an understanding of Search Engine Optimisation
8. Ensure that the HTML prototype is operational and available on the development web
server
Plagiarism, Copyright, and AI Disclosure Statement (200 words)
Currently, generative AI tools such as GPT are facilitating the creation of new content. To
reflect on these matters, we are asking you to add a brief disclosure statement in your
submissions (A1 and A2). The purpose of this statement is not to encourage you to use AI
generative tools, but rather to learn about AI in our working lives and consider the wider
impact of AI in scholarship.
In your assignment, if you decided to use specific generative AI tools (including outcomes of
large language models, AI-powered translation tools, image generators) in your statement you
must be transparent and reflective about their use. Explain in your statement which steps and
processes you used for particular tools and how you worked with and adapted the AI tool to
optimise its outcome (for example how different prompts changed the outcome). We also
expect you to critically reflect on your usage of AI through a short explanation of how you
acknowledged and accounted for the known biases and risks of the tools, how this may have
affected your work, and what you did to mitigate these issues. We do NOT want to see
screenshots, but you may quote AI outcomes or prompts you used.
If you did not use specific generative AI tools, you must still write this statement, but in this
case you should explain why you did not. Be honest about this: it may relate to your personal
habits and preferences, your first language, your existing knowledge/lack of knowledge about
these tools, or ethical/intellectual concerns relating to academic integrity or problems with the
tools themselves. If you wish, you may also reflect on how a wider range of ‘non generative’
AI (and AI-related) technologies may have influenced your research or writing process (for
example, search engines, social media algorithms, predictive text, translation/grammar tools).
Purchase answer to see full
attachment
