christiangoran / the-dam-busters

Project 1: This was created for educational purposes as part of Code Institute’s Diploma in Full Stack Development.

The Dam Busters

Portfolio Project 1

Introduction

The Dam Buster site is an educational resource created by the Lancaster History Foundation for people who may not be familiar with the incredible story of the 617th RAF squadron and their dam buster raid in 1943, known as Operation Chastise. The target audience is younger people with an interest in aviation history and history in general.

UX

The Importance of the website

• The focus of younger audiences, who are used to engaging with visually stimulating media, is captured and maintained by a website that is visually appealing and interesting.
• The story can be made more interesting and approachable for a younger generation that may not be familiar with historical events like the Dam Buster raid by presenting information in a visually appealing manner.
• A well-made website can aid in bringing the incident to life by enabling viewers to delve deeply into the narrative and learn more about the historical significance of the Dam Buster raid and its effects on the war effort.
• We can make sure that the story is told and history kept alive by developing a website that is geared toward a younger audience.

User Stories:

• As a user, I want to easily find a relevant summary of the event.
• As a user, I want the historical events to come to life in a chronological and engaging way.
• I want to learn about the history of the aircrafts that were used.
• I want to learn about the backgrounds of some key players in the mission.
• As a user, I would like to see a gallery with more images that show the history of the event through pictures.
• I want more detailed information presented in a logical and pedagogical way about all the aircraft and people involved in the mission.
• I want to find out how to contact someone about the event.
• As an organization, we want to promote historical sites, such as museums and airshows, to users, as well as share new information that comes to light about the historical event. This through encouraging users to sign up to our newsletter or to contact us.
• As an organization, we want to engage with people who are interested in these events and share new perspectives on the story.

Opportunities

Opportunity	Importance	Viability / Feasability
Create an online presence	5	5
Create a pedagogical and chronological summary presented in an engaging way	5	5
Create a gallery with historical images	5	5
Provide reference details of the aircrafts and personnel in the mission	5	5
Provide reference details on the key players of the mission	5	5
Create a table displaying upcoming relevant historical shows and events	5	5
Create an index for further research	5	5
Promote a signup to newsletter	5	5
Promote a single point of reference and contact for more information regarding the site or historical event	5	5
Create an interactive section for the user to engage more actively in the learning process	5	1

Scope:

A run-through of the extensive information available is necessary to distill it into an executable amount of text that can be presented in an engaging and user-friendly way.

• What will be included in the website is:

  • Navigation Bar including links and logo with common design across pages

  • Footer including a call to action to sign up to a newsletter

  • Header with an Hero image and text overlay

  • A section with a summary leading the user into the story

  • Section with short summaries of each segments of the story in chronological order together with images

  • Statistics showing the general info in numbers

  • Cards with key players and a short bio

  • An aircrafts page with a table of the aircrafts in the mission and their names

  • A gallery page with images

  • A contact us page

  • 404 page

The text in each section is carefully shortened into bite-sized pieces large enough for the user to stay interested and continue reading. The information is released incrementally, mixed with more traditional text sections to create a balanced experience.

Wireframe Mockups and Color Card

I began by using the program Balsamiq, which was recommended by the Code Institute, to create low-fidelity wireframes that would help me organize the information priorities and site structure and get a sense of the size of each page.

• Home page wireframe
• Aircrafts page wireframe
• Gallery page wireframe
• Contact us page wireframe

After establishing the general structure of each page, I moved on to creating a full-color and image mockup in Figma to test the color selection I had decided on. I used https://colorhunt.co/ as inspiration to find a color scheme. Since the colors I selected are the same shades that were used as camouflage paint on the Lancaster Bombers, I decided to use this scheme for my visual language to stay true to the theme. The red accent color selected is an homage to the famous 1955 movie about the historical event and was helpful in creating visible user responsiveness.

• Main page color mockup

Features

Normal Features

• Navigation Bar
  • For the design of the navigation bar is a common design with logo - depicting the emblem of the 617th Squadron involved - to the left and navigation links to the right, and used througout all the pages as well as the main page.
  • The links include Home, Aircrafts, Gallery and Contact as well as the logo to the left. The links head to their respective page for easy navigation and the logo is used as a typical and well known take-me-home-button that users are familiar with.
  • The navigation bar is responsive and highlights the current webpage visited by a horisontal accent color line, as well as a slight increase in font size as an indicator to the used as to which page they are currently on.
  • It is also responsive to screen sizes throughout the use of media queries and att 1200px and 810px intervals the size of the link-text is changed to smaller size.

