Analysing the Provided Brief

Overview

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 have needed to have been 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.

With regards to the image for the 'Existing Pages for Publication', where I 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 have removed most of the content of the home page, it was agreed that not all aspects would have been removed.

The Brief Analysis

Planning Methods of the Project

Overview

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.

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 have needed to allocate to progress through different phases such as completing the 'HTML' code and 'CSS' code. With regards to the programming and coding process, I allocated a longer amount of time to the languages which I believed would have required a longer process such as 'CSS' and the new frameworks and languages that I wanted to explore. This was because I knew that 'CSS' would have entailed not only styling the website on desktop devices but also integrating aspects such as 'media queries' to change styles on different screen resolutions or devices. With regards to the new frameworks and languages, I allocated even more time to these as I knew I would have needed 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 completed project regarding this project.

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

With regards to the continuous processes such as the documentation of the project in the Gantt chart, these were allocated these time periods due to the fact that these would have been areas that wouldn’t have been able to have been completed immediately and would have needed to have been 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 have demonstrated what had been completed throughout the semester.

Finally, with regards to the Gantt chart, the majority of the tasks had been organised to be completed by 26th April 2019. This was to allow enough time to ensure that I would have been 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 Module Time Map

Analysing the Current Website

Overview

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

Branding Research

Overview

The purpose of this stage was to have been 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.

Colours

Analysing the Current Utilised Colours

Overview

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.

Utilising the Colour Picker Tool in 'Adobe After Effects'

Undertaking Colour Connotations Research

Overview

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.

Analysing the Colour Connotations for this Project

Creating the Final Colour Palettes

Overview

After undertaking the necessary research, I then decided to specify colours to keep from the originally created list that would have then allowed 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 have changed, 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 have been a standard to use for paragraphs to allow for easier reading by users of the website. The red was chosen because I thought this could have been 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 below 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.

Specifying Colours to Utilise in the Colour Palettes

Fonts

Analysing the Current Utilised Fonts

Overview

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 have related 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 was something that could have then been 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.

Utilising 'DevTools' to Identify Fonts

Undertaking Fonts Research

Overview

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 have allowed myself to understand the characteristics of these fonts to then highlight possible fonts that could have been 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.

The Collected Research

Highlighting Fonts to Utilise

Overview

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 have allowed for sending of the file to the clients to have allowed them to decide which fonts they would have preferred as this was their website and therefore the website would have needed to have reflected 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.

Listing the Fonts to Potentially Utilise

Contacting the Clients

Overview

After having produced colour palettes and highlighting the possible fonts to have been 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 have liked to have integrated into the new website. Following on from this, the clients then replied to me mentioning that they had decided on the colour palette and fonts that they preferred. This is viewable below.

Sending the E-mail and the Response

Supplying Paired Fonts from 'Google' and the Final Chosen Fonts

Overview

As will be evident above, the clients had then mentioned that they would have liked to have seen 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.

Listing the Suggested Font Pairings

Contacting the Clients and the Final Decisions

Overview

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 further down 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

Overview

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 clients 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.

Highlighting Key Points

Overview

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.

The Analysis

Separating Initial Ideas and Collected Research

Overview

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 have helped to provide an overview of what other people interested in history would have preferred to see on the new website. This therefore contributed to most of this particular target audience research with some mention of other areas also. Every aspect of this process can be viewed below.

The Separated Initial Ideas and Collected Research

Collecting Demographics Research

Overview

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 also be viewed below.

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

As will be evident below, 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 have been of a large audience, influencing the majority of the website's outcome.

The reason why the third graph was highlighted below was because it occurred to myself that heritage websites could have related to history websites and therefore understanding the reasons why people visited these websites would have been 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 or historic environment. This therefore influenced myself to think that the website would have needed to have been 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 below was to understand the age demographics of those visiting history related websites, as in my opinion, museums and galleries could have related to history. From viewing this graph, I believed that it demonstrated the most popular ages on average were between 25 and 34 years and 35 and 54 years. This again demonstrated to myself that the website would have needed to have been accessible and usable by any age due to the variety of visitors that the website would have obtained. This emphasised that despite there being set target audiences, various ages would have still visited the website.

The Demographics Research

Conclusions and Created Target Audience Personas

Overview

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 have allowed 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 would have 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.

Creating Conclusions

