Sub-Atlantic Application – Evaluation

In this post I will evaluate my application, and talk about the reasoning behind each individual aspect of my app. First of all I will talk about the name that I have given my application “Sub-Atlantic”. I gave my app this name because the word “Sub” refers to going under water which is what you do on my application you go under water into the Atlantic to discover the wreckage of the battle, and it also refers to submarines which I discuss within my app. When creating my application I tried my hardest to create an immersive experience for the user, but at the same time reaching out to my target audience.

Colours Scheme
For the colour scheme I wanted it to apear to be dark and cold, so I used a strong black with different tones of faded blue across my app to create that cold underwater Atlantic experience. The colour scheme I used for the titles of my application is a burnt orange, it stands out bold against the dark background so its easy to spot and realise straight away what each individual subject is about, the orange colour also is supposed to represent rust which relates to the ruins under the Atlantic. Across the application points are highlighted in red, such as the fatality’s on sunken ships this allows for these points to stand out from the background and also keeps them separate from the titles.

For the paragraphs of text you find as you go down the application I used a standard white, which also stands out from the background. The colour scheme I have used makes it easy for my target audience a Dyslexic, to read the text against the dark dull background, it allows for the content to stick out among the application. Another thing I had in mind when using the dull colour scheme across the background of my application, refers back to my target audience as well, because Dyslexics struggle when reading off of a bright screen, I made sure I kept the colours neutral so its not as intense when looking at the screen.


 Content


Typography
The type I used for my application, for the titles i used “Agency FB” this font fit extremely well with the feel of my app, it looks industrial and looks as though it could be used on the side of a U-boat for the name of the ship, along with the colour orange it kind of creates the affect that the titles are part of the wreckage as well. For the paragraphs of text I used “Franklin Gothic Book” this relates to my target audience a Dyslexic, I was going to use a font called “Read Regular” which is a Dyslexic friendly font, but I could not find where to download this font, but the font that I have used is a sans serif which Dyslexics find very easy to read from.

Interactivity
The interactivity on my application are a number of interactive buttons I based the design of the buttons on an old ww2 radio, when you click on the button a video pops up or a sound clip. My idea behind these interactive buttons was to make them look as though they are wreckage from the ships floating around to the side of the time line, the buttons locate next to certain subjects and allow the user to choose between reading about a subject or watching a video on it or listening to a sound clip.

My idea behind the roll overs that contain the video players and sound players, I used a black container for this i tried to recreate the look of oil spillage in the water, again it relates back to the wreckages of the ships, I used orange again for these video players and sound clips again to make them stand out from the background.

Time Scale
My idea behind the time scale was to re-create a guide line for a diver, this relates back to going down into the water as a diver to discover the ruins of the battle for yourself, on the time scale to tell the user what year they are in I used a red light at the top of each individual time scale, so the user can easily tell what year they are reading about, the red also stands out from the dark background.

For my secondary time scale I themed it as a pressure gauge that would be used on a submarine, as you go down into the water the gauge pressures up its as though your going down in time. It creates that feel as though your going under water, I wanted it to create a level of immersiveness in my application.

Quotations

Breaking up my time scale are quotations from Winston Churchill and Hitler, the first quotation by Churchill sets the tone for the app, “The Battle Of The Atlantic Is The Only Thing That Ever Frightened Me”, it makes the app quite scary in a way my approach to this was to trying and make the user wonder what they are going to see under the waters of the Atlantic.

Advertisements

The Battle Of The Atlantic – Nearly Finished

My application tells the story of The Battle Of The Atlantic start to finish, I have only managed to finish three years of its story so far, because their is so much information to portray in my app. Because The Battle Of The Atlantic is the longest lasting battle of WWII, I have finished my designs and my research, I now just need to finish off the last three years of Battle, I just thought I might as well put it up here to show my progress.


Sub-Atlantic Application


sub-atlantic

Battle Of The Atlantic – Application – Interactivity

In this post I will showcase some of the designs I have created for my application, for the interactive buttons, and roll overs that are used on the mock-up for my application and my secondary time scale.


Interactive Button – Roll Over


Below as you can see I have attempted to recreate an old WWII radio, this will be an interactive button on my application, The reason I have chosen to do it like this is because I loved the idea of using wreckage from the actual ships as interactive buttons. The only reason I have not used actual images for my buttons is because they did not fit in with the application, so I created this icon.

