Research for planning stage

My first two phases are my initial planning and requirement which I started to fill out in my previous posts. I thought it would be helpful to do some research into relevant projects/ app’s that have already been made and which might influence my approach to my own project.

An interesting concept for the foundation of this project is the idea of ‘TagandScan’:

Gerrit Visser (December 17, 2003)
The New Scientist writes on the UK service TagandScan “By tagging messages to mobile phone “cells”, users can post reviews, leave notes for friends, or even organise demonstrations”.

When a user logs onto the TagandScan site using their cellphone, they can opt to be automatically located according to network cell from which they are calling. They can then create a message or view ones already left in that cell by other users.

http://folksonomy.co/index.php?search=Tag+and+Scan 

This bit of research can link to the idea of a Geocache due to the fact it’s about someone last updating this message in 2015, and then the next person to find this is not until 2025. I need to think of reasons why the user would have left this message and how to make it unique.

Key development points:

  • A gateway into the past
  • The message pops up, but can the user edit it or add to it?
  • User scenarios + USD- think of how they would use it, what they like, their background
  • Why is the message important to the person who left it there, why hasn’t it been updated in 10 years, is it timed? Can it only be accessed every ten years

Developing on my original ideas:

  • Noddy train- might not exist in 2025, so the message being planted where it used to be stationed.
  • Did something dramatic happen?

Relevant Research: ” Berlin’s Abandoned Spreepark”

This is a really interesting take, its not based on an app, but it does show how things can dramatically change over time. This amusement park used to be very popular and then closed down. The images below are the aftermath. Its amazing the impact of the photographs when set at a particular time of year and day. This is something I need to think about. Not just what I want my outcome to be, but what the concept and requirements are.

http://folksonomy.co/index.php?search=fun+park

I also wanted to think of some other directions I might want to approach which are different from my first  ideas. It’s important to make sure I look at all possible outcomes as part of the Iterative Design, I need to show my progress and how I came to pick these ideas and why they are significant and focus on the actual design later.

Other possible settings:

  • Arcade, showing contrast of how its changed in 10 years as the outside is already fairly run down.
  • Jurassic Marble blocks
  • Underneath the Pier, possibly in 10 years there will be a glass bottom floor to walk out on linking it to the sea life.

How these ideas can develop:

  • A flashback linked to a specific person
  • A early memory of family holiday
  • No longer exist
  • An anniversary of the family holiday, last one they could go on?
  • Link to the young family member returning on a school trip

Research- Typography

Today I started to look into what sort of typography we might want to use in our website and possibilities of colours. I stuck with basic easy to read text to keep our website looking aesthetically pleasing and professional while still appealing to our target audience of students. This is an important factor, as if the website has difficult to read text then its not meeting our criteria. As for colours I need to confirm with my group if we are keeping the text all the same colour or changing it to correspond with our anonymous users gender, however I have looked at a selection, trying to keep them neutral and not too bright that it would make the page look unprofessional or even slightly childish.

Image (4)

Above: mind-map of ideas for the websites text.

Research- Login page layout

After researching into the layout of Twitter for the main layout of our website, I thought it might be useful to look at the signing up page for a few different websites to see what fields they require. The less steps there are to go through the more likely people are to sign up to be part of the website.

fb

Above: Facebook = 7 fields to fill out before signing up.

Facebook has quiet an easy to follow layout to sign up, with the option of setting it up via a mobile phone as well. Like many pages it also contains terms and conditions in small print, with some of the main text being to make it clear the website it ‘free’. I think this layout works well, for our website we would not need to ask for a phone number but would replace this with the students ID which would then be able to inform us of their year of study.

jfgke

Above: Twitter = 4 fields to fill out before signing up.

This layout I think is better than Facebook as it is very simple and to the point as many would not want to configure their phone contacts with the social networking. It only asks for very basic information and I think it is good that it gives you options of usernames you can use as it can be annoying trying to find a unique name. Both Twitter and Facebook colour coordinate each page with the colour blue being dominate on each one, which gives it a more professional layout which we will need to take into consideration when designing our website.

mybu

Above: The log in page for Bournemouth University= 2 fields required.

I think that although the log in process for the University is very easy, just requiring 2 fields, there is a lot going on around the page, which looks a but cluttered and may make it difficult for new users to find the log in area. Based on this I think it is important we keep our page very simple, with just a few steps to log in.

student portal

Above: Student Chat room log in= 4 fields required.

This is not a website that I am familiar with but I did quiet like that layout, it has just the main fields which makes the process of signing up a lot more desirable, and the use of fairly neutral pale colours means its not too bad to look at. The use of speech bubbles throughout also makes it clear that the website is highly based on students talking too each-other which is a similar idea to what we are looking at. I don’t think we would have as much going on but it is useful to look at a website that is based on a similar idea.