The Created Personas

Persona 1

Persona 2

Persona 3

Persona 4

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

Competitor Analysis Research

Overview

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 have helped 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.

General Advantages and Disadvantages of Competitor Websites

Advantages and What was Successful

'Imperial War Museums'

Colours and Fonts Analysis of Competitor Websites

Overview

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'

Colours Analysis

Conclusions from this Research

From undertaking all of the analysis above, I understood that colour wasn't overused and that colour could have been utilised to symbolise importance and 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 or 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 have been beneficial to undertake research regarding website design and development trends and guidelines. This was because this would have allowed myself to understand what worked successfully and what to consider when building the 'Home Sweet Home Front' website to have helped it to appear modern in the industry. This can be viewed within this section.

Website Design and Development Trends for 2019

Overview

To begin, I undertook some research regarding trends to help myself understand aspects I could have possibly integrated into the 'Home Sweet Home Front' website to make it modern and so that it would have followed 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 either below or through the provided link.

The Actual Website Design and Development Trends for 2019 Research

Best Website Practices

Overview

Following on from the previous research, I thought it would have also been beneficial to understand the best practices for websites as this would have helped myself when creating the new 'Home Sweet Home Front' website. This would have helped 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 would have needed to have been clear and easy to use for the user.

The Actual Best Website Practices Research

Website Guidelines

Overview

Another aspect of research I undertook related to website guidelines similar to that of the best website practices. This would have also helped myself understand which areas to implement into the new 'Home Sweet Home Front' as well as those which I shouldn’t have considered including to improve the user experience and produce the best possible outcome.

Viewing an Article Online

Overview

Firstly, I began this process by viewing an article online and listing the key points from this research which can be viewed below. As will be evident below, some elements were repeated from the previous research, however this highlighted that some elements were very important to consider when producing a website. The main aspect was understanding the user and to create a website which best suited their needs and not the needs of the person creating the website. Another key aspect understood was that the new website would not have needed to have been overcomplicated but simple to both keep users interested and to not cause confusion or frustration.

The Key Research Points

Viewing the 'Website Content Accessibility Guidelines'

Overview

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 have also helped 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.

The Key 'WCAG' 2.1 Research Points

Identifying Potential Technologies to Utilise

Overview

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 have utilised 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.

The Key Research Points

Wireframes

Initial Wireframes

Overview

To begin the wireframes for the new 'Home Sweet Home Front' website, I utilised the research collected regarding areas including best practices and trends to help influence the outcome of the wireframes, making the web pages appear exciting as well as easy to follow and use.

Desktop Wireframes

Overview

I created two sets of initial desktop wireframes to show variation in approach of how each required web page could have appeared. This would have also allowed the clients to have had more choice when deciding on which wireframes they would have preferred.

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 have therefore taken considerably longer by sketching the wireframes and also using ‘Adobe XD’ meant that I could have created 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.

Desktop Wireframes 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 have both informed the user of the page that they were currently on and also have helped 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 or topics. This was due to the fact that this was currently included on the current website and also would have allowed 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 this set of wireframes, the logo would have been 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.

Home Page

Regarding the page heading section, I decided to include an image next to the heading, which would have been 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 have been beneficial in introducing the reader to the website, providing a context. Regarding the ‘Image of the Month’ section, I thought it would have been beneficial to include this in a container that would have differentiated 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.

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 have appeared. The introduction section was also positioned more centrally to attempt to signify clearly to the visitor that this was where they should have begun 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 to 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 to 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 have been the best possible method of placing the two images as no text was included.

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 have matched 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.

Careless Talk Page

As will be evident with this page, I thought that including an image situated next to the title would have helped to 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 have been beneficial to include these in a form of carousel to allow for interaction with the user. The user would have been able to select to view different images through the provided previous and next arrow buttons and also have been 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 have been highlighted with colour to make these aspects differentiate themselves from the other aspects of the page, becoming more noticeable to the user.

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.

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 have helped to 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 in a tabular format, helping to attract the user’s attention to this aspect and to 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.

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 have been 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.

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 have created a considerable amount of white space in-between the paragraphs and the next section. This would have therefore created 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 have helped to make the information clear and easy to understand.

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 have therefore helped to attract the attention of the user and hopefully maintained 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 have created 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 have been beneficial to replicate this but through the use of bullet points instead. Bullet points would have helped to create a professional structure and 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 have been styled to help the user identify that this was the end of the page, enhancing the user experience.

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 have caused 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.

