Y3S2 WORK

Please Note: Some of the 'PDF' documents supplied on this page may take a long time to load due to the amount of work included and these may need to be refreshed quite a few times in order for them to load fully.

THE REFERENCES FOR THE PROJECTS ON THIS PAGE ARE SITUATED IN THE RELATED DOCUMENTS PROVIDED EITHER NEAR TO THE END OR AT THE END OF EACH SECTION

Please Note: During one of my lectures last semester, I was informed by my lecturer that I did not (as a developer) need to produce branding guidelines for the work undertaken but show I had worked to the branding of an organisation. To fulfill this, I have shown main evidence of this for both the 'Home Sweet Home Front' website and Manchester United website application projects.


'Home Sweet Home Front' Website Project

Brief: "To produce a user-friendly re-designed website of the 'Home Sweet Home Front' website that is both cross-browser and cross-device compatible, retaining all of the previously included content where appropriate."

Introduction

The 'Home Sweet Home Front' website was a website that had been created by both my father and uncle using 'Microsoft Front Page' in 2001, basing the topic around the home front during World War 2. Due to the fact that the appearance was outdated and some aspects weren’t accessible/user-friendly and due to the fact that I needed to find a project to undertake during my second semester of my third and final year at University, it was therefore agreed that I could complete a re-designed website for them both. Please note that the whole website was not re-designed and rebuilt as the clients stated that other pages were for future publication. However, I still undertook this process for 12 pages.

Throughout this project, I undertook two major roles. One was acting as the designer, including suggesting fonts and colours as well as creating several wireframes for the required pages, and the other was as the developer, building the design using different programming languages to ensure that the website functioned properly throughout different devices and browsers.

Analysing the Provided Brief

Although this was undertaken after having started the project, as the clients were kindly placing a brief together, this was a process undertaken throughout in order to help myself understand which areas would need to be addressed as the main priority. Constant reviewing of the brief helped myself to understand what was still required to be completed as well as understanding what had already been achieved. The process of analysing the brief can be viewed below.

Please Note: With regards to the image for the 'Existing Pages for Publication', where I have annotated with the text 'Remove bookmarks section on the home page', I clarified this with the clients as I wasn’t sure if this related to the bookmarks section or the actual sections themselves as well. I was informed that they wanted the sections relating to 'Image of the Month', 'Timeline' and 'Hints & Tips' to all be removed but after discussing with them that this would remove most of the content of the home page, it was agreed that not all aspects would be removed.

Planning Methods of the Project

One of the first aspects I completed was a task table to be able to analyse the required tasks, allocating specific time periods to each and also explaining the consequences if not completed and the risks with the tasks. Although throughout there may have been additional tasks, this related to the main tasks required to complete. The listed tasks related to various processes including development research (e.g. website trends) and creating wireframes. Furthermore, the progress of each task was indicated by either 'Not Started', 'In Progress' or 'Completed', each with different colours and also by the tick or cross in the last column.

Please note that before creating the task table for the project, I created a table that related to the information about the module such as the due dates for the assignments as well as tasks to complete for the module, including those not relating to this project. This helped myself to understand then how much time to allocate to different aspects. Regarding some of the listed tasks, this then helped myself explain these in more detail as will be seen in the created task table. Both the time map for the module and task table relating to the project can be viewed below.

The Task Table and Module Time Map

At a later date, I then created a Gantt chart to reflect the task table in a more visual way. However, whilst completing this, I also divided the development process into several sections to allow myself to understand how much time I would need to allocate to progress through different phases such as completing the 'HTML' code and 'CSS' code. With regards to the programming/coding process, I allocated a longer amount of time to the languages which I believed would require a longer process such as 'CSS' and the new frameworks/languages that I wanted to explore. This was because I knew that 'CSS' would entail not only styling the website on desktop devices but also integrating aspects such as 'media queries' to change styles on different screen resolutions/devices. With regards to the new frameworks/languages, I allocated even more time to these as I knew I would need to learn how to use them whilst progressing with the project, requiring thorough research and seeking of advice from relevant lecturers. Please note that at a later stage, I decided not to explore new frameworks due to the fact that I was undertaking this in another project during the semester and because I wanted to have a fully complete project regarding this project.

With regards to the other processes before the programming/coding stage, I ensured that the majority of these would be completed before starting the programming/coding stage as this would help myself progress better with this. This was especially relevant to the wireframes as these would help myself visualise the structure and styling of the website better, being more efficient and quicker in the programming/coding process. Areas such as target audience and development research would help myself identify how to design each web page so that it would be both modern and usable and accessible.

With regards to the continuous processes such as the documentation of the project, these were allocated these time periods due to the fact that these would be areas that wouldn’t be able to be completed immediately and would need to be either added to throughout or completed near to the end of the semester to reflect the work undertaken. This was especially relevant to both the 'Self Submission Assessment Sheet' and 'Negotiated Learning Agreement Document' which would demonstrate what had been completed throughout the semester.

Finally, the majority of the tasks had been organised to be completed by 26th April 2019 to allow enough time to ensure that I would be happy with the completed work and to also allow enough time to successfully submit my portfolio to the lecturers. The Gantt chart is viewable below.

The Gantt Chart for the HSHF Website

Analysing the Current Website

In order to fully understand the current website, I undertook the task of analysing the positives and negatives of each relevant page. This would then help myself understand which areas would be beneficial to keep and which areas that would need to be removed as well as improved. This analysis can be viewed through the 'PDF' file provided below.

Branding Research

The purpose of this stage was to be able to determine the appearance of the website through gaining inspiration from both the current website and from online resources, being able to produce an outcome which fully demonstrated the website's values. The different processes of this can be viewed within this section of this project.

Analysing the Current Utilised Colours

I decided to begin the branding process by analysing the current colours used on the current website in order to influence the final produced colour palettes at a later stage. This was due to the fact that the clients wanted to keep the colours and also because I thought these reflected the theme of the website successfully. I decided to list the colours used on the current logo and website with their 'HEX' values to allow for creating colour palettes with some of these 'HEX' values.

This was undertaken through various methods. The first was utilising 'Adobe After Effects' through using the colour picker tool. Another method of collecting some of the colour values was by using the tools provided by 'Google Chrome'. These were the 'DevTools' and examples of these methods can be viewed below as well as the listed colours as a result.

Undertaking Colour Connotations Research

After completing the previous task, I then decided to analyse a couple of colour palettes which I had used in previous projects before as I believed these to be very thorough and helpful. I highlighted certain words included in each colour segment that I believed to relate to either World War 2, the home front or the website in general. This analysis can be viewed below.

Creating the Final Colour Palettes

After undertaking the necessary research, I then decided to specify colours to keep from the originally created list that would then allow myself to create colour palettes based on the highlighted colours. I decided not to include new colours at the later stage of creating the colour palettes due to the fact that I believed the current colours were representative of the topic and helped to create a nostalgic appearance.

During this process, I decided to eliminate the colours from the logo. This was because the clients wanted to have a new logo created and therefore, I thought that the colours of the logo would change, making the previous colours redundant. I also didn’t include these because I was relating to the website in general and these related to the logo. One of the colours was kept due to the fact that the clients had stated in the brief that they wanted this to be used in some aspect of the new website. The other colours I chose to keep were because I thought these related to World War 2 and the home front the most with the different shades of green representing the army. Black and white were kept due to the fact that these were colours which would be a standard to use for paragraphs to allow for easier reading by the user of the website. The red was chosen because I thought this could be utilised as an accent colour and also because this related to passion, indicating key elements of the website. One final aspect to note is that I decided to choose the colours above to provide a variety of colours, hence creating an outcome that was varied and exciting.

Following on from this, I then decided to create the final colour palettes which can be viewed below as well as the previously mentioned aspect. As will be evident, I decided to alternate between colours in different colour palettes to explore multiple options and to be able to provide the clients with multiple options to choose from.

Analysing the Current Utilised Fonts

As well as producing the colour palettes for the new website, I also decided to shortlist 'Google Fonts' and fonts within 'Microsoft PowerPoint' that I believed could relate to the theme of the home front and World War 2. However, before undertaking this task, I navigated through each page of the current website, utilising 'Google Chrome' 'DevTools' to help identify the fonts used for several aspects including headings and paragraphs. This was to understand the style of fonts utilised throughout which is something that could then be considered whilst progressing with highlighting particular fonts to be used in the new website. After identifying each font on each page, I then documented this to help myself remember which fonts had been utilised on certain pages. This process can be viewed below.

Undertaking Fonts Research

After analysing the fonts currently utilised on the 'Home Sweet Home Front website, I then undertook research on the Internet, attempting to discover fonts that related to war or World War 2. This would then allow myself to understand the characteristics of these fonts to then highlight possible fonts that could be utilised on the new website. The research discovered can be viewed below.

From undertaking this research on the Internet, I understood that the best fonts were those that were in bold and in italics. I also understood that fonts based around the theme of war or World War 2 were 'Serif' fonts (as seen with the font called ‘Futura’), as inspired by an online source and that character spacing was an element used to create an old-fashioned appearance. Finally, I also understood that a typewriter effect was integrated which helped to create a nostalgic appearance and especially relate to World War 2 letters.

Highlighting Fonts to Utilise

After having undertaken the previous processes, I was now at a stage where I was able to highlight potential fonts to be utilised for the new website. This was to allow for sending the file to the clients to allow them to decide which fonts they would prefer as this was their website and therefore the website would need to reflect their preferences.

I highlighted the most relevant fonts both available through 'Microsoft PowerPoint' as well as viewing the 'Google Fonts' available under the setting of 'Serif' fonts. When selecting the fonts, I ensured that I considered the previous research and the characteristics utilised to reflect the topic of the website in the best possible way. This process can be viewed below.

Contacting the Clients

After having produced colour palettes and highlighting the possible fonts to be utilised, I then contacted the clients, attaching the branding document I had been progressing with. The purpose of this was to ask for their feedback regarding which colour palette and font relating to the headings of the website that they would like. Following on from this, the clients then replied to myself mentioning that they had decided on the colour palette and fonts that they preferred. This is viewable below.

As will be evident above, the clients had then mentioned that they would like to see the paired fonts for the 'Special Elite', 'Inconsolat' and 'Aleo' fonts. This was therefore an action that I then completed as will be seen below.

After listing each of the paired fonts for each selected heading font, I then decided to contact the clients again at a later date once I had finished the initial desktop and mobile wireframes, as will be seen later on this page. This was to allow them to choose the paired font which they wanted to integrate as the paragraph font for the new website. I then received a response from the clients which also stated in the attached file which fonts were preferred to be utilised. This therefore signified the end of this stage and also the branding stage altogether, allowing for progression onto other aspects. Images of this can be viewed below.

Target Audience Research

Introduction/Initial Stages

Another key aspect undertaken before creating the wireframes and progressing onto the building stage of the website included undertaking target audience research based on the target audiences provided by the client within the brief supplied to myself. This target audience research was undertaken within a separate document whereby I added some initial thoughts of my own as well as discovered research. Firstly, I began by highlighting the key aspects of the overview provided by the client, helping myself to fully understand the types of people to undertake research regarding in order to produce the best possible conclusion from this research. The provided target audiences and highlighting key aspects can be viewed below.