Once you click on this interactive button a video or an audio clip will play, and go into a bit more detail about a subject it will be floating next to. Accompanying these buttons will be a short piece of information, this gives the user and option between reading about the subject or watching or listening.

radioicon

Here you can see what the interactive button looks like on the application, I have positioned them so it looks as though they are floating around to the sides. The white really makes the icons stand out from the background as well, which is very important when it comes to spotting the buttons. I have also added some radio signals coming out of the side so it looks as though its active.

interactivebutton

Bellow is one of the roll overs, it comes up with a video that goes into greater detail about the subject the interactive button is floating next to. My idea behind the roll over was, to black out the background when the video comes in, because like the idea behind the wreckage being my interactive button, I wanted it to look like old oil coming from one of the ships.

rollover


Time Scale – Secondary Time Scale


The inspiration for my main time scale came from guide lines that divers use when they go deep-sea diving, I wanted it to be central to the page and its as though your following it down to go and check something out under water. My main inspiration for this app was to make something that was visually immersive in that way, its kind of like your going under water to discover the wreckage of the battle yourself. On the top of each time scale is the year, that looks like a red flashing light that stands out among the rest of the application, this is so its clear you know what year you’re in on the app. As you can see below is a picture of my main time scale.

timescale

After creating the main time scale I decided the user needs to be able to transfer between the years a lot quicker than just scrolling down the page to each year individually. So I came up with this secondary time scale inspired by a pressure gauge you will find on board of a WWII submarine, I loved the idea of keeping it attached to your screen as you go down like it’s a piece of your apparatus for the user, and as you go down the dial slowly goes up, but you can also click on the years to quickly shoot down to a different year. Its like your going down in time as the dial goes up, as though its building up pressure, as a submarine would do if it was going deeper and deeper under water. Just below is my secondary time scale, and below that is the pressure gauge I based it off.

depth-gaugeDepth_Gage_by_GoofyBoots

The Battle Of The Atlantic – History – Research

In this post I will showcase the pieces of research I have conducted that will be used in my application on the Battle Of The Atlantic, and highlight the areas I will be adding into my application. The battle of the Atlantic is the longest lasting warfare during WWII, so there is a lot of information to fit into my application.

Below the History section are some quotes that I will be using the break up my time line, in between the different years.


The Battle Of The Atlantic – History


1939 – Britain Declairs War On Hitlers Germany
During 1939 the German’s invade Poland. Shortly after Britain Declairs war on Germany. Britain then sends merchant navy vessels over to aid the people of Poland, before the war began Hitler had dispatched 39 U-boats into the Atlantic along with German war ships Deutschland & Dochplay & the German cruiser Admiral Graf Spee.

During the first weeks of battle the first allied navy vessels to be sank where, SS Athenia which was sank by the German U-boat U-30 killing 128. Shortly after the allied Navy vessel HMS Courageous was sank by the U-boat U-29 killing 500, Then the allied Navy Vessel HMS Royal Oak was sank by the German U-boat U-49 killing 833. The fatality of the allies was in great numbers during the first few weeks of battle.

Total Ships Sunk – 1939 (222 ships)

1940 – Hitler Invades Norway And Denmark
In the spring of 1940, the German attack on allied merchant ships was abandoned, The U-boat fleet retreated to equip for Hitlers invasion on Denmark and Norway.

During the invasion of Norway Hitler layed out a fleet of U-boats and war ships along the shores of Oslow, the allies attacked ruthlessly. The Total German vessels lost 4 – Cruisers, 9 – Destroyers, 4 – U-boats. After Hitlers losses upon the shores of Oslow, he had a new plan for The Battle Of The Atlantic, he ordered for the mass production of his most successfully weapons in the Atlantic his U-boats. Winston Churchill is thought to have said, that the U-boats are the only things that worried him during the war, and actually considered surrendering to the Germans.

During 1940 Winston Churchill made a deal with Frankly D. Roosevelt, called the Lend Lease Act. Roosevelt promised 50 American first world Destroyers to aid the British Merchant ships, and a quarter of the US military. In return Roosevelt wanted to use British bases located in the Caribbean.

Total Ships Sunk – 1940 (1059)

1941 – The Lend – Lease Act and The American Get More Involved In The War
In 1941 the lend-lease act finally came into power, and American War ships started escorting British navy vessels across the Atlantic.