WVS Page

An image wasn't 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 have integrated bullet points as seen with the other wireframes, I thought it would have been beneficial to include the duties as subsections with the relevant subheadings, paragraphs and images. This would have helped to create a more visually pleasing web page for the user and have allowed for 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 have provided a clear and professional format for users to easily understand.

Other WW2 Websites Page

An image wasn't 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.

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 have overlooked this. To also assist in this, the colour of red was utilised as this was a vibrant colour and would have helped 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 or company would have appeared with the required link to select. This would have made 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 have helped encourage them to partake in sending an e-mail 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 have understood that their website may not have been displayed.

Desktop Wireframes 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 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 have been 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 have provided 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 have been placed to the left with the image(s) situated to the right and for the next, this would have been 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 have also helped 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 a horizontal line below. This was to follow the same pattern as that with the page headings and other headings on the page with 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.

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 have helped to make the website more interactive and interesting for the user. The generic aspects that changed have been explained previously.

Air Raid Shelters Page

The only aspect that differed on this page, that hasn’t been mentioned in the 'Generic Aspects' aspect before, 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.

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 or 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.

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 have been placed on the page instead, exploring another method of showing each image with their relevant information. This would also have allowed for the page to be filled with more content. This would have followed 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 have potentially made the page easier to use for the user, especially relating to primary school children.

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 have been 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 have then allowed 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 have been 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 have appeared unprofessional and would have degraded 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.

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.

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 have alternated 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.

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 have helped to 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 have also helped 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 have also helped 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.

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 to help to add variation to the page in order to make the page more interesting for the user. This would have helped to 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 have been 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 have been 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 have been to place these 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 have helped 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 have been 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 have prevented 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 have caused a high column of text and would have helped 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 users so they would have understood the context of the image before viewing the image as opposed to the image first and the information last.

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 have also indicated 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.

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 have been placed inline with their relevant paragraphs situated to the right-hand side to help present a hierarchy of information. A vertical line would have separated 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 have been to position these beneath the information, allowing users to understand the context before viewing the images.

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 have inserted 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 would have been well-recognised and would have therefore caused the user to read the message more than without the icon.

The final aspect altered for this page was for the e-mail section situated at the bottom of the page. I decided to alter the wording of this so that most of the information would have been 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 e-mail. I also decided to make this section more visual through the recognised icon of an envelope to signify the e-mail address, placing the e-mail address in bold to make it easy to find for the user.

Mobile Wireframes

Overview

Following on from creating the wireframes for desktop, I then also believed it would have been beneficial to create wireframes regarding mobile devices to show how I could have made the website responsive and to also show to the clients to help them understand how the website could have possibly appeared 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 have been 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 have selected the ‘hamburger menu’ to navigate the website through selecting a page link contained within this ‘hamburger menu’ such as ‘Dig for Victory’.

These wireframes can be viewed in 'PDF' format through the links provided below.

The Actual Mobile Wireframes

High-fidelity Wireframes

Contacting the Clients

Overview

As was displayed earlier, I sent an e-mail to both of the clients asking for their preferences with regards to the wireframes previously shown. This would have then allowed 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 e-mails 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 have therefore helped 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.

The E-mails and Feedback

Undertaking Colours Integration Research

Overview

After having progressed with the initial stages of the programming and development process of the new website, I then believed it would have been beneficial to create high-fidelity wireframes. This would have allowed 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.

From this research I understood that colour would have needed to have been 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 have maintained the professionalism of the website.

The Collected Research

Returning to the High-fidelity Wireframes

Overview

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

With regards to the wireframes shown below, it was ensured that a consistent colour scheme was utilised throughout with the colour similar to teal relating to important aspects such as quotations. This would have helped 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.

The Created High-fidelity Wireframes (Desktop)

Home Page

Creating the Flowchart and Sitemap

Overview

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 have functioned and how a user would have undertook their journey before, whilst and after visiting the website.

The Flowchart

Inspiration

Overview

To begin, I first created a flowchart, demonstrating the different processes a user would have undertook 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 have influenced how I would have utilised certain shapes within the final flowchart I would have created.

