Research and Privacy

design for digital media environments

Malcom Crompton told the Cebit conference in Sydney that using web 2.0-style services will only succeed if citizens feel completely comfortable with the privacy implications of the service. He goes onto suggest that the exhaustive amount of information asked without being reassured by any statement of accountability , the citizen is likely to choose either not to engage or engage in an unproductive way. Users will act with defiance when they feel their privacy is being impinged upon. For example, when facebook made a change that allowed for the exposure of a users relationship status a 700000 members petitioned. However, they will act positively when three key concerns are addressed- control, fair risk allocation and accountability.

When considering such an important decision as buying a house, privacy and the users trust is essential in order to create a successful web application. Be this through making sure information is correct and updated to giving the user control of their own information.

The use of simple to complete forms, such as sign up, would mean more reliable and trustworthy data. Furthermore, the use of if statements and messages would help reduce to amount of missing or incorrect data.

The use of sign up, login and sessions will help with the growing concern of privacy as a correct username and password will be needed in order to see and change account details. As well as sessions ending once the user has logged out.

loggin

Code showing login session

When researching into users trust in web apps I found colour is an important factor. Colours have psychological properties and can be said to relate to the body, mind and emotions. Not only is blue a commonly favoured by both men and women, but it is seen as trustworthy, dependable and committed. We are surrounded by the colour blue and it is seen to be a constant in our lives and therefore symbolises qualities such as confidence, loyalty and wisdom. When researching into existing property retail sites I found blue colour schemes to be very common. Blue and greys appear to be sleek and high tech, emphasising the users trust of the website. Websites such as rightmove and prime location have decided to use this colour in order to seem welcoming and reliable.

prime

Prime Location’s home page

rightmove

Home page of rightmove

extract

Colour extracting rightmove’s home page

Therefore, we decided to go with a blue, grey and white colour scheme in order to make our web app come across crisp and professional, a website users will trust when deciding something as important as buying a house.

Initial Wireframe and Research

design for digital media environments
right1

Rightmove filter

right2

Rightmove results

zoop1

Zoopla home page

zoop2

Zoopla results

Whilst researching into existing property sale sites i noticed they all had similar design layouts:

– Top navigation bar linking to all pages. Including the logo, which is usually text rather than an image

– The home page has a large central search bar

– Main focus on interactivity and the user being able to filter results to get the results they want

– same filter options- price, location, no. of bedrooms

– filter option on left hand side of results page

– results are shown on seperate cards, all include images, price, location and short typed description

– users can interact and personalise their accound through saving properties and contacting the agent

– white background, eye catching images

– Large colour/ image blocks

– simple but neat design with easy navigation.

– sign in/ register = top right hand corner

My own wireframes considering these observations…

home1

Home Page

signin

Sign in/ register pop up

sale

Results page

about

About page

By following standards, users will feel comfortable in navigating through the website and thus will meet their expectations.

Development and Realisation (Research and Planning) – Mindmap

Development & Realisation

In preparation for the creation of my infographic poster i needed to do some research into my chosen subject and gather the data i will be presenting. As i chose the brief requesting the information on who knows who and how in Star Wars, due to personal interest and knowledge, i thought it would be good to start by looking into who the main characters are and how they know one another. I decided to present this as a mindmap in my sketch book for future reference when creating my poster. I need to account for the number of characters included when considering space and poster layout. DSC_0161Here you can see i’ve tried to incorporated Harry Beck’s concept of creating a full system map in colour. We were introduced to the idea of the London Underground map being a ‘masterpiece of design’ (Carrier, 2007) through the presentation of complex data in a lecture. I was intrigued by this approach and decided to do some further research into the design. It occurred to Beck “that it might be possible to tidy it up by straightening the lines, experimenting with diagonals and evening out the distances between stations.” His ‘diagram’ is instantly recognisable and copied across the world due to making the system modern, quick, efficient  easier to navigate.  Many would say Star Wars is complicated to understand due to the sheer amount of characters and creatures, i aim to simply show characters relationships for my target audience through the use of this concept studied in my infographic poster. Below is a picture of Beck’s Underground Map from 1933.Beck_Map_1933