Operation Primrose
This operation played a massive part in the fight against Hitlers U-boats. Allied War ships HMS Aubretia and British Destroyer Broadway Successfully capture U-boat U-110, the crew aboard the U-boat were ordered off of the vessel, and then shot by Aubretia once the U-boat surface. This benefited the allies because, on board the U-boat where enigma machine codes this allowed for the allies to track U-boats across the Atlantic.

USS Niblack was the first american war ship to see action during The Battle Of The Atlantic, is dropped depth charges when a U-boat was entering American territory in the Atlantic. In June 1941 the Americans joined the Battle Of The Atlantic.

Total Boats Sank – 1941 – (1328)

1942 – The Germans Take The Upper Hand
In 1942 the Germans took the upper hand again, after the loss on the shores of Oslow Hitlers U-boats where coming into the Atlantic at 20 per month. Even though the Americans had entered the war in the Atlantic, they where not able to prevent the loss of 500 ships in between January and June. 1941 was a turning point in the Battle Of The Atlantic, the allies had lost their grip on the battle.

Total Boats Sunk – 1942 (1159)

1943 – The Allies Take The Upper Hand
in 1943 the allies finally regained the upper hand among the Germans in the Atlantic, the allies now had aircraft carriers and long range air craft to cover the Atlantic. A new innovation called the “Hedge-Hog” depth charge used by the allies was creating a terror for the U-boats, in May now labelled “Black May” in 1943, the losses of U-boats was growing one-quarter of Hitlers U-boat fleet was destroyed during “Black May” all because of the “Hedge-Hog” depth charge. Hitler withdrew his U-boat fleet from the Atlantic once again, the battle was won.

Total Boats Sank – 1943 (463)


Battle Of The Atlantic – Quotes


Winston Churchill – “The Battle Of The Atlantic is the only thing to ever frighten me”

Adolf Hitler – “Our Losses… Have Reached An Intolerable Level”

Winston Churchill – “Without Ships, We Cannot Win”

Winston Churchill – “The U-Boats, Are The Only Thing That Ever Made Me Consider Surrendering To The Germans.”

Creating an Interactive Product for a Dyslexic

Dyslexia is something I struggle with myself, from a very young age I realised that I struggled with reading and writing, and Math. With my application being based upon the Battle Of The Atlantic, there is a lot of information to get across because it was the longest lasting battle during WW2. And compressing the story down, and tranforming it into something that is easily accesable and readable for a Dyslexic is something I really care about, and want to accomplish with my application.

In this post I will show case my research into how I can make this app Dyslexic friendly, and how I will create an application that is easy for a dyslexic to navigate and gain information from, here is the information I have found that I think will allow me to acheave this…


Type Faces


fontsOne of the main things that causes confusion for a Dyslexic when reading a chunk of text can be the type faces used. I myself when reading a large chunk of text, usualy find myself getting lost amung the text this is mainly down to the differentiation of the lettering. During my reasearch I came across some key points that highlight the different areas of text that make it hard for Dyslexics to read, and this is something I can relate to myself…

Good Acenders And Decenders Of Lower Case Lettering
Acenders and Decenders are the sections of a font that travel passed the mean line of the font, the acsender goes above and the decenders go below. This plays a great part in the differentiation between the lettering, allowing Dyslexics to recognise and determine between the different letters without muddeling them up when reading a sentence.

Example
Acenders: b, d, f, h, k, l, t
Decenders: g, j, p, q, y

ac

Distinguished Lettering, No Mirrored Image Letters
In most fonts some under case letters are mirrored images of each other, such as: “b,d” and “p,q”. The lettering has to be distinuished, there must be some form of individuality added to the letters that will allow a Dyslexic to determine which letter is which when scanning through a sentence.

db

Different Forms For Capital I, Lowercase i And The Number 1
Sometimes and not always just for Dyslexics, it can be hard to determine between the capital I the lower case i and the Number 1, this can confuse some one who is reading through the text and have a double take.

iii

Kerning
Kerning is the spacing between letters, this is very important because sometimes to a dyslexic some letters that are close together take for example “modern” the “rn” can some times come across as an “m” making a Dyslexic mistake the word for “modem”, this creates confusion.

kern

Letter Shapes
Dyslexics often mistake the letter “a” for an “o”, Dyslexics tend to relate what their reading on screen to off screen, so usually dyslexics prefer some words to have a look as though they have been hand written, like the letter “g” which is easily recognisable incomparison to some other letters, this is all down to familiarity.