• Hero Image
  • All pages include the hero image along with standard h1 header and the paragraph below changing to indicate what site the user is currently on to further indicate what section of the site they are currently on.
  • The image was carefully selected to give the best immediate respons in the user upon landing on the website.
  • The image depicting a Lancaster Bomber during its bombing run was separated from its background using Photoshop. With a bit of time and patience I also managed to remove all traces of the bomber from the background to end up with two separate images where the bomber is isolated a in a png format. I then took these two images and created perspective effect to hero image section.
  • To give screen size responsiveness the two images are changed into a slightly retouched and vertically enlarged image where som sky has been added to it and the size is set to cover.

• Footer
  • A footer split into two sections can be found on each page.
  • The left side of the footer includes a call to action for the user to sign up to the newsletter. This will enable us to encourage more users to stay up to date on the latest information about upcoming air shows, new historical information and more.
  • The right side of he footer includes links to all the social media platforms used by the Lancaster History Foundation and is a subtle call to action for the user to visit the social media platforms of the organisation.
  • It is an effective way to promote the oranisations other platforms and a good way to increase the number of followers in these channels.
  • The footer also includes the copyright information.
  • When screen width goes below 1200px the two elements stack on top of each other instead of being places next to each other.

Home Page

• Introduction
  • The first section offers an exciting introduction for the user to the story of the dam buster raid and comes a scroll down after the the h1 title on the same hero image.
  • The text is increased somewhat in fontsize and line-height to increase readability as the text is on top of the hero-image as well as a way to ease the user into diving further into the story and website.
  • The larger engaging introduction increases the likelyhood of an intitial positive user experience and a hint showing them that there will be incremental releases further down the page.

• Section 2: Background
  • Here we establish ourselves in the actual events and the background that lead up to the bombing raid.

• Section 3: Ingenuity
  • The user is introduced to the inventor of the bomb that made the entire mission possible, Barnes Willis. The text color changes to black to contrast the wite in the fixed background image with a portrait of Wallis besides the text.
  • A media query for max-width of 800 sets changes font color from black to white and sets a transparent dark colored background behind the text as the screen size pushes it above

• Section 4: Dangers
  • Here again comes a more normal section with white text on top of the darker color that is used throughout the body of the webpage

• Section 5: Planning
  • Another fixed background section comes up depicting a 2D infographic that is upscaled and retouched, explaining the technicalities of the attack in an easy to understand way to the user. The white text contrasts the brown details in the bottom of the image.
  • A media query for max-width 800px sets the background from fixed to scroll and places the text below for smaller screen sizes to keep the readability of the site.

• Section 6: The Night of the Mission
  • Here two images are used in a collage together with white text contained within two dark squares.

• Section 7: The Aftermath
  • Here a background image of one of the destroyed dams are shown and selected to give the user a feeling for the consequences of the attack.
  • The photo contains large white areas that once again allows for dark text to be shown directly on top of the image. The design is created to give unexpected surprises for the viewer to keep on reading.
  • A media query for max width of 800px is set for a switch in background-attachment from fixed to inherit and the text color is switched to white as it is moved to an area below the image instead to keep the user experince on smaller devices.

• Section 8: Summary
  • These summary info cards provide easy digestible acess to some historical summary about the historical event.
  • Here the brown nyancee is used to provide a contrast to the other sections of the page.
  • A media query of max width 800px is used to stack the media cards on top of each other instead.

Aircrafts Page

• Here I have chosen to summarize the call signs of all the Lancaster bombers and the name of their commander that was part of the mission as well as if they managed to hit the target, if they returned to base and a note about what happened for each crew. Everything is gathered up in an easy readable table that follows the color theme of the rest of the web site.
• The screen size responsiveness reduces the size of the text to allow the entire table to be viewed on smaller devices as well.

Gallery Page

• The gallery page allows the users to view high quality photos and artwork depicting everything involing the event, the planning phase, some of the people involved, the night of the attack and the consequences of the attack.
• This allows the viewer to further get a sense of the entire historical event when connecting what they just read with the images of the event.

Contact Us Page