The second piece of research 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 or process shown would have needed to have been very clear to the viewer otherwise they may have become confused with what was happening in the flowchart and product or system as a result.

The Collected Research

The Final Created Flowchart

Overview

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 below or through the link provided.

To explain the flowchart, the user would have first undertook the process of utilising their selected device to access the website. Once they would have been situated on the website, they may or may not have read or interacted with the content on the 'Home' page. In both circumstances, the question would have been asked as to whether they had visited another page on the website. If they hadn't and they had exited the website, the process would have immediately stopped. If they did visit another page, a process would have been undertaken of asking which page this was until the page was identified. Once they would have selected a page, the user would then have been navigated to that page. On particular pages, there were certain elements such as the 'Blackout Theme Switch' on the 'Blackout' page where the question would have been asked if they had selected or interacted with this. If they did, then the action would have been undertaken depending on what action this was. Once they would have finished with a particular page or if they didn't interact with certain elements, they would have then either interacted with or read the content on the page and the cycle would have then been repeated as explained before. The cycle may have also stopped when the user had navigated the whole website and was therefore ready to exit.

The Actual Flowchart

The Sitemap

Inspiration

Overview

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 have helped myself to 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 have been 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 have been 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 have been placed onto this page, a useful aspect to include.

The Collected Research

The Final Created Sitemap

Overview

After undertaking the previous research and viewing a previous sitemap, I decided to create the sitemap. This can be viewed either below or through the provided link.

To explain this sitemap, the home page would have been the main page which would have also linked to the other pages. As there would have been a fixed navigation bar on each page, the other pages would have also been able to have been 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 had 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 have navigated the user to the home page.

The Actual Sitemap

Review of the Work Completed at this Stage

Overview

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 and 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 and Programming Processes

The Different Stages for the Semester

Overview

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

The Documents to View

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

Overview

After having placed the current version of the website on my server for testing purposes, I then sent the link for 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 and programming processes document for part 4 above.

The Actual Client Feedback

The Result of the Semester

Overview

I believe that from the provided brief, I managed to succeed very well at this stage, being able to create a new aesthetically attractive and interactive website that resized to different sized devices effectively for 12 of the current pages. Throughout the semester for 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 at this stage 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.

To view the final outcome of the pages that were completed as a requirement at this stage for the website (12 pages), as well as the clients' feedback, please view this either below or through the provided link at the end of this section.

The Feedback from the Clients

Creating High-Fidelity Wireframes for new Aspects

Overview

During the summer, I continued to work on the 'Home Sweet Home Front' website, adding the remaining pages to fully complete the website. These were the 'Christmas at Home', 'Gas', 'Hitler's V Weapons', 'Salvage', 'VE Day', 'Copyright Disclaimer', 'Thank You', 'Articles' and 'Slogans' pages.

Furthermore, I also added a new menu and modals for recipe and nursery rhymes sections included on the pages of the current website. The reason for integrating a new navigation menu was because adding more links to the existing navigation menu would have caused this to become untidy and unprofessional as a result.

To begin, I created high-fidelity wireframes which would have allowed for an easy development and programming process. Each of these can be viewed below with descriptions.

As will be evident with the wireframes below, I followed a similar professional layout as that shown in the previously created pages in order to maintain a consistent appearance. Furthermore, regarding the footer of each page, I changed this during the development and programming process and this has been reflected in some of the wireframes below. The main page links including factual and historical information were separated into a section and other page links relating to aspects not including factual and historical information were separated into another section. Legal links were removed due to their being an existing page already which covered some, if not all of these aspects. I also created more than one wireframe for certain pages to help myself decide which ideas to implement into the actual website during the development and programming process.

The Created Wireframes

For Actual Pages

Christmas at Home Page

Overview

The main aspect to note for this page was the fact that I placed snowflakes over the top of the page. This was to demonstrate that an animation would have been integrated to create an atmosphere relating to Christmas with falling snowflakes. This would have especially interested those of a younger age, causing them to become excited.

Furthermore, I placed an icon of a Christmas tree at the top of the page. This would have helped to reiterrate the theme of Christmas throughout the page.

Regarding the structure of the page, where possible, I included alternating content to add variation and more interest to the page.

The Created Wireframe

Gas Page

Overview