ReadRegular2

Thing To Consider When Using Type For A Dyslexic
It is also a rule to use a Sans-Serif font when writing for a Dyslexic it is much prefered incomparrison to a Serif font. Mainly down to Serif fonts have flicks at the end of each letter which obscures the shapes of lettering for a Dyslexic.

Scipt fonts are Dyslexic friendly in some ways because it is very similair to hand writing and Dyslexics find some familiarity allowing them to recognise the lettering alot easier. But script fonts create the same form of problem that bad Kerning creates, its easy to mistake combinations of letters for something else.

Their are some fonts that take these key points into consideration, and are designed for Dyslexic readers, I looked up some of these fonts and tested some of them myself to see which I found easiest to read. Here are my favorites that I came across…


Dyslexic Friendly Type Faces


Here I will talk about two of my favored type faces designed for people suffering with Dyslexia…

Read Regular
This is a Dyslexic friendly type face, created by Natascha Frensch in 2003. This type face is designed with an individual aproach to the shape of each letter. Like I explained earlier the shape of a letter is a very important ascpect when it comes to Dyslexic people, they can often be mistaken for other letters. Each letter is different from the rest, this allows a Dyslexic to determine instantly which letter is which when reading a sentence without getting mixed up with another.

ReadRegular3

Another thing is that each letter has been stripped down of any form of details and styling that is unecessary. Each letter works on its own and also works with the previous lettering. Another thing is that the letters with acsenders and decenders have been made longer, this allows for each letter to be recognised in an instant. The letters with openings as well such as the “e,y,u,a” have been made bigger this makes them alot more distinctive, and also allows them to be easily recognisable on black and white.

Lexia Readable
Lexia readable is based upon the famous Comic Sans type face. Lexia has taken the strong and claritable aspects from the Comic Sans type face, and removed any unecessary styling, keeping the strong font weight which for me isnt very good. Comic Sans works best in very short paragraphs of text, but the font weight for me creates the same problem negative kerning creates, it mixes makes it easier to muddle the words up. Lexia readable also includes the none symetrical “d” and “b” and handwritten forms for the “a” and “g”, making it easier for a Dyslexic to decipher between the letters.

lexia

I tested these types faces on myself, and had a much smoother read with Read Regular, I lost myself a few times using Lexia Readable, I would put that down to the heavy ness of the font weight, making it easier for myself to get mixed up.


Type Colours


dyslexia
Something I find that helps is the colour of text, preferably vibrant colours such as: Orange, Red, Green, Yellow. Using a dark background this makes the text stand out, it makes it a lot easier to read. It makes the text more promonent over the background, as though it has been cancelled out by the text allowing for the read to be a lot easier. And this isnt just for Dyslexics it works for everyone.


Icons & Infographics

Icons & Infographic are a good way of getting a message across a lot faster, without having to explain something in a paragraph of text. Infographics are a lot easier for a dyslexic to extract information from this is something a Dyslexic like myself would apreciate.

The information on my application will be accompanied by interactive buttons that will be clear as of what their purpose is on the page, and will give the user the option to watch a video or listen to a sound clip that will go into more detail about the certain subject that has been briefly described in the paragraph.

Infographics are a nice way of breaking up content, it gives the user a break from reading and for a Dyslexic its a breath of fresh air. You can create an infographic to explain something a lot faster creating something a lot more visual, and colourfull but informative. Take this for example…

icon-infographic

Battle Of The Atlantic Application – Inspiration

In this post I will showcase some of my inspirations for my application.


Number 1 – Layout And Design


Aqualitis Expedition (Tobias Van Schneider)

One of the biggest inspirations for my WW2 application is the Tobias Van Schneider AQUALITIS EXPEDITION web page. Mainly because my application talks about the history of the battle of the Atlantic start to finish, I thought it would be fitting to base my application under water. Not only does it create the feel for the application, I also want it to represent the historical side of the subject, like your going under water to discover the history of the battle, the wreckage of the war for your self.

Aqualitisheader The sole purpose of this web page design is what inspires me most for my application. When using the page it’s as though you are going on one of the expeditions yourself, diving deep into the ocean of the page to discover amazing bright images of unusual under water life. It’s visually immersive in that way that it kind of drags you into the shoes of a deep-sea diver, it just fits the subject so well its amazing. That is exactly the sort of thing the user would want to get from the page as well, because the only people who will be using this page are people who want to take part on deep see expeditions. So I think it advertises the expedition really well.