https://www.facebook.com/

https://twitter.com/

https://mybu.bournemouth.ac.uk/webapps/portal/execute/tabs/tabAction?tab_tab_group_id=_29_1

http://www.thestudentroom.co.uk/

Research- Page layout and Twitter

Our main inspiration for out anonymous posting page comes from Twitter.We chose to use a similar layout as it is very clear the chronological order of posts and the post take up a majority of the page which is similar to what we want to achieve. Although each profile has a picture with it, we will just make the students gender known. We still need to do some more research, but we were thinking of making the colour of the posts correspond to the gender.

nav bar

Above: This is a screenshot of Twitter’s navigation bar:

unlike many other websites, it just uses basic photo’s to help the audience navigate between pages. This works well because they are universally used, however people who are not familiar with twitter may not understand the notification button or the hash-tag.

tittttt

Above: The post layout on Twitter: 

It shows the users identity, for example @ITVCareers, and the time they posted the tweet, they also highlight the hash-tags and any links embedded into the tweets which is useful for the audience to easily recognise. Below the tweet there are further uses of basic photos which makes the tweet available to be re-tweeted, favourites and replied too. I think this is very easy for the audience to use and navigate around. When creating our website I think we will defiantly use a similar layout but with less uses of symbols instead of words.

twitter

Above: Twitters use of columns and boxes to keep each area separate.

This layout is a good idea for this site as there are more actions than just tweeting. However I think for our website we will only need two columns as the identity of the users will be anonymous and the other links will be easy to find using our navigation bar which will include the posts page, a meet the team page and then a bit of history on Bournemouth university. Our users will be able to add photographs which will portray Twitter in the fact it will be the same size as the text box of the post.

Layout research

For my poster I like the idea of using a similar layout to a double page magazine spread, sticking to my theme of obesity in relation with surgery or NHS costs I need to present my ideas so they are easily recognised however not to graphic that it would be offensive to my chosen target audience of 18 to 30 year old. To do this i might have to make my idea come across through a more abstract approach rather than literal, I need to think how I can portray surgery using basic shapes and mainly neutral colours.

https://beckyhughes94.files.wordpress.com/2014/12/e3532-dsc_0037.jpg

https://demimason.files.wordpress.com/2013/06/magazine-book-layout-inspiration-32.jpg

https://beckyhughes94.files.wordpress.com/2014/12/c1271-miley-cyrus-billboard-magazine-cover-01.jpg

http://www.shutterstock.com/pic-170628035/stock-vector-minimal-infographics-design-can-be-used-for-workflow-layout-diagram-web-design.html?src=HhnZabTeJmRlFx7E_R2JKA-1-44

Some very interesting takes on this topic could be some of the following photographs, although I am not sure I will have enough time to create this very complex layout, however they are very inspirational and beautifully created photographs which combine vector graphics.

https://www.pinterest.com/davidfoxon/montage-photography/

A helpful website I have found which give simple tutorials into using Inkscape which will be a helpful reference when using Gestalt principles to construct my ideas into a highly visual based double page spread.

http://www.chrishilbig.com/category/tutorials/inkscape-tutorials/

Ideas and Research

After completing some basic research and selecting my ideas of ;

  1. 2 countries to compare (high vs low rate of obesity)
  2. Surgery/ hospital operating theatre as my main theme in the poster
  3. Looking at the cost of Obesity/ forecast

I then have created some mind maps and conducted some relevant image research into my selected topic, looking at my audience, the layout and what sort of statistics I want to represent.Image (2) Image (3) Image

Websites for images used-

http://blog.thespiritualcatalyst.com/the-cause-of-obesity/

http://mhadegree.org/obesity-and-your-healthcare-career/

https://www.wellbeingpics.konecht.com

http://www.mslimalicious.com/2011/12/obesity-in-france-french-women-can-get.html

http://www.cspinet.org/nah/articles/fighting_inflammation.html

http://indianexpress.com/article/lifestyle/health/weight-loss-surgery-may-cause-bone-loss/

Development and Realisation

http://www.informationisbeautiful.net/tag/health/

‘The emphasis in this assignment is not on data collection so do not spend time gathering data unless it is simple and easily accessible. Instead identify data you can source and use which you potentially see as interesting to visualise.’  Whilst having these assessment criteria I have chosen to focus on just two countries to compare whilst using obesity as the main element, I would like my layout to primarily represent the surgery aspect of my chosen topic.

As we are not allowed to present these ideas with the use of supporting materials like text or verbal explanation I need to think about how these ideas can be clearly represented with only the use of vector graphics. To do this I have started to conduct some research; this website is a showcase of information graphics and also shows pieces that have won awards. I have been previewing some which could be relevant to the idea of Obesity and in turn this has given me some insight into how i may present my piece of work. Below are some of my favourite examples, although they are not all relevant I like the choice in layout and the way they have used a mixture of images in conjunction with minimum stats and words to make the subject matter clear.

