End of module evaluation

I feel like I did alright in this module, I could do better, I feel like my blogs are lacking and I haven't been great at blogging consistently. I just can't get myself to do it every now and then. I also wish that I experimented a bit more with both briefs, especially studio brief two as it ended up feel ink more like an afterthought at least in my mind, it might be because there are fewer elements to consider with the website and I'm overthinking it. I think that the website animation communicates the idea and you get the idea but there could have been other outcomes that I did not consider as I started the brief of with the idea of making a website. I feel like it would have been easier to experiment more if there were a possibility to do stuff in the workshop rooms, as every time that I attempted to strip a screen I was told off by the staff as they have induction even when they did not use the room. In terms of time management, I think that I have done quite nicely, I fell behind a couple of times from my schedule, but I got it all done, in the end. The design boards are not the best and I’m a bit worried I’ve waffled on a bit too much.

final animation and flowchart

this is just a possibility and shortened experience you could have with the website. you can see how the animations would work. 

there would be way more possible outcomes as there is thirteen per timeline side and 26 for the spinning wheel. this is just the elements I've fully designed. The overall design for each of these pages would be based on how the ones I've designed already are, just with different information and images. Whenever you don't click on circles once you have gotten past the spinning roulette page you will always go to error. The Intro page would showcase how long you havespent on the website without being in your face. 

final feedback

The final peer feedback overall understood the concept and they thought that it worked. The final feedback was overall quite good there were two contradicting views on the imagery as one thought that the loading images worked best and the other thought that the glitch images worked the best. in the end, the images have different purposes as the glitch ones are meant to distract whilst the loading ones are meant to annoy and frustrate the user. 

colour and changes

hover colour
in the critique, they said that the hover function should not have the items disepere rather have it change colour. after researching a bit into what colour is used in code it largely consists of turquoise, orange, pink, green and blue. As to reference the book it has to be blue or turquoise. the electric blue references the belly band and the overall content of the book so I think ill go with that.




the blue text showcases that it is meant to emulate the look of code.

time

as to have the website have some purpose I've added a count down with a clock that is to be found on the start page, the timer counts down to eleven because of the 55 years of censorship of Folehavna. i just doubled it and made it into a feasible about of time to spend on such a website. after 11 min you will get the information that is now also dotted around the pages such as in the into the page and the error page. but they meant to be moving too fast to read. The just do it is also edited to be all lower case.

hte clock timer would be eleven minutes long but I made a mistake

additional page for context
this page is here to showcase the information in quite a boring matter other than the fact that you have a time limitand if you go past that you will just get the slightly judging page of was it worth it?.

there would also be a programming thing so that you have to interact with the website in order for this to show up, you can't just leave it, you have to have gone through a set amout and have spent 11 min on the page

crit friday

The aim of this webpage/game is to communicate the confusion about and the lack of information out there about Folehavna


one useful page one goal page
could be so that you have to spend a certain amount of time on the site in order to get to it.
hints throughout. possibly on the first page and elsewhere hidden.
elements change colour instead of turning white.

I think that having one useful page or final end page would be cool. As to communicate a sense of accomplishment. but the information might be what has been on-screen before or really boring.
it also would be interesting to have a countdown but for it to be an analog clock and you would not know when the time runs out.

ill try and implement another colour into the website in terms of the hover function. possibly pull in the colour of the belly bind and go for a dark blue colour or some other blue colour

changes website suggestions

type changes

better animation

banner

speed of animation

hover

website experience

after the feedback form Dom, I have changed all of the type on the diffrent animations which took hours.... this is the version, it's so shoddy but it will do for the crit tomorrow. 

I also found a typewriter effect in after effect that I applied instead to redact them by hand, as that looked a bit weird. this is way easier and look better, even if it doesn't look like redaction it works better like this on screen  

 

type

https://blog.checkio.org/top-10-most-popular-coding-fonts-5f6e65282266

https://www.developer-tech.com/news/2018/may/16/10-best-fonts-programming/

Inconsolata is a monospaced typeface made by Raph Levien, as an improvement to Consolas. it has quite a good readability. and it worked in small pint sizes. it is in the top 10 on most typefaces recommended for programmers and I'm gonna roll with that. seeing as i need a typeface with titles.  monospaced fonts are fonts that were largely used in early computers, which had limited graphical potential.  as the type is based on each glyph taking up the same about of space. and even though computers have massively improved over the years, most of software developers use monospaced fonts to their work with code. 

development of the pages

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 layout is based on the idea from the book with the text divided into the two sides of the spread as the book is. The redacting is referencing the book yet again, as the test in the book is not readily available. there is only the left side that is being redacted whilst the right side is a google translated text in "English"  it no longer makes sense and is about as understandable as the redacted one. This information is dependent on what you click on the spinning wheel, none of the information is to be about Folehavna directly but rather anything that either happened in Norway or within Europe during ww2 or an explanation of what you see if it is one of the coordinate pages.

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. 

initially was the idea to just have a small image there and have that be it and if you click the image to make it bigger you would be sent to the error page.
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.

 the idea was for the images to pop up wherever the cursor went, and if you were to click on anything you would go to error.

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.