Separating Initial Ideas and Collected Research

I then separated the initial ideas and discovered research into three categories based on the three target audience areas. Some of these ideas and research overlapped but still provided a good overview and understanding on how to make the new website suitable for these target audiences. I found it difficult to find sufficient research online for some areas which limited the research included. However, I was still able to gain an understanding of aspects to consider for the new website from the research discovered.

With regards to those interested in history and those, in particular, interested in World War 2, the first thought that occurred to myself was the fact to undertake research regarding historians. This was because I knew this audience was fascinated by history and would help to provide an overview of what other people interested in history would prefer to see on the new website. This therefore contributed to most of this particular target audience research with some mention of other areas also. All of this process can be viewed below.

Collecting Demographics Research

After separating the relevant research and ideas into the different target audiences, I then decided to undertake some demographics research to help myself understand the key statistics regarding types of people relating to each audience type. This was placed into one section for all three target audience areas and this can be viewed below. I also collected some statistics from 'Statista' relating to various other aspects including reasons for visiting cultural heritage websites. This research can be viewed below.

Regarding the first graph above, I understood that the majority of those employed related to both primary and secondary education which therefore signified to myself that the website would need to accommodate these audiences the most.

As is evident above, I also understood that primary and secondary education were the areas most invested in within the United Kingdom, as displayed by the second graph. This again emphasised that those involved in this area such as students and teachers would be of a large audience, influencing the majority of the website's outcome.

The reason why the third graph was highlighted was because it occurred to me that heritage websites could relate to history websites and therefore understanding the reasons why people visit these websites would be beneficial in influencing the outcome of the new 'Home Sweet Home Front' website. I understood that one of the most popular reasons for visiting these websites related to learning about the history/historic environment. This therefore influenced myself to think that the website would need to be easy to understand and informative to help visitors to the new 'Home Sweet Home Front' website learn the most from the information provided.

The reason why the final graph was highlighted was to understand the age demographics of those visiting history related websites, as in my opinion, museums and galleries can relate to history. From viewing this graph, I believed that it demonstrated the most popular age on average was those between 25-34 years and 35-54 years. This again demonstrated to myself that the website would need to be accessible and usable by any age due to the variety of visitors that the website would obtain. This emphasised that despite there being set target audiences, various ages would still visit the website.

Conclusions and Created Target Audience Personas

After collecting several pieces of research, I then decided to place a red asterisk next to the most relevant points to help myself create conclusions from the research. This will have been evident in the previously provided images. This would then allow myself to create target audience personas. As will be evident below, there were numerous aspects to consider whilst progressing with the project in order to satisfy and provide a high-quality user experience to the relevant target audiences.

After creating the conclusions from the research, I then decided to create four target audience personas to help myself fully understand how to produce a website that suited the main target audiences. These personas related to different age ranges and personalities, helping to address various different target audiences. This whole process can be viewed below.

This now signified the end of this key task, allowing myself to progress further with other aspects of the project.

Competitor Analysis Research

Another key aspect undertaken before creating the wireframes and building the website included analysing each identified competitor to understand what was successful and what needed improving. This would help myself understand which areas to implement successfully in the new website and those to avoid. This analysis included both general advantages and disadvantages as well as viewing how each website included colours and fonts. To begin, I analysed the general advantages and disadvantages of each highlighted competitor website which can be viewed below.

Imperial War Museums Website General Analysis - Advantages/What was Successful

Imperial War Museums Website General Analysis - Disadvantages/What Needed Improving

HISTORY Website General Analysis - Advantages/What was Successful

HISTORY Website General Analysis - Disadvantages/What Needed Improving

BBC History Website General Analysis - Advantages/What was Successful and Disadvantages/What Needed Improving

As previously mentioned, after completing the general analysis of the competitor websites, I also undertook analysis regarding how they utilised fonts and colours on their websites. The purpose of this was to influence and inspire the project I was undertaking, helping myself to understand how to integrate colours and fonts effectively and professionally. This analysis for each website can be seen below.

Imperial War Museums Website - Colours Analysis

Imperial War Museums Website - Fonts Analysis

HISTORY Website - Colours Analysis

HISTORY Website - Fonts Analysis

BBC History Website - Colours Analysis

BBC History Website - Fonts Analysis

From undertaking all of this analysis, I understood that colour wasn't overused and that colour could be utilised to symbolise importance/hierarchy as well as different types of fonts. I also understood different characteristics of fonts as well as colour could be used to indicate interactivity, acting as a visual aid for the user. One final key aspect to note is that I understood that information/content was provided in a clear and professional format to help users find what they wanted faster. These aspects as well as others were considered when progressing further with the project. This now signified the end of this task.

Undertaking Development Research

Overview

As well as undertaking research regarding areas such as competitors, I also believed it would be beneficial to undertake research regarding website design/development trends and guidelines. This is because this would allow myself to understand what worked successfully and what to consider when building the 'Home Sweet Home Front' website to help it appear modern in the industry. This can be viewed within this section.

Website Design/Development Trends for 2019

To begin, I undertook some research regarding trends to help myself understand aspects I could possibly integrate into the 'Home Sweet Home Front' website to make it modern and so that it would follow the latest trends. From doing this, I then listed the key points with some examples to help visualise some key points. Although some listed didn’t relate to the website itself, this still helped myself to understand as a developer what was current within the industry. This can be viewed below through the provided 'PDF'.

Best Website Practices

Following on from the previous research, I thought it would also be beneficial to understand the best practices for websites as this would help myself when creating the new 'Home Sweet Home Front' website. This would help myself to understand what to include and what to avoid in order to create a fully professional and sophisticated outcome. The key points from this research can be viewed below.

From this research, I understood that the user needed to be considered before other aspects were implemented as well as making sure that the website will have needed to be clear and easy to use for the user.

Website Guidelines

Another aspect of research I undertook related to website guidelines similar to that of the best website practices. This would also help myself understand which areas to implement into the new 'Home Sweet Home Front' as well as those which I shouldn’t consider including to improve the user experience and produce the best possible outcome. Firstly, I began this process by viewing an article online and listing the key points from this research which can be viewed below.

As is evident above, some elements were repeated from the previous research, however this highlighted that some elements are very important to consider when producing a website. The main aspect was understanding the user and to create a website which best suits their needs and not the needs of the person creating the website. Another key aspect understood was that the new website would not need to be overcomplicated but simple to both keep users interested and to not cause confusion or frustration.

After viewing the initial article shown above, I then decided to revisit the Website Content Accessibility Guidelines with the summary provided on the 'GOV.UK' website. This was because I had utilised this in projects before to gain an understanding of how to make a website accessible to all users and believed this to be a good resource. This would also help solidify the research found previously. From viewing this, I noted down the notes based on the content provided on the 'GOV.UK' website. This can be viewed below.

From this research, I understood that I needed to address several areas in order to make the website fully accessible and professional. This now signified the end of the research regarding aspects such as trends and guidelines.

Identifying Potential Technologies to Utilise

As well as research regarding aspects such as trends and guidelines, I also decided to undertake some research regarding different technologies to understand if I could utilise these within the new 'Home Sweet Home Front' website. As the project was based towards front-end website development, this therefore influenced the decision to highlight those technologies based around this area. This research can be viewed below.

Please note that despite undertaking this research, due to the fact that I wanted to create a finished project, I therefore utilised technologies I already had experience of whilst exploring a few new areas.

Initial Wireframes

To begin the wireframes for the new 'Home Sweet Home Front' website, I utilised the research collected regarding areas including best practices/trends to help influence the outcome of the wireframes, making the web pages appear exciting as well as easy to follow and use. I then created two sets of initial desktop wireframes to show variation in approach of how each required web page could appear. This would also allow the clients to have more choice when deciding on which wireframes they would prefer.

I decided to create the wireframes utilising the software ‘Adobe XD’ due to the fact that there were 12 pages with my intention of creating two wireframes for each, totalling to 24 wireframes in total. This would therefore take considerably longer by sketching the wireframes and also using ‘Adobe XD’ could mean that I could create professionally structured wireframes to place onto my portfolio for this project.

The two sets of desktop wireframes can be viewed below with descriptions of why certain aspects were integrated.

Please Note: Only parts of the wireframes have been displayed on this page to provide some context to the descriptions. To view the full wireframes, please select the links provided below each relevant section.

Desktop Wireframe Set 1 (Generic Aspects)

As each set of wireframes attempted to follow a certain format or style, this therefore meant that some aspects remained consistent throughout each page. As will be seen with the first set of wireframes below, I included a navigation bar to be placed across the top of each page with the current viewed page being highlighted through the use of an underline underneath the relevant link. This would both inform the user of the page that they were currently on and also help them to familiarise themselves with the navigation on each page. It is also worth noting that the navigation bar was fixed to prevent the user from needing to navigate to the top of the page to select a certain page link. Also, with regards to navigation, where relevant, page links were provided within the paragraph text when mentioning of other pages/topics. This was due to the fact that this was currently included on the current website and also would allow the user to navigate to the relevant page from that aspect in the page as opposed to needing to select a link from the navigation bar.

For the page heading sections, a container was integrated that included space around the page heading, helping to signify that this was the beginning of the page and to add space between this and the first section of the page.

With regards to the fonts, different sized fonts were utilised to identify a hierarchy of information. For example, the page heading was the biggest sized font to help users identify this as the page heading with the headings and subheadings of different sections also being bold but in different font sizes to identify them as different types of headings. A regular font-weight was used for the paragraph text to signify to the user that this information belonged to the bold heading above it. Furthermore, the captions provided, where relevant, were included underneath each image in italics and bold format to help them distinguish themselves as image captions, being a slightly smaller font than that of the paragraphs.

For the footer section of these sets of wireframes, the logo would be positioned to the left with the headings of the different sections being of a bolder font and capitalised to help categorise the links provided within each of the sections. The links were of a lighter font-weight to signify that they were links to be interacted with by the user. The logo was included to help remind the user of the organisation who owned the website as well as creating a consistent brand. A couple of final aspects to note were that a border was included to help divide and separate this from the other sections of the page and that a vertical line was included to divide sections regarding the links in the footer.

Desktop Wireframe Set 1 (Home Page)

Regarding the page heading section, I decided to include an image next to the heading, which would be the logo, to make the page heading more visual and therefore more exciting for the user rather than plain text. I decided to include an introduction section with an introductory image as this was something already included on the current website and I believed that this would be beneficial in introducing the reader to the website, providing a context. Regarding the ‘Image of the Month’ section, I thought it would be beneficial to include this in a container that would differentiate from the rest of the content on the page, attracting the user’s attention to find out more about the image. For the ‘Home Sweet Home Front Timeline’ section, I decided to try and structure this as a timeline to reflect the content’s purpose, including an arrow to show how the events interlinked and followed on from each other. As will be seen throughout the page, I attempted to add variation with different positioning of the content to try and make the web page as interesting as possible rather than having the content in the same format throughout.

