In initially there was no start-up page but after the critique, it was suggested to add a page where you would get instruction.
This page would force you to find the image first if not it would take you to the error page. It is meant to intrigue the user to explore further, as the text is appealing to the user. 
the animation of the image on the page is a bit too messy as it does not make sense. It is quite obvious and anyone would be able undersand. 
The previous iteration did not do with the overall design as it sicked out more. So with the type changes the overall design was altred, the image changed to reference the future pages. The text was changed to have two contradicting messages with the motivational just do it, and the blunt and negative you will fail. The motivational one moves about and the only constant is you will fail text. The right-hand instruction is being written out like a typewriter. the Type is small so deter you form reading it.
the initial layout was this, the issue with it was that there were more locations on the left compared to the dates on the right. The idea of the lucky draw spinning thing was that it was to be contained within the small space around the logo.
adding the different places and dates into it as the initial Digitial sketches only had a couple. Added more leading to it as the initial one felt a bit cramped and Folehavna is quite free-flowing. The "logo" is also changed so that it is in lower caps as to fade a bit more into the page and be less of a focal point and allow the user to explore freely. I also removed one of the coordinates so that the timelines are symmetrical.
the alignment of all of the dates took some time as the layout is based on the two columns as the book starts with the type on each of the pages. 
after the talk with Dom I've changed the typeface to Inconsolata as it is often used in coding as it is a legible monospaced typeface. The aim of the website is to have information there but just confuse and deter you from reading it. The spinning elements have more leading now as this typeface is so thin compared it cerates more detachment to the content with larger spacing.
making the animations I've made the hover function be invisible. The spinning animation works well the main bit that would be cool to have the base underneath the lost in translation smoother i belive.
The type is manually redacted with white bars, that move across quickly so you cant read it. the image was treated, initially just with noise in photoshop to make sure that you would not be able to make sense of it. I added the bad tv effect in aftereffect and toggled the waveforms and the noise. to make the movements bigger and more annoying and confusing.
when I changed the type I found this effect that would remove the text rapidly and it is more professional looking. In order to get to the next page, there is the date or coordinates at the bottom which is the only way to get to the next page. the type has a horrible rag but the text is not meant to be pretty or have e great readability.
the idea for this page is to have the information about that specific image or date, the text would be divided into Norwegian and English. The information is to be sort of useless, as most people that would read it would not know the context of it and it would be quite surface level without any reasoning. The image would be distracting with some sort of overlay that was the idea.
it turned to this where one key element would be flickering all over the screen making it impossible to read. the image behind it is the same as the previous page but the text is not put through google translate so you would be able to understand it if it wants for the flickering. there is a way to get that layer of if you hover over the title of the i in Quisling. when you hover over it you can read the content and the image is slightly faded out.
this layout is based on the lost in translation page as the timeline is right-aligned and therefore is this possible outcome also right-aligned the information you are after is underneath the black box and there is no obvious way to get to there. but if you click on any of the circles you are taken to the next page.
there is not a lot that has been changed with this page other than it being longer and thinner in addition to the type change. the information under the black box is even smaller and repeated as there is in reality not that much information to get from this page, but the user does not know this until they have tried everything.
if you did not click on the title or the periods on the page you would go to this page which does nothing other than being there. if you ckick on anything it sands you tothe error page.
this was simply altered with the new typeface.
if you did click on the titile or period it would send you to a page that looks the same but with text at the bottom going across the entire page so it is difficult to read because of the long line length.
this was altered so that the type is being written and removed so in addition to it being a long line length it is also moving and deletes itself, so it is very easy to lose track, the kerning of the text is also upped so that it all turns to one line almost.
the initial idea is similar to the timeline but it has a detracting arrow that would lead you to believe that you should click it. but if you do that you go to the error page. you have to click on the degree glyph in order to get anywhere.if not you will go to the error page.
I attempted using the map image that is used in the book, but it became too dark and seeing as the type on all of the pages is black I can't change that on this one page.
seeing as the image was too dark I went back to this illustration that I found but added in the numbers associated with Folehavna and placed them around to make it seem like they belonged. It would take quite a lot for someone to see them so it is more like a reference that they would not be aware of.
In order to make the page more compelling, I blurred it out so that the reader would have problems figuring out what it was and more importantly where it is.
To make it annoying I added a very slow loading animation that would incline the user to click it.
I went with that idea but to add another element to it I ended up blurring them and adding a loading icon to it. as to try and get people to click on it.
This was just time-consuming and fiddly and the animation showcases the idea of it. I think that the loading symbols should move and they would do that in a possible future website.
error
the initial idea was for this page to be simple and boring and just have it say what it is and a redo button.
but why not make it an integral part of the website, by making a mess? All of the elements move about and there is no way of clicking refresh unless you are lucky with all of them moving. I altred this to have one working instead of all of them possibly working with the right timing so the one still one would take you to refresh as the other way would incline the user to leave the site.
with the type changes, I altered the layout to have a blick of annoying code like type on the left that is being removed slightly too fast so you don't get the information about how to maneuver the website.
No comments:
Post a Comment