Task 4- Research into After Effects

I did some research before starting my task into how to use After Effects to create a powerful piece of Kinetic typography. Below are some videos which can be helpful when you are a beginner. After Effects have been used to create not just Kinetic typography but also green screen effects in films and news broadcasting.

This will link to the workshop I will have on After Effects and the process I am going to use when completing task 4 on Kinetic typography.

Task 4 – research into Kinetic typography

Motion Graphics has developed into the realm of digital media and draws influence
from both animation and graphic design. A study of the history of Motion Graphics
reveals, for example, early work by Saul Bass in creating film title sequences.
Typography provides a pathway into the complex world of contemporary Motion
Graphics, and by using existing typographic font elements and animating them to a
soundtrack it is possible to experiment with many aspects and dynamics of motion and
emotion.

THE TASK
Use and develop your knowledge of After Effects to generate a sequence of no less
than 20 seconds in which kinetic typography is used to accompany and enhance a
soundtrack featuring voice. 

History of Kinetic typography :

In fact, the first known use of kinetic typography appeared
in film – specifically, Saul Bass’ opening credit sequence
for Hitchcock’s North by Northwest [Bass59] and later
Psycho [Bass60]. This work stemmed in part from a desire
to have the opening credits set the stage for the film by
establishing a mood, rather than simply conveying the
information of the credits. Use of kinetic typography is
now commonplace for this purpose, and is also very
heavily used in TV advertising where its ability to convey
emotive content and direct the user’s attention is generally
a good match to the goals of advertising. We believe that
if it can be made accessible via good tools, the power of
kinetic typography can also be applied to benefit other
areas of digital communications

http://kinetictypography.dreshfield.com/

http://johnnylee.net/kt/dist/files/Kinetic_Typography.pdf

Saul Bass

Saul Bass was one of the “greatest graphic designers of the 20th century. He became known for designing brilliant animated sequences for motion pictures. In his 40+ year career he did work for the best Hollywood movie makers including Otto Preminger, Alfred Hitchcock, Stanley Kubrick and Martin Scorsese just to name a few.

He did work for numerous movies, including classics such as Psycho, Casino, West Side Story, Anatomy of a Murder and dozens of others. He won numerous awards, including an Oscar in 1969 for best documentary for “Why Men Creates.””

http://www.saulbass.net/

The website below explores what exactly motion design is :

http://motion-plus-design.com/english/

Kinetic typography can be used to enhance historical speeches and make them have a greater impact on the audience, as well as give them a clearer understanding of the underlying meaning.This can be shown in the example below of Charlie Chaplin’s ‘ The great dictator’.

Task 3- Animation -Research

The brief

“Animation is for kids”. This popularly held view is partly historical – Disney and later Warner
Brothers, and also partly due to the sheer quantity of children’s cartoon animation on television.

Nowadays animation occurs in many different situations from children’s tv, to TV advertising, and to
feature film animations. Animation also occurs in many hybrid situations combined with live action.

There are also many animation techniques and formats. and history reveals how techniques have evolved
since the early flick-books and drawing-on-paper methods.
Many of the craft approaches have now been superseded by computer techniques. SouthPark looks like
cut-out paper, The Simpsons looks like painted cel-animation, Chicken Run looks like stop-motion
puppets etc. But many animators still adopt traditional techniques, and ‘drawing’ always remains an
important skill.

Research

Many early examples e.g. ‘The Sinking of the Lusitania’ by Winsor McCay in 1918

https://www.youtube.com/watch?v=FhCWmIu1H_g

Betty Boop

“Betty Boop was first created in the late 1920’s and into the 1930’s by Grin Natwick as a poodle character. Max Fleischer finally made Betty human in 1932 in the cartoon called “Any Rags”. Her poodle ears turned into hoop earrings, and her poodle nose turned into a girl’s button nose.”

http://theroaringtwentieshistory.blogspot.co.uk/2010/06/betty-boop.html

betty_boop_dog_ears

Betty_Boop

Toy story – Zoetrope

The zoetrope consists of a cylinder with slits cut vertically in the sides. On the inner surface of the cylinder is a band with images from a set of sequenced pictures. As the cylinder spins, the user looks through the slits at the pictures across. The scanning of the slits keeps the pictures from simply blurring together, and the user sees a rapid succession of images, producing the illusion of motion.

 

 

Modern day examples of animation relevant to the task I have been set can include sketches such as ‘Simon’s cat’ which is a series of drawings that have then been grouped together and animated to create a short film sequence, accompanied by very basic sounds.