Desktop Wireframe Set 1 (Air Raid Shelters Page)

As I was still experimenting at this early stage, this is why therefore the title of the page was centred rather than being aligned to the left to try and experiment and understand how the page would appear. The introduction section was also positioned more centrally to attempt to signify clearly to the visitor that this was where they should begin reading on the page. Regarding the ‘Anderson Shelter’ section, this text was positioned to the left with the images to the right to help fill the space of this section as well as help the reader visualise what they were reading about without needing to scroll to the end of the section. Where possible, alternating text and images were applied. For example, the ‘Anderson Shelter’ positioned the text to the left and the images to the right with the ‘Taking a Chance!’ section being the opposite. This was to add variation to the page and to create a more aesthetically pleasing appearance on the web page. Similar to the ‘Image of the Month’ section on the home page, the ‘Air Raid Sirens – How did they Sound?’ section was placed within a container to separate itself from the rest of the content and indicate an activity for the user, in this case selecting the image to hear an air raid siren in action. As will be evident in a couple of situations on the web page, content was placed centrally for the main reason being again to add variation to the page and help make the page more interesting, allowing for breaking up of information. Regarding the ‘Other Types of Shelters’ section, this was placed centrally due to the fact that I believed this would be the best possible method of placing the two images as no text was included.

Desktop Wireframe Set 1 (Blackout Page)

The main aspect to note on this page was the ability to switch between the normal colours of the web page, which would match that of the chosen colour palette, and the colours of black and white to create a ‘blackout theme’. This was to make the page more interactive and engaging for the user and to help them experience what it would have really been like in complete darkness. The majority of content on the page was positioned to the left to help explore another approach to alternating content, and to help produce a consistent and professional appearance. Content within quotation marks was included in a way that helped it stand out from the other content with a different background colour and the text being placed in bold and in italics as well as including, where relevant, the supplementary information to assist it, providing context. The section placed at the end of the page called ‘Blackout Turns to Dim-Out’ was placed centrally with a different background colour to the container to signify both the end of the page for the user and to also help relate to the fact that the blackout changed to dim-out.

Desktop Wireframe Set 1 (Careless Talk Page)

As will be evident with this page, I thought that including an image situated next to the title would help create a more visual page heading section, improving the appearance of the web page. For both the ‘New Slogan for February 1940’ and ‘Keep Mum!’ sections, I decided to include the headings and text included on the current website to allow for a context to be provided for the images situated below each. With regards to the images, I thought it would be beneficial to include these in a form of carousel to allow for interaction with the user. The user would be able to select to view different images through the provided previous and next arrow buttons and also be able to read information about each image, providing an educational experience in an interactive way. The majority of the content on the page was positioned to the left to create both a professional and consistent appearance with the carousel of images being placed in containers that would be highlighted with colour to make these aspects differentiate themselves from the other aspects of the page, becoming more noticeable to the user.

Desktop Wireframe Set 1 (Dig for Victory Page)

As is similar to the previous page, I decided to include an image situated next to the title to help create a more visual page heading section. This was influenced by the provided image at the top of the page on the current website. The content within quotation marks on this page was included through a method to help it stand out from other content on the page with a different background colour and the text being placed in bold and in italics as well as including, where possible, the supplementary information to assist it, providing context to the quotations. Where possible, the content was positioned to the left to help create a consistent and professional appearance throughout the page. This related to the ‘Introduction’, 'Success of the Campaign', ' 'Woolton Pie' ' and ' 'Meat and Poultry' ' sections on the page. There were exceptions to this though with one including the 'Examples of Dig for Victory Posters' section. This was positioned centrally due to the fact that the 'Dig for Victory Anthem' was placed in its own section above, signifying there was no text to be placed with the provided images. Therefore, in my opinion, I believed this to be the best way to structure this whilst also adding variation in structure to the page. Another exception was the section which contained both 'Doctor Carrot' and 'Potato Pete' where the content was structured in a column format with a line to separate both aspects. The column format allowed for the content to be placed without creating the appearance of being compact. The reason why these aspects were included within the same section was because that they were related from my understanding of having viewed the current 'Home Sweet Home Front' website.

Desktop Wireframe Set 1 (Evacuees Page)

For this page, no image was included within the heading section of the page due to the fact that there wasn’t one to utilise on the current website. The majority of the content was positioned on the left to again create a consistent and professional appearance throughout the website. One key aspect to note on this page was the fact that for the subheadings of some of the sections, these were of a smaller font with the information below being indented to signify to the user that these belonged to the same section and that these weren’t the start of new sections.

Although the 'Clothing Required as part of the Government Evacuation Scheme' was a section within the main section 'Saying Goodbye to Loved Ones', this was included within a container with the content being centred. This would have been styled to make this aspect stand out as this was a section on the current website that was structured differently and therefore unique. The images were to be placed first as these images currently acted as headings on the current website, with bullet points beneath to provide clear information for the user. Headings would have been used, where appropriate, to distinguish which bullet points belonged to certain categories.

Similar to the 'Clothing Required as part of the Government Evacuation Scheme' section, the 'Those Leaving the Major Cities to Safer Heavens' section was to also be included within a container that would help make it stand out. This was because, again, this was an aspect of the current website which was styled differently to other parts. The content was to be centred with the statistics provided a table format, helping to attract the user’s attention to this aspect and make it easy for them to understand the content.

The final aspect to note was the fact that the 'Time to Reflect' section, which was the last content section of the page, was styled differently with regards to the colour used to signify to the user that this was the end of the page, differentiating itself from the content above.

Desktop Wireframe Set 1 (Rationing Page)

The content for this page was mostly positioned to the left again to help create a professional and consistent appearance throughout. No image was included in the page heading section due to the fact that there was no image to include from the current website.

The content within quotation marks on this page was included through a method to help it stand out from other content on the page with a different background colour and the text being placed in bold and in italics as well as including, the supplementary information to assist it, providing context to the quotation.

For both the 'Weekly Allowance' and 'What Clothing Cost in terms of Coupons' sections on the page, I decided to place both of these sections within containers that would be styled to make these aspects distinguish themselves from other aspects of the page. This was to make these aspects more interesting than placing the content to the left of the page, including bullet points or concise information within a table to provide clear and informative information for the user. This also helped to add variation to the page, preventing the whole page from becoming paragraph blocks which could have potentially disinterested the user. For the 'Weekly Allowance' section, a separation of content and visuals was integrated through the use of a vertical line, allowing the user to visualise a week’s worth of rations whilst also reading the bullet points.

The final aspect to note was that at the end of the page, the 'Petrol Rationing' and 'Cosmetics Rationing' sections were included on the same line. This was to add variation to the page by separating each section with a vertical line as the two sections before, 'Making Do' and 'Other Forms of Rationing', were formatted using the same method.

Desktop Wireframe Set 1 (Squander Page)

As with most of the other pages for this set of wireframes, the content was structured to attempt to include most of the content to the left to create a professional and consistent appearance throughout.

Furthermore, likewise to most of the other pages, the content within quotation marks on this page was included through a method to help it stand out from other content on the page with a different background colour and the text being placed in bold and in italics as well as including the supplementary information to assist it, providing context to the quotation.

For the ' 'Is Your Journey Really Necessary?' ' section, I decided to include the images beneath the paragraphs due to the fact that including the images next to the paragraphs would create a considerable amount of white space in-between the paragraphs and the next section. This would therefore create an unprofessional appearance.

I decided to add a 'Squander Reminder Posters' section due to the fact that the Lord Woolton quotation had been included in another section and due to the fact that there was very little text to include with the images. The 'Squander Reminder Posters' section was positioned centrally due to the same reasons stated above. Therefore, in my opinion, I believed this to be the best method of structuring this whilst also helping to add variation in structure to the page to make the web page more interesting for the user.

With regards to the 'Making Do' section, I decided to include bullet points for the ways people got by during rationing. This was because of the way in which the information was currently implemented through the use of Roman numerals on the current website. I also thought bullet points would help to make the information clear and easy to understand.

Desktop Wireframe Set 1 (Home Guard Page)

As with most of the other pages for this set of wireframes, the content was structured to attempt to position most of the content to the left, creating a professional and consistent appearance throughout.

Furthermore, likewise to most of the other pages, the content within quotation marks on this page was included through a method to help it stand out from other content on the page with a different background colour and the text being placed in bold and in italics as well as including the supplementary information to assist it, providing context to the quotation.

Regarding the 'Invasion Fears and the LDV' section, I decided to include one aspect of information in bold due to the fact that this was both an additional and interesting piece of information for users to read. This would therefore help to attract the attention of the user and hopefully maintain their interest.

With relation to the 'The Dad’s Army Role' section, I decided to place the images below the paragraphs for the same reason as that stated for the ' 'Is Your Journey Really Necessary?' ' section of the 'Squander Page'. This was because if I were to place the images next to the paragraphs, this would create unnecessary white space, creating an unprofessional and unattractive appearance.

Due to the fact that the 'So what did the Home Guard actually do?' section on the current website included different letters of the alphabet to distinguish each of the different roles, I therefore thought it would be beneficial to replicate this but through the use of bullet points instead. Bullet points would help create a professional structure and help to differentiate each role in a clear way for the user to understand. It’s also worth noting that this was a section within the main section called 'The Dad’s Army Role' which meant, as explained before, the content had been indented to display to the user that this was part of the same section and not the beginning of a new section on the page.

Finally, the content of the 'Thank You' section placed at the end of the page was placed in a container that would be styled to help the user identify that this was the end of the page, enhancing the user experience.

Desktop Wireframe Set 1 (Land Girls Page)

As has been explained with most of the other pages for this set of wireframes, the content was structured to attempt to position most of the content to the left, creating a professional and consistent appearance throughout.

Furthermore, likewise to most of the other pages, the content within quotation marks on this page was included through a method to help it stand out from other content on the page with a different background colour and the text being placed in bold and in italics as well as including the supplementary information to assist it, providing context to the quotation.

With regards to the 'Work and Conditions' section, the images were placed beneath the text as including these next to the text would cause unnecessary white space, as explained before, creating an unprofessional and unattractive appearance.

The only aspect that was largely different on this page was the ‘Uniforms’ section. The image was placed to the left with bullet points placed on the right, helping to clearly state what the uniform consisted of. The reason why the placement of these elements wasn’t opposite was due to inspiration from the current website where the image was placed first and the information after. It is also worth noting that a vertical line was included to help separate each of these aspects, creating a professional and well-structured appearance.

Desktop Wireframe Set 1 (WVS Page)

An image hasn’t been included for the page heading section of this page due to the fact that there wasn’t one available on the current website to utilise for this section.

As has been also explained with most of the other pages for this set of wireframes, the content was structured to attempt to position most of the content to the left, creating a professional and consistent appearance throughout.

With regards to the 'The WVS – A Brief History' section, I decided to format this in the method of a timeline to make this section more visually exciting for the user with the timeline being positioned centrally to help this aspect be bold and eye-catching.