The first aspect to note for this page was that I included a background image for the heading section of the page. This would have helped to introduce users to the page as well as adding variation to the website as a whole. Furthermore, this would have reiterrated the fact that gas was something that was very dangerous and harmful during the war.

Another aspect to note was that I placed the images centrally in the 'Preparing for the Worst' section due to there being no content for this on the current website. This, in my opinion, was the best way to structure this section and this also differed from other sections, helping to break up the content on the page.

Regarding the structure of the page, where possible, I included alternating content to add variation and more interest to the page.

When undertaking the development and programming process, I changed the 'Examples of Gas Masks' section so that the content alternated in order to add more variation to the page. Furthermore, for the 'Animals' section, I decide to place the content in a similar position (images to the right and text to the left) due to the fact that alternating the content created an appearance which wasn't as structurally neat. Finally, I switched the positioning of the images in the 'Humourous Images from the Home Front' section as this created a better appearance.

The Created Wireframe

Hitler's V Weapons Page

Overview - Wireframe 1

As is evident for both this and the next wireframe, I implemented the current barbed wire image underneath the heading sections. This was to indicate both a hierarchy of information and to link thematically with the page.

On the current website, users were encouraged to select the image of the V-1 Rocket to listent to its drone. However, I thought that an icon could have been implemented instead in its own section. This would have then animated and made a sound after users had selected this icon.

With regards to the 'V-1 and V-2 Statistics' section, I thought it would have been more interesting for the user if icons with statistics were included to provide a visual summary of the damage caused. These would have then counted up when users viewed the page, improving the user experience.

Regarding the structure of the page, where possible, I included alternating content to add variation and more interest to the page.

Overview - Wireframe 2

The first element which was different to the previous wireframe was the interaction to cause the V-1 Rocket to make a sound. I decided to keep this the same as the current website as the image was of an actual V-1 Rocket whereas the icon in the other wireframe was not of a V-1 Rocket.

The second aspect was changing the position of the content in the 'V-2 Rockets' section. The sole purpose of this was to attempt to discover the best way in which to position the content to appear professionally on the page. I thought that placing each image underneath each other inline with the text would have helped this as both the images and text would have been of the same height.

Finally, regarding the 'V-1 and V-2 Statistics' section, I decided to place a summary of the statistics above other text with the image placed to the right as this appeared better structurally. I also removed the icons to explore another approach.

Regarding the structure of the page, where possible, I included alternating content to add variation and more interest to the page.

Overview - The Chosen Wireframe

After being advised by one of the clients to make a decision of the wireframe to utilise, due to my expertise, I decided to use the first wireframe. This was because the 'V-2 Rockets' section of the first wireframe was structured better and also included a section dedicated to interaction for users.

Despite choosing the first wireframe, during the development and programming process, I integrated the appearance of the 'V-1 and V-2 Statistics' section of the second wireframe as this was structured better. However, I decided to add in icons above the summary of statistics to add more imagery to the section.

The Created Wireframes - Wireframe 1

Salvage Page

Overview

I decided to include a recycling icon in the page heading section as this would have helped to emphasise the theme of recycling during the 1940s.

For the 'Overview' section, I included bullet points to provide clear information and decided to separate these from the images via a vertical line. This was to assist in creating a well-presented appearance.

For the 'Salvage for Aircraft/Saucepans for Spitfires' section, I decided to include some text and an image before integrating the quotation to provide context to users.

Regarding the structure of the page, where possible, I included alternating content to add variation and more interest to the page.

During the development and programming process, I decided to make the recycling icon, within the page heading section, animate. I made this rotate continuously to make the page more exciting for users and to especially interest those of a younger audience.

The Created Wireframe

VE Day Page

Overview - Wireframe 1

As is evident in this wireframe and the next, I included an image of a newspaper in the heading section as I thought this would have assisted in providing an overview to VE Day.

I included confetti which was to symbolise that this would have been something that animated. The reason for including confetti was because this related to jubilation and was suitable for VE Day, a celebration of the war being over.

One other key aspect to note was that the 'REMEMBER' section was placed centrally and in bold to make this part stand out. This was because this was an important section which helped to remember those who helped throughout the war. Furthermore, an icon of a poppy was included to relate to remembrance.

Regarding the structure of the page, where possible, I included alternating content to add variation and more interest to the page.

Overview - Wireframe 2

For this wireframe, I decided to make the quotation in the 'Victory is ours' section bigger in order to make this important statement from Churchill stand out more.

