Visual Storytelling

Background

The beginning of project came from being so involved in Dublin City Nightlife that I wanted to showcase individuals that are a big part of that community. I knew of many people from different interests that could tell their story in order to promote the thriving music scene in Dublin currently. There hasn’t been a photography focused project to come out of Institute of Technology Blanchardstown so I had a real opportunity to create something great.

Research

Interface Design

The layout of a website is a very big part that has to be considered when building a website, the colour, text size, interface, interactivity is all vital. With the web always expanding there are now many more options for designers to take with web design with before only a straight forward way and it could not be changed. Elements now are pretty endless with regards to the designer. If you understand how the web works and/or spend time exploring different interfaces can help.

Websites go through different trends that most adapt to for example many websites are very flat designed currently, newly built websites are not very common to contain some features such as drop-shadow, opacity etc. My opinion on this is, if it works then it works, with trends always changing features tend to make a comeback.

McDonalds ran a campaign “100 McDonalds Moments” where customers would submit their stories of their favourite moments at McDonalds and they would illustrate them based on the top 100. Their website was of 2D graphic design with interactive features such as following the mouse, expanding windows, transitions through page changes. One main point I took from this site was to make your site fluid, make the user never notice they change pages, that everything works together.

Photography

My website would be telling stories through the medium of photography. This is terribly important that the images are of high quality and reflect what the interviewee is talking about, getting this wrong can give the viewer disinterest when watching the completed piece.

Photography

I looked at many different photo essays in detail, one that stood out for me was called “Detroit now and then”, a photographer went to a Detroit and shot a photo essay of an extremely poor neighbourhood. They had discovered old photographs of different areas and merged their photographs over-laying then and now. One image in particular – a school hallway, then was full of students walking to class, freshly painted walls and now a trashed building, graffiti all over the walls, lockers kicked in, ceiling parts had fallen, an all around mess. The story had great context and it was clear. The photographs played on emotion. I took many of these tips when shooting my own photographs for the stories that would feature on my website.

Functionality

Functionality plays a massive part of web design, it’s very easy to see when something isn’t working the real task is figuring out what exactly the problem is. With the web, there is always functions that clash with each other so identifying what exactly you want your website to do is a large part of the battle. My website, for example, I wanted to create a platform that would adapt to every environment. When deciding this I assumed it would be just the task of designing a certain type that would work everywhere.

I looked at many visual storytelling websites with great functions but poor designing. Upon further digging many websites I reviewed was found using functions that were out-dated and slowly not working anymore.

“1 in 8 million” a photographic storytelling website by the New York times, told excellent stories that really captured the images. Their down flaw, in my opinion, was their site was not appealing to look at it was dark and didn’t reflect all the brilliant stories that featured on it.

Development of Prototype

Many functions were influential to my prototype, fading functionality that would go through the pages without relatively knowing you were, looking at pop up windows instead of changing pages. As well as including sharing functionality because online sharing is so big on the web.

Changing pages was a big concern as I wanted the user to almost not notice they are changing pages through the website, for the prototype going with pop up windows was a risk but would give me the insight into how it looks and functioned so not having everything on separate pages was discarded but would still be brought back after development if it didn’t work out.

Testing & Evaluating

Browser Testing

User testing was very important for my website, with so many browsers out there it would be hard to cover all browsers to function correctly for my website. From user testing, I discovered that the font I was externally pulling into my website was not showing on outdated chrome browsers. They functioned correctly in Firefox & Safari.  

The homepage of the site featured stories in different panels, these panels had mouse hovering code to ease expanding on them. This function did not show on Chrome Browser but still functions correctly, I couldn’t find a solution to this testing but because it still functioned it did not affect the main functions of the site.

 

Conclusions

My final year project started in September 2014, I was focused on bringing light to viewers about Dublin City Night-Life with individuals stories. My other aim was to create a functioning storytelling platform while creating high-class photography shots that would tell the stories of different creative surrounding the Dublin music scene.

My research that took place on current websites telling visual stories or appealing functions gave me inspiration that would help me construct my full site. The result of this was that I was able to bring my vision to a live website. I reviewed many technology languages such as HTML5, JQuery interactions, external fonts. Reviewing of my videos and photographs were a large part of my project meetings with my supervisor Danny and other classmates involved in my group with beneficial feedback was greatly appreciated.

Lessons Learned

A large lesson I learned from my project was getting the website to function correctly across browsers. With the browsers having to be up to date to function was a major thorn in my website as the font that was supposed to be displayed was changed if viewed on an old browser and the alternative didn’t work well at all.

For my final year project reflecting and looking back, it was a difficult task working with subjects and their different environments, I did struggle to get audio to work in many different places. This was a big lesson and something I will definitely look at for future projects as before I would not have focused on audio so much it wasn’t the big component but it is so important and very difficult to achieve on your own.

View the visual diary from the project