Regarding the duties of the WVS, although these were listed on the current website, meaning that I could integrate bullet points as seen with the other wireframes, I thought it would be beneficial to include the duties as subsections with the relevant subheadings, paragraphs and images. This would help create a more visually pleasing web page for the user and allow them to fully understand each of the different duties the WVS had. It is also worth noting that horizontal lines were placed in-between each subsection to help distinguish between each. For the 'Civil Defence Support' section, I decided to include bullet points as the information that was included within this section was almost similar to a list which meant that including bullet points would provide a clear and professional format for users to easily understand.

Desktop Wireframe Set 1 (Other WW2 Websites Page)

An image hasn’t been included for the page heading section of this page due to the fact that there wasn’t one available on the current website to utilise for this section.

As has been also explained with most of the other pages for this set of wireframes, the content, where relevant, was structured to attempt to position most of the content to the left, creating a professional and consistent appearance throughout.

In order to make the 'Important' message included on the current website clear and obvious to the user, this was therefore placed at the top of the web page, being positioned centrally and in a container to ensure that users wouldn’t overlook this. To also assist in this, the colour of red was utilised as this is a vibrant colour and helps to attract the user’s attention.

For the actual links to the other World War 2 websites, these were included within the images on the page so that when hovering over each image, the name of the website/company would appear with the required link to select. This would make the web page more interactive and interesting for the user.

The final aspect to note was the fact that the 'We can Give your WW2 Website a Mention!' section was included in a container that was positioned more centrally with space surrounding it to help this aspect become more noticeable to the user. This would help encourage them to partake in sending an email to the people at 'Home Sweet Home Front'. The 'Please Note' aspect remained in bold to attract the user’s attention, ensuring that the user would understand that their website may not be displayed.

Desktop Wireframe Set 2 (Generic Aspects)

The hierarchy of information with regards to different font sizes and font weights remained the same as that in the previous set of wireframes but the description provided here is for reference. For example, the page heading was the biggest sized font to help users identify this as the page heading with the headings and subheadings of different sections also being bold but in different font sizes to identify them as different types of headings. A regular font-weight was used for the paragraph text to signify to the user that this information belonged to the bold heading above it. Furthermore, the captions provided, where relevant, were included underneath each image in italics and bold format to help them distinguish themselves as image captions, being a slightly smaller font than that of the paragraphs.

The navigation bar and links within some of the content remained the same due to the fact that this was believed to be the best method of approaching this. Please refer to the previous 'Generic Aspects' section regarding the first wireframe set.

The main aspects which differed to this set of wireframes compared to the previous set began with the page heading sections. Instead of integrating a container with space around the headings, an underline/horizontal line was placed underneath each page heading to help separate these sections from the other sections of each page. I integrated this as I thought it would be beneficial to creating a more professional and well-structured appearance. As well as this being integrated for the page headings, this was also integrated for each section heading of the page for the same reason as before but to also explore a different approach.

With regards to the quotation sections of the relevant pages, the concept remained the same of having a different colour background, placing the text in bold and italics and supplying assisting information to provide a context. However, the format of this in this set of wireframes was different with the quotation text being smaller in font size and the assisting information being supplied inline with a vertical line to separate both pieces of content. This was to allow the user to be able to refer more easily to the context of a quotation when reading the quotation instead of needing to navigate further down the page. This would provide a better user experience as a result.

Regarding the subsections on some of the pages, the concept remained the same of having a smaller font size for the subheadings and indenting the information to signify that these aspects belonged to one of the main sections. However, a vertical line was included to help divide the subheadings from the paragraphs, acting as the same purpose as that for the main sections with their included horizontal lines.

With relation to the way in which the content was positioned on each of the pages, the consistent theme was to attempt to help alternate the positioning of this. This meant that for one section, the text would be placed to the left with the image(s) situated to the right and for the next, this would be the opposite. This was to explore different formatting of content as opposed to keeping the content in a fixed position on each page as was evident in the previous set of wireframes. This would also help the clients to choose from different appearing wireframes for the website.

The order in which items were placed in the footer section remained the same as that in the previous set of wireframes. The logo was positioned to the left and was included to remind the user of the organisation that the website belonged to and to create a consistent brand. However, instead of including the footer section headings next to each of the links, this time the headings were included above the links with an underline/horizontal line below. This was to follow the same pattern as that with the page headings and other headings on the page with underlines/horizontal lines. A vertical line was included, again, to help divide and separate each of the sections regarding the links in the footer section. One final aspect to note is the fact that a border remained for the footer to help separate itself from the other sections of the page and clearly identify itself as a footer to the user.

Desktop Wireframe Set 2 (Home Page)

With regards to this page, the only aspects that differed from the previous wireframe was that instead of including a navigation bar at the top of the page, links were included when hovering over the different provided images. This would help to make the website more interactive and interesting for the user. The generic aspects that changed have been explained previously.

Desktop Wireframe Set 2 (Air Raid Shelters Page)

The only aspect that differed on this page, that hasn’t been mentioned in the 'Generic Aspects', was the 'Air Raid Sirens – How did they Sound?'' section. The difference was that the content was positioned centrally within its container, helping to potentially attract the user’s attention better than being displayed at full width of the container.

Desktop Wireframe Set 2 (Blackout Page)

The first evident change that will be noticeable here is the fact that instead of including all of the text for the 'Britain is Blacked Out' section in the same place, this was divided. The title was situated to the left with a black background and white text and the paragraph text was situated to the right with a white background and black text. This was to signify the theme of black and white, relating to the actual blackout. Capitalisation was included for the heading to signify this as a big issue. A border was included around both sections, helping to differentiate this from the content both above and below.

One of the main aspects that differed from the previous wireframe was that there was an alteration of black and white containers/backgrounds to help relate to the theme of black and white as it would have been during the blackout.

Furthermore, within the 'Businesses are Hit Hard' section, the headings of 'Factories' and 'Local Shopkeepers' were placed in italics compared to the previous section to help create a hierarchy of information for this section as well as attempting different approaches. A vertical line was also included to help separate both of the different affected businesses, creating a professional and clear structure.

Regarding the 'Other Posters Reminding People to be Sensible in the Blackout' section, the structure of this was different to the previous wireframe as instead of placing the images in a row with their captions underneath, they followed the style of the second set of wireframes by alternating with their captions. For example, for the first image, this was situated on the left with the caption to the right and for the image after this, this was placed to the right with the caption to the left. This was to help relate to the style of the web pages, as stated before. Furthermore, a horizontal line was included under each image and caption to help clarify the structure and separate each different image with their caption.

The final aspect to note, that hasn’t been mentioned regarding the generic aspects, is the fact that in the 'Blackout Turns to Dim-Out' section, the heading font was capitalised with the paragraph font below being in bold to help signify that this was both the end of the blackout and the end of the page for the user. It was to also highlight the key events that occurred to reduce the blackout to dim-out.

Desktop Wireframe Set 2 (Careless Talk Page)

The main and only difference on this wireframe compared to the last was that instead of including an interactive carousel, the images and their corresponding information would be placed on the page instead, exploring another method of showing each image with their relevant information. This would also allow for the page to be filled with more content. This would follow the same structure as that for the other pages of this wireframe set with the alternating content to provide variation and more interest to the page. Also, not including a carousel would potentially make the page easier to use for the user, especially relating to primary school children.

Desktop Wireframe Set 2 (Dig for Victory Page)

Due to the fact that there was an aspect on the current website that included an image of both 'Doctor Carrot' and 'Potato Pete' together, I therefore thought it would be beneficial to include a section on this wireframe dedicated to this. This was because in the previous wireframe, I had included this within the 'Doctor Carrot' section and not in both. I decided to format this in the method of that used for the 'Image of the Month' section on the home page wireframe with a container styled in a particular way to help this stand out on the page. A title was included with some information underneath in italics to help indicate that this was a different type of section on the page and the image was included next to the information. Furthermore, with regards to the actual sections of 'Doctor Carrot' and 'Potato Pete', I decided to not include these inline with each other but with one being placed after the other. This would then allow for the user to easily read one section without becoming distracted by the other. A similar format was used to that on the current website where the image would be placed first and the information after. This was to try and allow the user to visualise the characters first before reading about them. It is also worth noting that for the 'Potato Pete' section, context was provided to the quotations to allow the user to understand what the quotations related to as this was something not included in the previous wireframe.

The 'The Success of the Campaign' section was also different due to the fact that the title was centred to try and differentiate from the 'Potato Pete' section before.

For this wireframe, the reason why the quotation beneath the section mentioned above was not in the format as that as the other quotations on the page was because there was no relevant context to provide for the quotation. This meant that making this smaller in font size to accommodate would appear unprofessional and degrade the web page’s appearance.

The final aspect to note that changed is the fact that the ' 'Woolton Pie' ' and ' 'Meat and Poultry' ' sections were displayed inline with a vertical line placed in-between. This was to help create a different formatting option for this section and to improve the appearance of the web page. A vertical line was included to separate each heading and their relevant content, creating a clear structure.

Desktop Wireframe Set 2 (Evacuees Page)

Apart from the aspects mentioned regarding all wireframes, there were only two major changes within this wireframe.

The first related to the 'Clothing Required as part of the Government Evacuation Scheme' section where instead of including this in a container, this was in the format as that for the subsections on this page. This meant that the heading was separated from the images and bullet points by a vertical line. This was to help the user understand that this section related to the 'Saying Goodbye to Loved Ones' section and to also follow a more consistent and professional appearance as that displayed throughout the page. The same format followed as before with regards to the images and bullet points, as I believed this to be the best way of displaying this information clearly and effectively.

The second element that changed related to the 'Those Leaving the Major Cities to Safer Heavens' section. Instead of including the figures within a tabular format, the different categories were listed first in italics with their relating figures in a regular font to distinguish between the two different pieces of information. To make the 'Total Number' aspect more apparent than the previously mentioned categories and figures, this was included in a bold and slightly larger font without italics to help create a hierarchy of information and indicate different context behind the information. This helped to create a clear and concise structure.

Desktop Wireframe Set 2 (Rationing Page)

With regards to this page, this differed in multiple places compared to the previous wireframe.

The first area to note is that for the 'The Development of Rationing' section, instead of placing the bullet points horizontally, these were placed vertically as this provided a better appearance on the page and appeared more professional also.

Secondly, the 'Weekly Allowance' section was formatted to suit the structure of this set of wireframes, as explained before regarding all wireframes, to produce a consistent appearance throughout the page. However, the content was still placed within a container and it was centred to help this aspect differentiate itself from the other content and make the page more interesting for the user as was the same for the previous wireframe.

The majority of the 'Clothes Rationing' section remained the same as the previous wireframe. However, a vertical line was introduced to help create a bigger divide between the 'Gents Suit' and 'Ladies Clothing' and also because this helped to create a professional and well-structured appearance.

Furthermore, the majority of the 'What Clothing Cost in terms of Coupons' section remained the same with regards to the tabular format. However, the heading for this aspect was positioned inline with the table instead of above it. This was because I wanted to explore a different approach to try and add variation to the page and website and also attempt to alternate the content from the previous time where the heading was displayed to the right on the ‘Clothes Rationing’ section.