Carrier. D. 2007. ‘Harry Beck and London’s iconic tube map’. Time out London. http://www.timeout.com/london/things-to-do/harry-beck-and-londons-iconic-tube-map-1

Development and Realisation (Research and Planning) – Doodles

Development & Realisation

enhanced-buzz-wide-21623-1318948828-17

591ea8e91d582a37facb26bcda4e6bff

Whilst researching into existing Star Wars infographics and minimalistic character representations i came across two talented designers. Grégoire Guillemen’s famous capsules proves that you can easily and effectively portray characters or any other cultural icon with the use of a few simple shapes and colours. All of his work under this project is easily recognisable and simple, however, it’s unique and eye catching due to the use of bold, solid colours and sharp, defined outlines. As Star Wars is such a renowned franchise, following this path should be fairly successful as the characters are iconic and well loved enough to be easily recognised.

starwars1-1Similarly with Joe Stone who has in fact created a Star Wars infographic poster following a very similar approach; focused on creating minimalistic character designs to allow the audience to know which character it is but not over doing it with unnecessary detail which will draw the attention away from the data being presented. I aim to do something similar to Joe Stone as it looks professional and is influenced by the approaches i aim to follow however, it may be too cluttered and confusing for a younger target audience. Therefore, i think i may reduce the number of characters and try experimenting with the layout and space for it to be as easy to understand and as systematic as possible.  Below i have done some doodles experimenting with this simplistic approach, focusing on few main characters and their relationships.

IMG_20141126_003921

Guillemen. G.  2011. ‘Famous Capsules’.  http://www.greg-guillemin.com/85780/152069/gallery/famous-capsules

Stone. J. 2013. ‘Star Wars Family Tree. http://www.joe-stone.co.uk/portfolio/swfamilytree.html

Development and Realisation (Research) – Flat UI Design

Development & Realisation

Following up from my previous blog, i conducted further research into flat designs and their use. Our PAL leader introduced us to this approach by telling us  it was a basic style of illustration which was commonly used in web design and app development. In an online article, Luke Clum (2014) explores flat designs by examining how rather than bringing aspects of real life to an interface, it illustrates a clear separation between technology and tactile objects. It follows a belief that if an aspect serves no functional purpose there should be no need to include it, it would be considered a distraction from user experience. Here is an example from Windows 8 which was the first major software using flat UI design to hit the market.

livetilesAnother well known developer to take on this approach being Apple with their latest software update, IOS 8 with the removal of the drop shadow, texture and gradient.

imgres-1

This style is inspired by minimalism however, as Clum goes on to say,  just because it lacks any flashy design doesn’t mean this style is boring.The use of bright, bold colours help the illustrations pop from backgrounds and grab the users attention. In order to follow this approach the use of solid, vivid colours is vital.  I aim to take this research on board when creating my poster, as i feel a minimalistic approach to the brief would help me effectively get the Star Wars family tree across whilst appealing to my target audience of young Star Wars fans.

Clum. L. 2014. ‘The Beginners Guide to Flat Design’. Creative Bloq. http://www.creativebloq.com/graphic-design/what-flat-design-3132112

Development and Realisation (Research) – Influences.

Development & Realisation

Being fairly new to infographics and their design, i decided the best way to start research was to look at existing pieces to get a better understanding of what is required from an infographic and what may work for my own Star Wars poster. I came across a website full of award winning infographics,  http://www.informationisbeautifulawards.com/showcase, here i came across some of my favourites which helped me get a better understanding of how to start this assignment.

DNxvj

I love the simmediumplicity of both of these infographics, even though there is quite a bit of text (something i aim to stay away from), the different ways in which the data is presented is so easy to grasp and appealing to the eye. Ranging from pie and bar chars to maps and timelines. I especially like the Meet the Gallaghers infographic below. The dark background compared to the bright graphics help emphasise the data, its easy on the eye and i will consider this when designing my own. Furthermore, the use of the simplistic representations not only effectively conveys the characters as they are easily established but fit well in portraying the story  and appealing to the audience. Similarly to this example, most flat designs are created as vectors on software such as Adobe Illustrator. As we are required to create an A2 poster with the use of vectors i feel further research into flat designs will be hugely beneficial for when i come to create my poster.