The only other aspect which changed was the 'REMEMBER' section as I changed the colour of this to red. This was to relate to the colour of poppies, hence reiterrating the theme of remembrance.

Regarding the structure of the page, where possible, I included alternating content to add variation and more interest to the page.

Overview - The Chosen Wireframe

After being advised by one of the clients to make a decision of the wireframe to utilise, due to my expertise, I decided to use the second wireframe. This was because the quotation aspect of the 'Victory is ours' section was structured better and because the 'REMEMBER' section contained the colour of red which helped to relate to remembrance more.

During the development and programming process, I decided to include the text placed below the quotation aspect of the 'Victory is ours' section within the actual quotation aspect. This was because before, the text placed on its own might have caused users to have become confused as to what the text related to on the page. Furthermore, I changed the 'REMEMBER' section to include an icon of a dove because a poppy icon wasn't available and also because a dove symbolised peace. This icon and the text were placed centrally as opposed to inline due to the fact that this created a better appearance.

The Created Wireframes - Wireframe 1

Copyright Disclaimer Page

Overview

As will be evident below, for this wireframe, I wanted to keep the image currently utilised on the current website. This was because this would have added more imagery to the page as well as helping to provide context regarding the topic of the page.

I then decided to place the 'Privacy Notice', 'Sending Comments/Online Forms', 'Copyright' in different sections with each following the same format due to there being no images provided on the current website.

For the 'Copyright' section, I decided to place the provided e-mail address in a larger and bolder font to make it easier for users to understand which e-mail address to utilise for any issues.

During the development and programming process, I added a small description with a link to sources utilised in the process of creating the new website. This was to provide credit to those who had helped with the creation of the new website. I also removed the online forms aspect from 'Sending Comments/Online Forms' section due to the fact that forms were not going to be included on the new website. Finally, I helped the copyright e-mail to stand out more by changing the colour of this to teal.

The Created Wireframe

Thank You Page

Overview

For the page heading section, I decided to include an icon which would have helped to relate to the theme of the page. The reason for placing the icon and page heading centrally was because I thought this was the best way to include both the icon and text together as opposed to placing these elements inline.

For the section informing users of how long the website had been online for, I decided to place this in a larger and bolder font and centrally with a teal background. This was to make this stand out as this was an important piece of information to provide.

Furthermore, the 'Special Thanks Goes to:' section contained text in a larger and bolder font that was centralised also. This was to make this aspect stand out too, providing credit to others in a clear way.

The 'Website Design and Development' section was styled in a similar way to the previous mentioned section, helping to again provide credit in a clear way.

For the final section of the page, I decided to keep the personalised writing of 'Darren & Wayne' as I believed this to create a more personalised touch.

During the development and programming process, the only aspect changed was the icon placed in the page heading section. This was changed to two hands shaking as this related more to the action of thanking someone than including an icon showing group of people.

The Created Wireframe

Articles Page

Overview

For this page, I chose to include an introductory section to provide context to the article placed beneath this. The actual article was then placed in a section with a teal background to differentiate this from the introductory aspect. I decided to keep the image of the front cover of the 'Sunday Times' to relate to which newspaper the article had been published in. The title and image and the actual article were separated by a horizontal white line to help create a hierarchy of information as well as providing a clear and professional structure.

The Created Wireframe

Slogans Page

Overview - Wireframe 1

For the first wireframe idea of this page, I placed the slogans in an alternating format to relate to the overall structure and layout of the website. To add further variation, I changed the colour of the borders too.

Overview - Wireframe 2

For the second wireframe idea of this page, I decided to place the slogans in a different format. Instead of placing the slogans in an alternating format, I placed these inline with three on the first row and then two on the second row. This was because I thought this would have reduced the white space seen on the previous wireframe and would have allowed users to read the slogans in one place as opposed to having to scroll further down the page.

Overview - The Chosen Wireframe

After being advised by one of the clients to make a decision of the wireframe to utilise, due to my expertise, I decided to use the second wireframe. This was because the first wireframe contained too much white space and didn't appear as professional and tidy.

I did alter aspects of this wireframe when undertaking the development and programming process. Firstly, I added an icon of two speech bubbles to relate to the theme of the page and to provide more imagery. I also thought it would have been better to make this page interactive which meant I therefore encouraged users to click on buttons to reveal the different slogans. This would have also made the page more interesting for those of a younger audience.