One final aspect to note is that with relation to both the 'Petrol Rationing' and 'Cosmetics Rationing' these were positioned in a vertical format instead of in a horizontal format with a vertical line to separate them both. This was to both explore another option and to also help match that of the other relevant sections within this page. Although it has been previously mentioned that the content would alternate regarding the generic aspects, because most of the content didn’t have an associated image, this was why most of the content was positioned to the left.

Desktop Wireframe Set 2 (Squander Page)

The two aspects which changed on this page, other than those mentioned regarding all wireframes for this set, were the 'Squander Reminder Posters' and 'Making Do' sections.

For the 'Squander Reminder Posters' section, I decided to format this in the method of including both the images and title inline with each other to explore another option and to also help this section differentiate itself from the other sections in a different way to the previous wireframe. Including a vertical line would help divide the title from the images, helping to identify to the user the name of the section, creating a visual hierarchy. Formatting the structure of this section in this way would also help to add variation to both the website and web page itself.

Regarding the 'Making Do' section, this differed from the previous wireframe as this time, the content was aligned centrally. Due to the fact that the heading and paragraphs were aligned centrally, this influenced the decision to position the image and bullet points inline with each other with a vertical line in-between to divide these sections. Structuring the image and bullet points in this way helped to complement the information above and also helped to improve the appearance of the page. This would also help signify to the user that this was the end of the page with a change in content structure. Overall, this provided a better appearance to this section than the previous wireframe.

Desktop Wireframe Set 2 (Home Guard Page)

Quite a few aspects were modified in this wireframe with the first involving the 'The Dad’s Army Role' section. Here, I decided to align the content centrally within a container to help this aspect both differentiate itself from other elements on the page and help to add variation to the page in order to make the page more interesting for the user. This would help encourage them to keep reading and using the website.

Another section changed was the 'So what did the Home Guard actually do?' subsection. I decided to change the images and bullet points so that they would be in the opposite direction to that in the wireframe before. This was to help experiment and understand the best format in which this content could be displayed. This was due to the fact that because of the quantity of bullet points and images, I believed the only way to position these would be next to each other. Furthermore, I also positioned the text beneath the bullet points to the whole width of this subsection due to the fact that this would help to improve the appearance and signify to the user that this was the conclusion of this subsection.

Another couple of sections modified were 'One in the Eye for Hitler' and 'Home Guard 'Call-up'' so that these sections would be placed inline with each other with a vertical line to indicate that they were separate sections. The reason why these were placed inline was because of the fact that this would prevent three sections being placed in the same format after each other and because the quantity of text for each of these was not as much as other sections. This meant that displaying these sections vertically wouldn’t cause a high column of text and would help to add variation to the page.

The final part changed related to the 'Thank You' section at the end of the page. This remained in a container to help this signify to the user that this was the end of the page but this time, the content was centralised and in a column format. This was due to the fact that in the previous wireframe, it was noted that the text was too short for the image, causing an unprofessional appearance. The text for this modified wireframe was provided before the image to help provide information to user so they would understand the context of the image before viewing the image as opposed to the image first and the information last.

Desktop Wireframe Set 2 (Land Girls Page)

The first aspect I changed for this wireframe was the 'Origins' section, formatting the content centrally and displaying this in a container to help differentiate itself from the other sections. This would also indicate that this was important to read to understand how the 'Women’s Land Army' was invented, providing context to the user.

The final key change to note is the fact that the 'Evenings Out' section was placed in a container to help indicate to the user that this was the end of the page through different formatting.

Desktop Wireframe Set 2 (WVS Page)

The first section I changed for this wireframe related to the 'The WVS – A Brief History' section. I decided to still include a timeline effect but this time I decided to include the years in circles with an arrow indicating a change in time to explore another approach of how to present a timeline effect. The years in circles would be placed inline with their relevant paragraphs situated to the right-hand side to help present a hierarchy of information. A vertical line would separate the dates from the information.

The other aspects changed related to the duties of the WVS, centralising the content to improve the appearance of the last wireframe and make the text appear more interesting to the user. Due to the content being centralised, this meant that when images were included, the best way of displaying these without creating a compact appearance would be to position these beneath the information, allowing users to understand the context before viewing the images.

Desktop Wireframe Set 2 (Other WW2 Websites Page)

As will be evident with this wireframe, I formatted the different WW2 websites to alternate, as explained for all wireframes for this set.

I also, for the 'Important!' section of the page, decided to align the text to the left so that I could insert a warning icon, helping to attract the user’s attention to the warning message in a more visual method. This was also because the warning icon is well-recognised and will therefore cause the user to read the message more than that without the icon.

The final aspect altered for this page was for the email section situated at the bottom of the page. I decided to alter the wording of this so that most of the information would be placed in bold text to act as a better way of attracting the user’s attention, more likely encouraging them to send the people at 'Home Sweet Home Front' an email. I also decided to make this section more visual through the recognised icon of an envelope to signify the email address, placing the email address in bold to make it easy to find for the user.

Mobile Wireframes

Following on from creating the wireframes for desktop, I then also believed it would be beneficial to create wireframes regarding mobile devices to show how I could make the website responsive and to also show to the clients to help them understand how the website could possibly appear on mobile devices.

The main aspect to note for the mobile wireframes is the fact that due to the screen resolutions of mobile devices, the content was structured in a column format to ensure that a compact appearance wouldn’t be created and to allow for the content to have enough space to be shown on the page. Furthermore, on the wireframes that had a navigation bar, a responsive navigation bar was integrated, containing the name of the website and logo to maintain consistent branding throughout. The user would select the ‘hamburger menu’ to navigate the website through selecting a page link contained within this ‘hamburger menu’ such as ‘Dig for Victory’.

These wireframes are viewable through the 'Adobe XD' link provided below.

High-Fidelity Wireframes

Contacting the Clients

As was displayed earlier, I sent an email to both of the clients asking for their preferences with regards to the wireframes previously shown. This would then allow myself to create high-fidelity wireframes based on the wireframes chosen. From this, the clients then stated which wireframes they wanted with some pages asking for myself to decide based on my expertise. The emails and feedback can be viewed below.

With regards to the 'Air Raid Shelters' page, I decided to choose the wireframe from the second set as this appeared more professional than the other wireframe and because the content alternated as seen in most of the other chosen wireframes by the clients. This would therefore help to create a consistent appearance throughout the website. With regards to the 'Rationing' page, I decided to choose the wireframe from the second set for similar reasons stated above relating to consistency. However, I altered some elements to match that of the first wireframe such as the 'Weekly Allowance' section as these appeared more aesthetically pleasing in the other wireframe.

As I now knew the wireframes the clients preferred and the ones that I needed to choose, I then began to build the website with code. However, I did return to create the high-fidelity wireframes once creating a basic structure. Please note that I made some decisions to change some of the elements within the chosen wireframes to create a consistent appearance throughout the website. This was because some wireframes chosen were from a different set to others.

Undertaking Colours Integration Research

After having progressed with the initial stages of the programming/development process of the new website, I then believed it would be beneficial to create high-fidelity wireframes. This would allow myself to then integrate colour into the website as well as other styling. To begin, I undertook research regarding how to utilise colour in a website. From this research I found the following which is shown below.

The Collected Research

From this research I understood that colour would need to be used in a considerate way to not confuse the user or cause discomfort. I also understood that colour needed to be used in a way in which would maintain the professionalism of the website.

The Created High-Fidelity Wireframes

After gaining an understanding of how to utilise colours for the new website, I then created the high-fidelity wireframes based on the web pages at that current time. These can be viewed through the links supplied below.

With regards to the wireframes shown above, it was ensured that a consistent colour scheme was utilised throughout with the colour similar to teal relating to key/important aspects such as quotations. This would help to attract the user’s attention, encouraging them to interact with or read these elements. Furthermore, alternating colours of grey and white were utilised to help divide sections, signifying to the user the start of a new section on the page.

Regarding the page heading sections, limited colour was utilised here as was with the navigation bar to keep these aspects simple with highlights of green relating to the brand. The footer was styled in the colour of black to signify to the user that this was of a different purpose to other sections and to also make this aspect bold. Furthermore, for subsections, the headings were styled in the colour of green to signify that these were of different value to the main headings and that these belonged to the main headings. The final important aspect to note, relating to colours, is that the ‘Blackout’ page had colour schemes applied relating to the status of the ‘Blackout Theme’ switch with main colours of black and white being used to relate to the blackout when selecting to turn the switch on.

Elsewhere, necessary images and text were implemented to demonstrate the potential final outcome. The fonts used were of different font-weights to relate to a hierarchy of information. For example, the headings were bolder and larger than the paragraphs.

Creating the Flowchart and Sitemap

Introduction

As well as wireframes, two other key aspects were both a created flowchart and sitemap for the new 'Home Sweet Home Front' website to both demonstrate how the website would function and how a user would undertake their journey before, whilst and after visiting the website.

The Flowchart - Inspiration Research

To begin, I first created a flowchart, demonstrating the different processes a user would undertake with the relevant pages at this current time as well as demonstrating the complexity of the website. To begin, I first viewed some inspiration as well as a previously created flowchart to assist in the creation of the final flowchart. This related to both basic and more complex flowcharts to remind myself of how to structure a flowchart. These can be seen below.

Although the first flowchart wasn’t a real-life example, this helped myself to understand how different shapes represented different actions within a flowchart. This would then influence how I would utilise certain shapes within the final flowchart I would create.

The second flowchart was similar as this wasn’t a real-life example either but displayed aspects similar to that in the first. This also provided more detailed information to help myself fully understand flowcharts. This was also something viewed before in other projects and something that I knew was very useful.

From the final example, a more complex flowchart, I understood that there were multiple steps involved to a process shown in a flowchart and that many different arrows were utilised to show a reflection of a journey. I also understood that the journey/process shown would need to be very clear to the viewer otherwise they may become confused with what was happening in the flowchart and product/system as a result.

The Final Created Flowchart

After having viewed the inspiration both above and in a previous project, I then decided to produce the final flowchart for the 'Home Sweet Home Front' website. This can be viewed through the 'PDF' link supplied below.

To explain the flowchart, the user would first undertake the process of utilising their selected device to access the website. Once they are situated on the website, they may or may not read or interact with the content on the 'Home' page. In both circumstances, the question will be asked as to whether they visit another page on the website. If they don’t and they exit the website, the process will immediately stop. If they do visit another page, a process is undertaken of asking which page this is until the page is identified. Once they have selected a page, the user would then be navigated to that page. On particular pages, there are certain elements such as the 'Blackout Theme Switch' on the 'Blackout' page where the question will be asked if they select or interact with this. If they do, then the action will be undertaken depending on what action this is. Once they have finished with a particular page or if they don’t interact with certain elements, they will then either interact with or read the content on the page and the cycle is then repeated as explained before. The cycle may also stop when the user has navigated the whole website and is therefore ready to exit.

The Sitemap - Inspiration Research