• The contact form allows the user to contact the Lancaster History Foundation directly with any queries of comments that they might have.
• The required fields for the user to fill in are; First name, last name, email, subject and finally the message itself.
• Here once again the user is presented with an option to easily cross the checkbox the sign up to the newsletter, thereby further increasing the amount of followrs of the foundation.

Hidden Pages

• Two pages that do not appear on the navigation bar exist to create a response to the user interaction and will display a thank you to the user once they have submitted from one of the two forms.

Future Enhancements

• An interactive section where the user can more actively take part in the learning process by gamification.
• To add a slide function to the gallery to be able to view the images in a larger format.

Testing

I used continuous testing of the site while developing it. After making some changes, I would use the FireFox Inspector to inspect the styling in different screen sizes before moving on. Additionally, I used the browser inspector tool to try out different settings before adding them directly to the CSS or HTML file. This helped me complete each section to a satisfactory level before moving on to the next part of development.

For testing I used the following devices/browsers:

Desktop computer: 3456 x 2234p Google Chrome Firefox Mac OS Safari

iPhone 11: 828 x 1792 display iOS Safari

• position: relative/fixed

  • I had a problem with the hero image. Since I have a background image with a relative section and then a png image with fixed position, I had a problem with the site being wider than the browser so sidescrolling was possible. I had to go through the css with comments marks and isolate every rule to see where the side scrolling appeared.

• Text in fixed position

  • In the planning section I wanted to text to be in a fixed position together with the image. However after spending almost a day trying to solve it using W3Schools tutorials and Youtube videos as well as tutor support, I was unable to solve it. After finally giving myself a 2 hour deadline without solving it, I decided to move on to next section of the site.

• I had a very valuable experience where I without knowing better, started updating the README file directly in GitHub instead of GitPod, while simultaneously working with the code in GitPod and git pushing changes. This resulted in an error when I had two branches. It was resolved with the help of Tutor support and the merging of the branches.

Validator Testing

• HTML

  • No errors returned when passing through the official W3C Validator.

• CSS

  • No errors returned when passing through the official W3C Validator.

• Lighthouse

  • I generated a Lighthouse Google Chrome Extension test report. At first the performance of the site was down at a orange score of 74 while the second lowest, Accessabillity landed at 97 points. After quite a bit of down sizing of images, uploading, comitting, pushing, waiting and testing I managed to push the performance score up in the green with 93 points.

  

• Wave report

  • I also did a run with Web Accessibillity Evaluation Tool - Wave and landed with quite a bit of contrasting issues as well as missing h1 elements on the sub pages.
  • I managed to sort out most of the issues, but one. The Wave tool still wants a higher contrast between the h1-element and the background. What I did was after testing to change the background to another of the nyanses in the color scheme, without the issue being resolved, I added a black drop shadow to the header text to be able to get the proper contrast against the background color in case the hero-image would not load. However it seem that Wave does not take drop shadow into consideration, and I made the decision to keep the red color with the added drop shadow.
  • The Wave tool also wanted the paragraph "Destroying the Dams of Nazi Germany" to be a header element as well. To resolve this I simply changed the p element to a h2 element instead.

Deployment

I used GitHub to deploy the site. It can be found here - The Dam Buster Website

Credits:

• Special thanks to my mentor Garreth McGirr for the tips and guidance on the project.

• I used https://www.fontpair.com to find a matching font pair for the project.

• I used https://www.upscale.media to upscale low res images.

• I learned flexbox from https://www.flexboxfroggy.com

• And used some code from https://www.w3schools.com/css/css3_flexbox_responsive.asp for the gallery page.

• https://en.wikipedia.org/wiki/Operation_Chastise was used for gathering some of the information used on the website.

• https://www.iwm.org.uk/history/the-incredible-story-of-the-dambusters-raid was used to gather image resources.

• I used https://realfavicongenerator.net/ for the website favicon.

• I used https://colorhunt.co/ to find a suitable color scheme to start working with.

  • found that site via a fellow Code Institute students project https://designland.herokuapp.com/

• As a general reference material throughout the site, https://www.w3schools.com was used quite a bit.

• Font Awesome was used for the social media link icons.

• Thanks to the artist Mark Postlethwaite for his amazing aviation historical artworks that inspired me to make this website.

• Thank you to Piotr Forkasiewicz for his splendid computer render of the event that I am using as a hero image on the web site.