The Created Wireframes - Wireframe 1

For Other Aspects

The Navigation Menu

Overview

I placed each of the page links under their relevant heading sections, following the same categories as that used on the current website. This was because this was organised in a professional way.

Each of the headings would have been placed in black and in a larger font than the links included underneath. An underline would have also have been included. This was to create a hierarchy of information, providing a clear structure for users to find the links they needed.

As shown by the 'Home Page' example, when hovering over a link, the colour would have changed from green to white, indicating to users that these were interactive.

With regards to the 'DID YOU KNOW?' aspect, the information for this was provided within a white circle. This was to help increase engagement from users, informing them of the time passed since the beginning of World War 2.

One final aspect to note was that I included a cross in the top-right corner, helping users to understand how to close the navigation menu.

During the development and programming process, I removed some of the links after having spoken with one of the clients. They stated that these were no longer required for the new website. I also changed the design of the cross included in the top-right corner of the menu to make this more interesting and I changed the colour of the links, when hovering, from white to teal.

The Created Wireframe

The Curried Carrot Modal

Overview

As can be seen below, I included a title with a close button placed at the top of the modal with the content provided beneath, separated by a horizontal line. This would have helped to create a clear structure for users to understand.

Furthermore, I divided the ingredients and the method of the recipe via a vertical line. This would have helped users to understand what ingredients were required first before undertaking the method explained.

During the development and programming process, I changed some aspects of this modal. The first was the positioning of the text, changing this from being centred to being aligned to the left. This was because I believed this to be more professional. I also removed the horizontal line separating the title and close button from the content beneath as this wasn't needed and created a compact appearance. Finally, I added a border and I changed the colours of the subheadings and button to enhance the design of the modal.

The Created Wireframe

The Nursery Rhymes Modal

Overview

For this modal, I decided to place a provided image on the current website and a close button above the actual nursery rhymes to act as a title section, helping to create a clear structure for users to understand

With regards to the actual nursery rhymes, I divided these into three sections, each with different colour schemes. This was to differentiate each nursery rhyme, helping users to understand that each one was different and not interlinked.

During the development and programming process, I changed some aspects of this modal. The first was the positioning of the text, changing this from being centred to being aligned to the left. This was because I believed this to be more professional. Furthermore, I added a border and changed the colours of the button to enhance the design of the modal.

The Created Wireframe

The Woolton Pie Modal

Overview

As can be seen below, I included a title with a close button placed at the top of the modal with the content provided beneath, separated by a horizontal line. This would have helped to create a clear structure for users to understand.

Furthermore, I divided the ingredients and the method of the recipe via a vertical line. This would have helped users to understand what ingredients were required first before undertaking the method explained.

During the development and programming process, I changed some aspects of this modal. The first was the positioning of the text, changing this from being centred to being aligned to the left. This was because I believed this to be more professional. I also removed the horizontal line separating the title and close button from the content beneath as this wasn't needed and created a compact appearance. Finally, I added a border and I changed the colours of the subheadings and button to enhance the design of the modal.

The Created Wireframe

The Poor Man's Goose Modal

Overview

As can be seen below, I included a title with a close button placed at the top of the modal with the content provided beneath, separated by a horizontal line. This would have helped to create a clear structure for users to understand.

Furthermore, I divided the ingredients and the method of the recipe via a vertical line. This would have helped users to understand what ingredients were required first before undertaking the method explained.

During the development and programming process, I changed some aspects of this modal. The first was the positioning of the text, changing this from being centred to being aligned to the left. This was because I believed this to be more professional. I also removed the horizontal line separating the title and close button from the content beneath as this wasn't needed and created a compact appearance. Finally, I added a border and I changed the colours of the subheadings and button to enhance the design of the modal.

The Created Wireframe

The Dried Powdered Eggs Modal

Overview

As can be seen below, I included a title with a close button placed at the top of the modal with the content provided beneath, separated by a horizontal line. This would have helped to create a clear structure for users to understand.

I also included numbers for the instructions to help users gain knowledge of the order of the different steps required to make dried powdered eggs.