As well as a flowchart, I also created a sitemap, as stated before, to show the navigation of the current pages I was undertaking. To begin, I viewed some inspiration online as well as viewing a previous sitemap I had created to assist. This would help myself fully understand how to structure the sitemap for the 'Home Sweet Home Front' website. This inspiration can be viewed below.

From the first sitemap, I understood that the home page would be placed at the top to signify hierarchy as well as other web pages below. With regards to the other web pages, these were divided further, displaying further website links under each page. Additionally, colour helped to indicate different aspects of the sitemap, something which I believed to be beneficial when creating my sitemap for this project.

From the second sitemap, I understood that, again, the home page was placed at the top with different colours symbolising different aspects of the website. However, in some situations, aspects of the web pages were also specified with the form being an example. Details were included for the home page with regards to the content which would be placed onto this page, a useful aspect to include.

The Final Created Sitemap

After undertaking the previous research and viewing a previous sitemap, I decided to create the sitemap. This can be viewed through the 'PDF' link supplied below.

To explain this sitemap, the home page would be the main page which would also link to the other pages. As there would be a fixed navigation bar on each page, the other pages would also be able to be navigated back to the home page. Where hyperlinks were included in the text on a particular page, this was shown through an additional section underneath each page such as 'Air Raid Shelters'. However, sometimes this related to an interaction on the page with the 'Blackout Theme Switch' and the carousels for the 'Careless Talk' page being key examples. Furthermore, if links were within particular sections on a page such as the WW2 website links, these were indicated with arrows following on from each stated section underneath a particular page. One final key aspect to note is that regarding the footer section, each page would have access to this with the footer including links to pages, both the topic pages and legal policies pages, as well as a link for the logo which would navigate the user to the home page.

A Reflection of the Processes/Work Undertaken at this Stage

Undertaking the processes shown above allowed for myself to gain a full understanding of how to make the website as professional and user-friendly as possible as well as how to resize the pages for different devices. Although the development/programming process had already begun during some of the processes shown above, this still enabled myself to integrate aspects learnt from undertaken research. Overall, these processes allowed for a successful programming process to be undertaken which will be displayed in the next section.

Although displayed on the web page, the document created to help with these processes with references can be viewed below.

The Development/Programming Process of the 'Home Sweet Home Front' Website

As was stated above, in this section you will be able to view the different development/programming processes undertaken during this project. This demonstrates the initial stages through to the latter stages as well as displaying problems experienced and how I resolved these problems. To view these development/programming processes, please view the 'PDF' documents supplied below. These have been provided in different parts which each continue from where the previous part was stopped.

Making some Minor Adjustments/Refining the Project Based on Client Feedback

After having placed the current version of the website on my server for testing purposes, I then sent the link to this to the client(s). From this, I was sent a document to ask for some minor adjustments to be made to the final website. I then undertook the process of implementing most of these changes. These aspects can be seen below. Furthermore, I also organised the current code within each file to make this more professional and readable, separating aspects into relevant sections. This will have been evident with a few examples placed at the end of the development/programming processes document for part 4 above.

Feedback/Testimonial from the Clients

During the latter stages of this project for the semester, I was provided with some feedback from the clients regarding the outcome I had produced at this stage. This can be seen below through the provided image.

The Final Outcome/Conclusion

I believe that from the provided brief, I managed to succeed very well, being able to create a new aesthetically attractive and interactive website that resized to different sized devices effectively. Throughout this project, I also managed to integrate new areas relating to 'JavaScript', 'jQuery' and 'PHP', being able to explore other areas of website development. I was especially proud of being able to allow for a switch to function on the 'Blackout' page to change the colours of the page, improving the user experience.

If I were to approach this aspect of this project again, I would attempt to utilise 'front-end' frameworks such as 'React' as well as utilising 'SASS'. This would allow myself to explore other programming environments as well as being able to work more efficiently through the pre-processor 'SASS'.

Overall, I enjoyed working on this project very much as it tested myself regarding exploring new areas in programming languages as well as being able to create a design that was attractive and professional, despite being a developer.

I look forward to continuing this project by completing the other pages during the course of the next few months. This was something agreed upon between myself and the clients at an early stage.

Please Note: Due to the fact that I will be continuing to develop/build other pages of the website at a later stage, when required by the clients, this therefore means I have not assembled a handover document at this stage. This is because the website still needs to be added to as well as refined before creating a guide to provide to the clients regarding the whole website.

To view the final outcome of the pages that were completed as a requirement now for the website (12 pages), please select the provided link below.




Manchester United Website Application Project

Brief: "To produce a website application utilising new technologies that allows fans of Manchester United to view Manchester United players with their statistics and to be able to compare these statistics with either other players or by matchday (relating to the 'Premier League')"

Introduction

The main purpose of this project was to help myself explore new technologies through a selected topic area. This was to accompany the website that I was creating for 'Home Sweet Home Front' and to help show different projects for my second semester of my third and final year at the University of Winchester. Before choosing the final brief idea shown above, I considered multiple different project types to help myself understand which type of project would benefit myself the best. Due to the fact that this project’s sole purpose was to explore new technologies, this therefore meant that I focused less on other aspects, such as design, in order to help myself explore these technologies as best as I could. I undertook two main roles, one being a designer in thinking of how the project could appear aesthetically and the other being a developer, allowing for the application to function fully.

Please note: Due to the fact that this was also a project to accompany the new 'Home Sweet Home Front' website, this therefore meant some processes weren’t as detailed as the other project.

Brainstorming Initial Project Ideas

As explained before, I first of all brainstormed initial ideas to help myself understand which project would be the best in terms of outcome and scope. Before doing this, I first of all viewed current technologies/programming languages on ‘Indeed’ in the area of ‘front-end’ website development, brainstorming these into a mind map. This was because this was something suggested by the lecturer and something that would help myself in understanding which areas to explore. The reason why ‘front-end’ was viewed was because this was an area of industry that I wanted to enter after university.

After brainstorming the current technologies, I then brainstormed project ideas relating to different topic areas. As will be evident below, I brainstormed various areas such as a single page application and a game on a web page or miniature website. Whilst brainstorming these ideas, I viewed inspiration on 'CodePen', something also suggested by the lecturer, which would help to inspire myself. The ideas which appealed to myself the most were indicated with a blue star/asterisk. These were the ideas that I thought might be the most feasible/achievable in time scale as well as the ones which I thought were the most interesting.

Both mind maps are viewable below.

Specifying Project Ideas Further

After specifying the ideas to those with the blue stars/asterisks, I then undertook this process again, specifying the ideas to four. The first was the Manchester United football season website application idea. The second was the water drinking website application which reminds users to drink water and allows them to record how much they drink daily. The third was the creation of a character website application which allows users to change certain aspects such as hair colour and eye colour. Finally, the fourth was the animations of typed text into a website application/web page.

The reasons for specifying the ideas to the four explained above was because of the fact that I supported Manchester United and would be able fully understand which content to place into the application as well as something I would have had more passion for. With regards to the second idea, this was listed due to the fact that this would be an area I would have found useful as I didn’t drink a sufficient amount of water daily and making this application would have helped to remind myself to drink water as well as anyone else that didn’t drink sufficient water. The last two were listed due to the fact that these were areas I knew had been achieved by other people in the past as well as areas which I thought were interactive and interesting. The inspiration for the last two ideas on 'CodePen' can be viewed below.

The Inspiration for the Third Idea - Before and After Changing Options

The Inspiration for the Fourth Idea - Before and After Interacting with the Mouse

Choosing the Final Project Idea

After having listed the four options displayed previously, I then decided to choose the final idea of the Manchester United player statistics website application. The reason for choosing this was because I believed this area to have the most potential compared to the other ideas as well as an area which could implement ‘back-end’ functionality, an area I wasn’t as confident with and wanted to improve.

The original purpose of this idea was to allow fans of Manchester United to view player statistics either for the whole football season or based on weekly matches with both green and red arrows displaying whether players would have performed better in one week than another week, for example. The original idea involved allowing the user to be able to compare one player with another player and to be able to search for players either through an entered search or a search created by selecting certain filters. As the idea had now been chosen, this allowed for continuous progress to be made.

Planning Methods of the Project

One key area to undertake regarded creating documents to help myself organise the project and assist with time management. Two documents were created, one a task table and the other a Gantt chart, viewable below.

Please note: This was very similar to the 'Home Sweet Home Front' project with regards to the reasons and descriptions of the planning methods. This was because this followed a similar pattern to help myself plan in the best way possible.

A task table was created to help allocate specific hours to tasks as well as help myself understand whether a particular task had been completed, either through the 'Progress of the Task' or 'Has the Task been Completed?' columns. Furthermore, consequences of not completing tasks as well as identified risks and how to overcome these were included to also help myself counteract against any issues which would occur during the project. The tasks listed related to various areas such as target audience and creating wireframes but ultimately this would act as a tool for analysing progress of the project.

A Gantt chart helped to display a more visual timeline of the project, allocating weeks instead of specific hours to understand what aspects to progress with in certain weeks. As will be evident below, there were continuous processes planned such as documentation and maintenance of a work log. This was because these would be added to throughout the semester and could not be completed within a specific allocated period. Furthermore, regarding the development process, this was divided into further tasks not displayed on the task table. This was regarding the 'front-end' and 'back-end' development with the 'front-end' planning to be completed first to then allow for further focus on the 'back-end', an aspect I had little knowledge of and therefore needed to invest more time within. The majority of the main processes were planned to be completed approximately at least a week before the submission deadline to allow for refinements and enough time to submit the final project. One final aspect to note is that the processes suited more to design were planned to be completed first to then allow for more understanding of how the final website application would appear, creating a professional and user-friendly outcome.

Both the task table and Gantt chart can be viewed below.

The Task Table and Gantt Chart

Branding Research

The purpose of this process was to help myself fully understand which fonts and colours to utilise in the Manchester United website application to make it personalised to the team and fans.

Analysing the Current Colours

In order to understand the colours utilised for Manchester United, I therefore analysed different areas, utilising a colour picker tool in 'Adobe After Effects' as well as 'DevTools' on 'Google Chrome' to highlight the 'HEX' values of each. After this, I then noted down all the collected 'HEX' values in preparation for creating colour palettes. This process can be viewed below.

Creating the Colour Palettes

After having undertaken the previous processes, I then decided to produce seven colour palettes to help explore different approaches and to provide more choice when selecting the colours to use in the website application. These colour palettes included colours highlighted before as well as more vibrant colours of the colours highlighted before. This was because I thought that some colours were potentially uninteresting/unenthusiastic and that integrating vibrant colours would help to create more energy. These colour palettes can be viewed below.

The colour palette chosen by myself was the first as this was the most vibrant and would cause for an exciting final outcome. However, I did decide that I would consider using some colours from other colour palettes as some of these would help to reflect Manchester United better. This related to the darker reds.

Analysing the Current Utilised Fonts

Similar to the colours, I also analysed the fonts utilised by Manchester United, viewing their website to complete this task. This was achieved through using the 'DevTools' on 'Google Chrome' and after I had finished, I listed the fonts as I did with the colours shown before. This process can be viewed below.