Aqualitisbody This is something I have taken from this page, that I really want to focus on with my application. I want to create this under water world that kind of takes you back in time as you go deeper and deeper, and putting the user in the shoes of a deep-sea diver discovering the wreckage of the Battle for them self. I like the idea of taking the user on a trip down below to discover it for them self.


Number 2 – Time Scale


waynrooney One of my favourite examples of a time scale is on Wayne Rooney’s web site. I love the idea of having a basic time scale central to the application and leading all the way down to the bottom, I think it will fit well with my ideas of an underwater expedition to find the wreckage of the battle. I want to make it look as though it’s a guide line for the user, as though they were are a diver. I will obviously recreate this time scale and give it a more fitting design for my application. Something else I want to add to my app would be a secondary time scale to the left hand side of the application, that allows you two quickly switch between the different time periods on the main time scale, and follows you as you scroll further down the page. I came across something that has inspired the design aspect of the secondary time scale, something I came across during my research for the application. The depth gauge that would be used on a submarine, to tell you how deep you are going into the ocean. I want to replace the numbers on the gauge into the years of the war start to finish. This will allow the user to click on the certain year they want to quickly jump too. Bellow is a quick mock up I have created to give you an idea about what I mean for my secondary time scale. depth-gauge


Number 3 – Interactive Buttons


Powerofpossible (TryApt) statoil Another page that I came across that has a very similar design to the AQUALITIS page, that not only gives a good example of the sort of design layout I am going for with my app, it also showcases the form of interactive buttons I want to have on my application. interactivebuttons One of the main things I wanted to include into my application was interactive buttons that look as though they are wreckage from the sunken ships. And this page shows exactly how I want to position my buttons, the interactive buttons on this page are very basic just a small image with a brief description underneath, the main thing I like about these buttons is the positioning they are all at a distance from each other as though they have floated apart under the water that’s something I want to recreate in my app. I also want to make the buttons relate to the year they are located in, say a certain ship sank in one year the wreckage from that ship will be located in the certain year and relate to the ship it’s from. Next to the button will be a brief description about what happened to the ship, and once the button is selected it will come up with a short video or audio clip that will delve into more detail about the story of the ship what happened to it and where it sank.

WW2 Application – Titanic Museum & The Imperial War Museum

Hello again, this post is just to share some material that has inspired me to create this application. First of all i would like to mention that last year, I went on a trip to Belfast in Ireland. When in Belfast I visited the “Titanic Museum”, which showcased wreckage from the Titanic, information about what life was like onboard the Titanic, and at the very end of the museum they had interactive touch screen monitors, that allowed you to have a look around the ruins of the Titanic for yourself on the ocean bed. Just below is an image of the exact monitor I am talking about.titanic

The application its self did not have that much information on display, just the wreckage of the Titanic. Dont get me wrong, the App was visually immersive and interesting to look at, but I just felt as though I walked away from it knowing no more than I did when I approached the monitor. But the whole concept of the app visually, I enjoyed very much. Using this application, made you feel as though you had discovered the wreckage yourself, there was something really eerie and real about it, and this instantly caught my attention, and I would really like to draw some of the aspects from that application into my own.

This is the first thing that sprung to my mind when I was given the brief for my first project, when I visited the “Imperial War Museum” in Manchester. Looking around they also had interactive monitors, that where very informative but to me where not as visually impressive as the ones in the Titanic Museum. Maybe not for all people, but for me I wasnt as drawn to these monitors, mainly because there was too much information slapped on the screen, which is not a bad thing, but for people like me with dyslexia, something as simple as reading a paragraph off of a monitor can be a real task.

Saying that I sound as though all I have done is pick the interactive experiences I have taken from the Imperial War Museum to pieces. Not quite, in fact one of my main inspirations for creating this application, has come from my experience playing around with the apps at the Imperial War Museum. And that is creating an application that still gives out the same amount of information, but at the same time is visually immersive just like the applications at the Titanic museum. Creating an application that would draw in people like me, who would most likely avoid a screen crammed full of information and show no interest.

In my next post I will showcase some more material that has inspired me, and one design of a web page that has really taken my interest, and has given me a few ideas for how I am going to achieve this.