Kinetic Typography. 2

Kinetic Typography, Motion Graphics, Research, Task

As this is my first time using AfterEffects, as well as practising under supervision in workshops, I have watched online tutorials on how to create kinetic typography in this Adobe software. The tutorial I found to be most helpful was After Effects Tutorial – Basic Typography & Motion Graphics by the YouTube user, thevfxbro (2013). He went through the process of animating the text to fit with the audio, to then making the clip look professional through the addition of masks and shadows. In addition, he talked through AfterEffects shortcuts to help make the process quicker and easier. I hope to use these skills when creating my own motion graphics piece.

Furthermore, for inspiration I’ve looked through the Kinetic Typography vimeo channel, considering the different ways people have animated their typography and the various audio used. I found Robin Celebi’s Cave Johnson Lemon Rant, Kinetic Typography (2012) to be my favourite. His emphasise of certain words through animation helped to convey the emotion from the audio, this being something I hope to achieve in my work.

References:

thevfxbro. (2013). After Effects Tutorial – Basic Typography & Motion Graphics. Youtube. https://www.youtube.com/watch?v=F3h2pbZkMT4

Celebi, R. (2012). Cave Johnson Lemon Rant. Kinetic Typography Vimeo. http://vimeo.com/31960204

Alphabet Collage. 2

Photography, Research, Task

For this first task, I’ve decided to focus on seeking abstract shapes, which resemble letters of the alphabet in nature.

composition-vi-1913

Composition VI. Wassily Kandinsky. 1913

‘Abstract art, the pretended autonomy and absoluteness of the aesthetic emerged in a concrete form’ (Schapiro, 1937). To gain more knowledge on this art form, I choose to research the Bauhaus movement and Moholy Nagy, a painter/ photographer and known Bauhaus professor. Griffith Winton (2007) discusses in an online article that Walter Gropius founded the Bauhaus in 1919 in the city of Weimar, with its ‘core objective being a radical concept: to reimagine the material world to reflect the unity of all arts.’ Artists such as Moholy Nagy and Kandinsky, two of the schools renowned faculty members, both believed in the reproduction of old formulas and experimenting with vision. Haase (2005) discusses how Kandinsky used metaphoric concepts consisting of the metaphoric concept of ́spirituality ́, ́geometry ́ and ́emotionality ́. He then goes on to say, Kandinsky wrote that the artists had an ‘inner necessity’ to express the ‘inner essence of things’. He believed colour evoked emotion and that along with other formal elements like lines, shapes and forms, colour is a language that communicates to all. One of his paintings which portrays this perfectly being ‘Composition VI. 1913 ‘.

hb_1987.1100.158

Photogram 1926. László Moholy–Nagy

When looking for naturally occurring letters and deciding how to contextualise it, I should consider its form and colour to understand the emotion being communicated. As well as experimenting with light and colour, I need to look closely at form. Something Moholy Nagy has shown through his Photograms. For example, Photogram (1926) explores the brightness of the objects silhouette. It has however successfully created an abstract and polysemic piece. In fact here he is only using something as simple as his hands and a paint brush.

For this task my aim is to look closely at the outside world, not only focusing on the small and close up details but the forms as a unity. I hope to take inspiration from Moholy Nagy when opening my mind to encourage various perceptions.

References:

Schapiro, M. (1937). Nature of abstract art. American Marxist Association.

Griffith Winton, Alexandra.(2007). “The Bauhaus, 1919–1933”. In Heilbrunn Timeline of Art History. New York: The Metropolitan Museum of Art, 2000–http://www.metmuseum.org/toah/hd/bauh/hd_bauh.htm

Haase, F. A. (2005). ‘My colorful lexicon’: Synesthesia and the production of metaphors or’Is reading synesthetic’. A Parte Rei: revista de filosofía, 39.