From viewing the fonts on the official website of Manchester United, I understood that different font-weights and fonts were utilised to signify different elements of the website. This is evident with the title 'SHAW IS YOUR PLAYER OF THE MONTH' and the paired paragraph font, with the title being bolder and capitalised and the paragraph font being lighter, displaying a hierarchy of information.

Undertaking Fonts Research

In addition to the previous task, I also viewed a website regarding fonts utilised in sports, helping myself to understand and identify key features of these fonts. This can be viewed below.

From undertaking this research, I fully understood that mostly ‘Serif’ fonts were utilised with also boldness/thickness being applied. Furthermore, it was also understood that modern appearing fonts were utilised. These were therefore areas to consider when specifying some fonts to utilise in the website application later on.

Highlighting Fonts to Utilise

After gaining a full understanding of the types of fonts used in sport, I then decided to shortlist fonts both within 'PowerPoint' and within 'Google Fonts' that appeared similar to the previously discovered research. These were fonts that were bold and that were 'Serif' fonts. This was relating to heading fonts to be used with paragraph fonts to be chosen at a later date. This process can be viewed below.

After completing the previous process, I then utilised 'Google Fonts' again to list the suggested pairings to be paired with each of the highlighted 'Google Fonts'. This was because I would be selecting 'Google Fonts' to be placed within the final outcome due to the fact that I would be able to select a suggested pairing, providing better fonts than if I were to choose these myself. I also believed the fonts on 'Google Fonts' to be more unique which would therefore help to distinguish the website application from other similar products. This process can be viewed below.

After having completed the previous task, I then decided to choose the 'Google Font' called 'Comfortaa' for the headings font due to the fact that this was the font that appeared to be the most modern as well as the one which appeared to be the most professional. With regards to choosing the paired font to be used for the paragraphs/areas not requiring headings, I decided to choose 'Roboto' as this was the font that appeared to be the boldest, relating to the research discovered of sports fonts being bold in font-weight.

Inspiration Research

In order to understand the statistics to include within my project, I therefore needed to view existing products that were similar to my project idea. Whilst undertaking this task, I also listed the advantages and disadvantages of each existing product. This would help myself to understand which features would be beneficial to integrate as well as those that would need to be discounted. This process can be viewed through the 'PDF' link supplied below.

From this inspiration research, I understood that detailed statistics were included with the ability to allow the user to select filters to categorise the provided information. This would allow the user to find the information they required more easily. Furthermore, I also understood that player profiles were included to help provide a context to certain players. With regards to player comparisons, I knew that utilising colours to highlight those performing the best in certain areas would act as a visual aid to users.

With regards to the application I would be building, I therefore understood that I needed to integrate these aspects to make it interesting and informative to users. One final aspect to note is that I obtained a knowledge that including interactive elements as well as an exciting appearance would help to make the application more interesting also.

Target Audience Research

Introduction/Initial Stages

Another key area to undertake before creating aspects such as wireframes was to understand the target audience for the Manchester United website application. To begin, I listed a few target audience examples from my judgement. These were Manchester United fans, football fans in general as the website application could have been extended to include other teams and players and those interested in sport.

The main target audience area would have been Manchester United fans as the website application would have revolved around the topic of Manchester United. Furthermore, if having been able to expand the application to include other teams, this would therefore have influenced the audience as supporters of the included teams would have needed to be considered also. The final area I considered was those interested in sport due to the fact that football is a type of sport and could have therefore attracted anyone who had an enthusiasm for any type of sport or anyone who was interested to learn more about a particular sport.

Collecting Research - Introduction

After listing my initial ideas for target audiences, I then undertook target audience research regarding different areas relating to that shown previously including demographic research regarding supporters for different teams. This was to understand the scope of those that the application could be marketed to. This can be viewed below.

Collecting Research - Supporter/Attendance Statistics

The key aspect to note with the first chart is that the attendance would have been affected by the capacity of the football stadiums of which Manchester United have one of the highest capacities. However, this demonstrated that Manchester United were the most popular supported club in the 'Premier League'. This also demonstrated that the other best performing clubs such as Arsenal and Liverpool were also highly supported with these being placed in the top 8. One final aspect to note is that this demonstrated that there was a high support for football teams in the 'Premier League'.

Likewise, the second chart demonstrated that Manchester United was the most supported 'Premier League' club but this time through social media. Furthermore, this also demonstrated that the other most supported clubs were those that were the other most successful clubs in the 'Premier League' such as Liverpool. This demonstrated that particular clubs had a very large following on social media.

Regarding the charts relating to the following on different social media platforms, it was understood that again, Manchester United were the most popular but that also some smaller teams were also well supported such as Newcastle United and that sometimes the smaller teams would have had a higher following on a certain platform than the bigger teams. This is evident with Newcastle United having a higher Instagram following than Manchester City.

Collecting Research - Manchester United Supporter Demographics

I discovered that the age demographic for Manchester United supporters had potentially changed from those much older being the majority to those that were younger. It was also discovered that a range of different ages were included for Manchester United supporters, indicating that the target audience would therefore have to relate to anyone of any age who supported Manchester United, emphasising the need for an easy to use website application.

With regards to the gender for Manchester United supporters, I was able to discover that this was very equal with 31% being women and 30% being men. This therefore suggested that, again, there was more than one key area to focus on with regards to the target audience for the Manchester United website application.

Collecting Research - Supporter Demographics in General

From collecting the graph displayed above, I understood that there were more male supporters than female supporters of football in the United Kingdom, emphasising that therefore the website application would need to cater more for those that were male. This also contradicted the research found for the gender of Manchester United supporters. However, this also emphasised the need to be able to create a website application which would appeal to multiple audiences in order to gain the most users.

Although the research relating to age related to the 2014/15 season, this helped myself to understand that the quantity of younger supporters was increasing, emphasising the need for a simple and exciting website application to engage younger audiences as well as making this highly interactive to increase interest amongst those that were slightly older (18-34 years).

Collecting Research - Demographics Relating to those Interested in Sport

The first graph above helped myself to understand that sport was an area of interest to people, emphasised through the various types of sporting activities undertaken. Most of this related to fitness and due to the fact that participation was of a high level, this therefore indicated that there may have been a high level of interest in sport, especially football, within England.

Likewise, the second graph also displayed a high interest in sport through the high percentage of those that met the aerobic guidelines, with a fairly equal divide between those male and female. This again suggested that there may have been a high interest in sport in general with a higher chance of becoming interested in football.

The final graph related to participation by age group. This helped myself to obtain a knowledge that as age increased, the higher the percentage would be of those participating in sport less than once a week. Also, as the age decreased, the participation in sport three times or more a week would increase. This demonstrated that the target audience would be of a younger age. This helped to emphasise again that the demographic of the website application I would be creating would be one that needed to suit all ages.

Conclusions from Collected Research

From undertaking the target audience research, I understood that due to the high quantity of supporters for different teams as well as the varying age and gender groups, that the target audience wouldn’t be specific. Instead, the target audience would be those of a variety of ages and genders. This would emphasise the need to create a website application that would be user-friendly and not overcomplicated in order to appeal to both those of very young and old ages but also to include interactive and interesting features to engage all audiences. The information that I would need to provide on the website application would also need to be clear and understandable by anyone as well as creating a consistent and professional interface to reduce confusion caused to users.

Created Target Audience Personas

After now having completed the previous task of highlighting the target audience, I then decided to create three personas to reflect different types of users. This would therefore help myself to understand how to design and build the website application from the view point of users as opposed to my own view point. These personas can be viewed below.

Initial Wireframes

Introduction

After now having undertaken initial research and being able to understand which areas to include in my website application as well as how to implement these to suit the target audience, I now began by creating initial wireframes. These related to the pages that would be included on the website application. In order to provide more options for myself, I created various wireframes, creating more than one for each page. This was using 'Adobe XD', helping to create highly professional appearing wireframes as opposed to using sketches.

Please Note: To view the wireframes in better detail, please select the provided 'Adobe XD' links at the end of each section.

Desktop Home/Introduction Page Wireframes

With regards to the first wireframe and other wireframes throughout, I believed it to be beneficial to include the title of the website application. At this stage this was 'Manchester United Player Statistics 2018/19'. Please note that the statistics utilised at a later date were those from a previous season as I realised that this would provide a more complete set of statistics for a season than the current one. Regarding the title section, I believed this to be beneficial to include because it would have helped remind the user the purpose of the application. Within this title/header section, links would have been included to allow users to easily navigate between pages on the website application. For this wireframe as well as other wireframes, I decided to place these in boxes, easily identifying these as aspects to interact with for the user. Furthermore, for this wireframe, I included two sections in two different containers signifying the tasks the users would be able to undertake on the website application. Within this, an overview would be included, providing a clear explanation of what the user needed to undertake, enhancing the user experience. Also included would have been links to the separate pages placed underneath the explanations to help the user identify what to select in order to navigate to the required page. One final aspect to note relates to the footer where a logo of Manchester United would have been included to relate to the theme of the website application. Furthermore, a link to view sources utilised to create the website application would have been included to provide reference to others. The other main aspect of the footer is the fact that I decided to include the links to the pages. This would have allowed for quick reference for the user, allowing them to easily navigate to other pages. This was applied to all other pages also, with some variation in design. For this footer design, I decided to separate the different aspects by placing these further apart, helping to cause less confusion for the user.

Regarding the second wireframe, this was of a similar structure to the first. However, to make the page more interesting, I decided to include footballs for each of the different titles of the website application’s pages. This would have also helped to reiterate the theme of the website application to users. Furthermore, the header section was different, placing all navigation links in a bar format to differentiate these aspects from the title placed above, helping the user to identify that this was a form of navigation. Regarding the footer, I decided to place the page links in horizontal format underneath a heading to allow the user to identify the purpose of these links, placing a line in-between this aspect and the other aspect of the footer. This would have helped to create a clear and professional structure. Both the header and footer sections were also applied to some other wireframes, demonstrating ideation.

The aspect that I changed for this option related to the positioning of the content. Instead of placing both sections next to each other, I placed these underneath each other with the content alternating. This helped to cover more space on the page whilst also allowing the user to read one aspect before reading the next, providing a better user experience through reducing the feeling of being overwhelmed by the content on the page. I decided to keep the footballs on this wireframe to make the page more interesting and relatable to the project’s theme, as stated before.

This was of a similar concept to the previous wireframe with regards to placing content underneath each other to allow for a better user experience as well as covering the page. However, instead of including the titles in footballs next to text, I decided to include placeholder images instead. This was because I believed this would help the page to be more visual as well as visually being able to inform users of each section of the website application. Furthermore, I decided to include a welcome message as I believed this would help to welcome the users to the website application, allowing them to fully understand the purpose of the application.

Desktop Player Comparison Page Wireframes