During the development and programming process, I changed some aspects of this modal. The first was the positioning of the text for the main heading, changing this from being centred to being aligned to the left. This was because I believed this to be more professional. I also removed the horizontal line separating the title and close button from the content beneath as this wasn't needed and created a compact appearance. Finally, I added a border and I changed the colours of the subheading and button to enhance the design of the modal.

The Created Wireframe

Creating a new Logo for 'Home Sweet Home Front'

Overview

As had been originally stated on the brief provided to myself from the clients, the clients wanted a new logo to be created for the new website. They also wanted a new 'favicon'. I believed that when the newly created logo had been finished, this could have been used as the 'favicon' for the new website.

The Initial and Developed Logo Ideas

Overview

To begin this process, I created some initial ideas; some which were objects, text and some which were a combination of both. I then discovered that one of the latter ones created, as shown in the first image below, was an idea that I would have then experimented with further. This was the idea relating to having a roof over the initials of 'Home Sweet Home Front'. I thought this was simplistic but effective and professional, integrating both visual aspects with text.

Therefore, I decided to implement some of the colour combinations utilised on the website. For one idea, I thought it would have been beneficial to integrate the a Union Jack flag into the roof aspect to relate to Great Britain during World War 2. I also experimented with and without including the 'Home Sweet Home Front' text underneath the initials. This provided more options to consider with regards to choosing the final logo.

The Created Ideas

The Chosen Logo

Overview

During the creation of the developed logos shown previously, I also involved one of the clients to help understand what they liked and disliked. Throughout this process, they suggested different colour combinations and this helped them to make a final decision.

One of the clients then stated that they wanted the logo shown below to be used for the new website. This was then checked with the other client later and was confirmed that this was the logo to be used.

I then also made another version of the logo to be used on darker backgrounds due to the fact that the included horizontal line didn't show due to it being of a similar colour.

The Final Logo

The Development and Programming Processes

Overview

During the process of developing the 'Home Sweet Home Front' website further, I added in the pages and other aspects shown previously through the high-fidelity wireframes and I also refined and tested the whole website before making it 'live'. Furthermore, I ensured the website fitted across different devices and worked in different browsers, improving its cross-browser and cross-device compatibility. I also made sure that some elements were integrated to make the website more accessible including 'active' and 'focus' elements.

With regards to animating falling snowflakes and confetti on the 'Christmas at Home' and 'VE Day' pages, I integrated a plugin(s) discovered from the Internet and provided credit to the person who had created this.

For the navigation menu, I viewed a 'YouTube' tutorial, using this to help create the functionality of the menu, changing the design to reflect that of the 'Home Sweet Home Front' brand.

I continued to utilise 'JavaScript' and 'jQuery' for functionality of interactive elements, such as modals, and 'Flexbox' for structuring. However, in some situations, I utilised 'CSS Grid' as this provided an easier method for structuring certain aspects. Furthermore, I continued to use 'CSS' animations to create animating elements.

Please note that although not all aspects for the development and programming process may have been mentioned above, the above provides an overview of this process.

References for Sources Utilised

Although some of the sources referenced in the document provided below might have already been shown before, the document below also includes credit to further sources used during the summer stage of this project.

Making the new Website 'Live' and Final Feedback

Making the new Website 'Live'

Overview

After having undertaken thorough testing and having checked with the clients that they were happy with the outcome of the whole website, it was then agreed that I could have now uploaded the new website to the current server, overwriting the current website. This was then undertaken and signalled the end of the project.

The Final Feedback

Overview

After having informed the clients that the new website had been uploaded to the current server, the clients then provided myself with a testimonial which can be viewed below.

The Received Feedback

The Final Outcome

Overview

With regards to the final outcome for this project, this is something which can be viewed at the end of this page.

Reflecting on the Project

Overview

For this project, I was very pleased that I had managed to design and develop a professional and well-presented website from initial stages to the final outcome. This provided myself with experience of completing a website of a large scale due to the quantity of pages required to complete.

From completing this project, I felt that I managed to improve my skillset as a website developer through exploring new aspects such as using 'JavaScript' and 'jQuery' to implement interaction. This project helped to test my front-end skills, especially with regards to creating interactive elements and ensuring that all pages of the website functioned on several different browsers and devices.

Overall, this was a project that I thoroughly enjoyed working on and I am extremely pleased that the clients are proud of the outcome in addition to myself. I look forward to continuing to add to the website where required in the future.