As is evident above, the first wireframe would have allowed users to compare players of Manchester United where they would have been able to select different filters to specify players or search by player name. This is shown within the first wireframe where the players would have appeared. After selecting on the desired players, this would then have displayed the players next to each other as shown in the second wireframe with their statistics placed underneath. The reason for displaying the players and their information in a horizontal format was because I believed this would have been easier for users to compare statistics of each player as opposed to placing the players underneath each other. Furthermore, lines were included to allow users to identify which statistics belonged to certain categories such as ‘Goals’. One final aspect to note is that the title of the page would have been placed at the top to remind the user of which page they would be situated on. This description relates to the first two shown images as this would be before and after selecting the players to compare.

Regarding the second wireframe, this was of a similar structure to the first. However, to make the page more interesting, I decided to include footballs for each of the different titles of the website application’s pages. This would have also helped to reiterate the theme of the website application to users. Furthermore, the header section was different, placing all navigation links in a bar format to differentiate these aspects from the title placed above, helping the user to identify that this was a form of navigation. Regarding the footer, I decided to place the page links in horizontal format underneath a heading to allow the user to identify the purpose of these links, placing a line in-between this aspect and the other aspect of the footer. This would have helped to create a clear and professional structure. Both the header and footer sections were also applied to some other wireframes, demonstrating ideation.

The third and fourth wireframes above were of a similar concept to the previous wireframes with regards to displaying the players horizontally and allowing users to filter or search for players. However, I decided to include a title of 'Search Preferences' to allow the user to understand the purpose of the filters and custom search. Furthermore, horizontal lines were included to divide the search filters from the results/players, creating a clear and professional structure. Another aspect to note is that all content was positioned centrally to produce a tidier appearance as well as one that was more aesthetically pleasing. With regards to the players, these were displayed in a circular format to produce variation between the players and content below, signifying different pieces of information. One final aspect to note is that with regards to the statistics for the players, these were placed within boxes in a centred format with the categories signified by bolder font. This was to allow for a professional and aesthetically pleasing appearance on the web page as well as easily differentiating between different statistic types.

Desktop Individual Players Page Wireframes

As is evident above, this page would relate to viewing each individual player’s statistics. First of all, the user would have been presented with a page with all available players whilst also allowing them the option to either enter a name through a custom search or select filters to specify a certain player. This would have helped them save time. On the first wireframe regarding the first part of this page, the filters/search preferences would have been placed above the player results to create a hierarchy on the page with each player being displayed beneath with the option to select the desired player through their name. Once selecting a player through their name, the user would have then been navigated to the selected player where they could have viewed general information and statistics for different matchdays as well as the full season, as displayed with the second and third images above. This would have been achieved through selecting one of the links situated to the right of the player. The statistics would have then been displayed, showing either a higher or lower performance compared to a previous matchday through different colours assigned to arrows. This would have related to the individual matchdays as opposed to the full season statistics. This would have helped create a visual understanding for the user through the familiar colours of green and red. The reason for placing the player information above the statistics was because this would have helped the user to be introduced to the player first before viewing their performance, providing context to why some statistics may have been low/high (e.g. position of the player). This description relates to the first three wireframes shown above.

As is evident with the second set of wireframes (the fourth, fifth and sixth images), there was a similar concept of being able to search for players through a custom search or filters. However, the search preferences with the title of the web page would have been placed next to the player results, exploring another option of how to structure this page. This would have allowed users to view players whilst specifying filters, saving them from needing to navigate further down the page. With regards to viewing individual players, the players would have been situated at the top of the page next to the image of Manchester United’s logo, helping to reiterate the theme of Manchester United. Furthermore, all information would have been displayed below, allowing for users to view the image of the player before exploring further. One final aspect to note is all aspects relating to general information and statistics would have been grouped together to help separate different areas into different sections.

Mobile Wireframes

Regarding the mobile wireframes, these demonstrated how each of the previously shown desktop wireframes would appear on mobile devices, demonstrating responsiveness. The main aspect to note is that all content remained but that all content was displayed in a vertical format to suit mobile devices as well as including a responsive navigation menu to hide the navigation links, presenting a more professional appearance. This was for the same purpose as that stated in the 'Home Sweet Home Front' project. These are viewable through the 'Adobe XD' link provided below.

The Chosen Wireframes

Due to the fact that the sole purpose of this project was to explore new technologies, I therefore decided to not create high-fidelity wireframes as I could use the currently created initial wireframes and apply the relevant chosen colours and fonts shown before. This would have allowed for more investment in developing the outcome. The chosen wireframes can be viewed below.

Regarding the chosen wireframe for the 'Home/Introduction' page, I thought this was the most interesting to users as well as the fact that footballs were included. This would have helped to relate to the theme of the website application. Furthermore, I believed this to be the most aesthetically pleasing wireframe due to the way in which the content was structured. When developing/building the website application, I also decided to add a welcome section, as seen on another wireframe, to help introduce the user to the website application. With regards to the footer sections for all of the pages, I chose the alternative design to the one displayed above as this helped to divide the different sections better, enhancing the user experience. With relation to the header sections for all the pages, I decided to integrate that shown in the wireframe above as I thought this would help to separate each navigation link better by including them in boxes rather than within one bar with lines underneath.

One of the main reasons for choosing the wireframe set for the 'Individual Players' page was because when searching for players, I thought it would be better for the appearance if the players were displayed underneath the search aspect rather than inline. This was because this would cause unnecessary white space to occur with the players section being longer in height than the search section. Also, I believed having the player's information placed next to their image, after selecting a player, would also help to create a more professional appearance whilst also allowing for an introduction to the page. Otherwise, the user could have become overwhelmed with the information all situated in one area.

Finally, regarding the 'Player Comparison' page, I decided to not choose a specific wireframe set but to combine different elements of each. This was because I thought doing this would help to create the best appearance as there were elements to each wireframe set degrading the appearance. I decided to include the title of 'Search Preferences' as well as a further title called 'Player Results' to help differentiate between the search and players sections. Furthermore, I chose to include the different containers for each statistic type as this was more attractive, in my opinion, than displaying with horizontal lines.

A Reflection of the Processes/Work Undertaken at this Stage

Despite having developed the Manchester United website application whilst undertaking some of the processes displayed above, this still helped myself to plan and undertake a process to then create a professional outcome. With regards to the development processes, these can be viewed in a separate supplied document beneath this section. Within the development process, I attempted to include all planned features shown above but due to the fact that I was new to the framework I was using called ‘Laravel’, as will be explained later, I was unable to achieve everything. However, I still managed to create a professional and working prototype of the concepts displayed above, introducing myself to new technologies throughout.

Although displayed on the web page, the document created to help with the processes shown above with references can be viewed below.

The Development/Programming Process of the Manchester United Website Application

As mentioned above, in this section you will be able to view the development processes undertaken for this project with challenges encountered as well as those overcome. This document also shows the final code for the most relevant files of the website application, demonstrating organisation and commenting of code to be readable and maintainable. To view these processes, please view the 'PDF' document supplied below.

The Final Outcome/Conclusion

Throughout this project, I was able to learn of new areas within website development regarding modern frameworks relating to both 'front-end' and 'back-end' website development. I was especially able to enhance my 'back-end' website development skillset, utilising data within the final outcome as well as using the 'PHP' framework called 'Laravel' to build the final outcome.

If I were to approach this project again, I would attempt to utilise 'React' with a 'back-end' website development framework to challenge myself even further. This is because I wanted to use 'React' in this project but due to difficulties experienced regarding discovering a 'back-end' website development framework to use, this caused myself to utilise 'Laravel' instead. Furthermore, I would attempt to integrate even more complex functionality into the website application to allow for a more interactive experience.

Overall, I believe I managed to create a professional and functional website application to allow for fans to view statistics regarding different players for the 2017/18 'Premier League' season. Despite not achieving all aspects I wanted to implement, I believe this project was a success, especially because I was using 'Laravel' which was a framework not used before.

Please Note: For this project, as the main purpose was to introduce myself to new technologies and was therefore not a project for a client but for myself, I therefore didn't create a handover document. This was because this wasn't to be provided to a client and therefore didn't require a guide to be created to explain aspects of the code/outcome.

The final outcome for this project can be viewed through the provided link below.




Attendance at Networking Events During the Semester

Brief: "Students must attend and/or demonstrate work or tech at the networking event series on 3 occasions."

Introduction

As well as completing my project work for the semester, I also attended three networking events all situated at 'Studio Republic'. These were during February, March and April. I enjoyed listening about various topics as well as understanding different people's views on these topics. Furthermore, I was also able to gain some responses for my primary research regarding my dissertation. The networking events I attended can be viewed below with images.

Networking Event 1 - 'How to be creative – sustainably'

Whilst visiting this networking event, I was able to gain interest from another industry professional regarding completing questionnaires for my dissertation. I also learnt how to be more creative from the talk provided.

Networking Event 2 - '10 years in the often maligned and misunderstood SEO industry'

This talk was interesting as this related to website development, an area of industry I wished to persue as a career. I understood more about Search Engine Optimisation within the industry. Furthermore, I also understood more about WordPress which related to my dissertation topic. Not relating to the talk, I was able to gain more interest from other people regarding completing a couple of surveys for my dissertation.

Networking Event 3 - 'Digital Media Showcase - Students of the University of Winchester'

From this talk, I was able to view the work of my fellow class colleagues and other people involved in the Digital Media courses at the University of Winchester. This aided me in understanding how to present confidently and clearly in front of an audience, in preparation for the business pitch at 'Transmedia 2019' the following day.




Completed Course Forms

I have provided both the completed and updated NLT2 and self-submission assessment sheet forms below as these were part of my course requirements. These aspects needed to be completed to demonstrate the tasks I had undertaken during the semester and what could be expected in my submission as well as how well I believed I had succeeded regarding different assessment criteria.




DM3110 Professional Portfolio (Interactive 'PDF' Version)

Introduction

Despite not relating to the DM3104 module, I was required to create both a printed and online professional portfolio to showcase my best work. My printed portfolio was submitted separately as this wasn't electronic. However, the interactive online 'PDF' version of the professional portfolio has been provided through the clickable link at the end of this page section.

Explanation for the Choice of Final Outcomes

I chose to mainly include work relating to website development in the professional portfolio as this was an area of industry I wanted to pursue once graduating from university, especially in the area of 'front-end' website development. Therefore, this meant that demonstrating various skills within this area of industry would help to impress potential employers when searching for an occupation role. Despite this, I also included work relating to other areas such as application development and animation to demonstrate my experience in various areas. I also ensured that design work was included, as from my understanding, this was beneficial to possess as a skill if wanting to become a 'front-end' website developer.

Within the professional portfolio, I included final outcomes/projects that demonstrated different stages of my degree at university to display the journey I had undertaken and how I had developed my skills whilst progressing through.

Finally, other than projects themselves, I also placed pages relating to information about myself as well as that regarding testimonials into the professional portfolio. This was to demonstrate my characteristics/personality, allowing potential employers to discover more information about myself as an individual.

The Actual Interactive 'PDF' Version of my Professional Portfolio

As explained at the start of this page section, the link to view the interactive 'PDF' version of my professional portfolio can be selected below.

Please Note: I have also included references for the images/resources utilised in this project below.