Infographics produced by Omar Sosa
Infographic Double Page Spread Examples
Linear Data The images displayed here to the left reveal an installation that is based at a University, with a very ‘beautiful 40 meter long, monochromatic audio/video installation at the Hangar Bicocca in Milan by Carsten Nicolai.’ The interesting nature in this design is the not only the scale of the design but also the aesthetics, with the simple linear formats being used and repeated in a continuous pattern to represent a set of data. There is an interesting sense of enigma created, this being through the design, with the different weights of each stroke being used as a way to reveal a certain element of data. This would be a very fascinating approach in my own project if I was handling a great amount of data and would like to apply it in a minimalist, easy to read and aesthetically pleasing way. I also find the use of colour and interesting nature in this design, with the black and white being a heavy contrast and leaving us with the enigma yet again of which line we should read in representation of the data, whether this being the black or white line. In order to respond to these large installations there is a visual (displayed at the bottom) which has a much more clear and understanding way to discuss the data that is being handled. This ellipse form used is a common approach in data visualization, this being discovered during my process of research, coming across a wide range of different designs which follow this spherical format - this continues on from the basic forms of data visualising including pie charts etc. However, this is an element I could perhaps pursue myself in my design process, perhaps taking a basic format such as a bar chart of a pie chart, and exploring the design styles in order to create something that is much more aesthetically pleasing to the audience.
Digital Data These designs were also found on Designspiration.net and are a beautiful representation to digital data visualization. The designs displayed are visually pleasing and the data present seems to be very compatible due to the interactive interface. The interesting nature to this is the fact that user interaction gives the data a way of communicating with an audience, therefore possibly having an opportunity to open up into a form of marketing, producing perhaps a website or application where the user could apply their own data, and through coding scripts this information could be generated into aesthetically pleasing visuals. These designs do also conform to the ellipse forms commonly seen in this form of design. However, they do take on a new visual approach with the scattered cube graph, using different scales and colours in order to discuss pieces of information in different manners. This is a very clever and thoughtful approach as it does not just conform to the high aesthetic expectations, but the information is legible and easy to navigate through, due to the colour coding used. This is an factor that I will also have to take into strong consideration when creating my own visuals, as legibility is a key element, as without this the visuals would make no sense and therefore would lack purpose and meaning, as they would not fulfill the expectations of the brief. Continuing on from this, I will be taking into consideration perhaps producing my own form of data visualization that interacts with the audience, as this allows an opportunity for me to perhaps open up a new market, with a product that could be used as a website, interactive pdf. Or an application either online or for a mobile device. However, these circumstances do depend on the outcome of my data collection and the content or discussion that can be created from this data, as the purpose of this project is not just to take a bulk or randomized data and produce something aesthetically pleasing, but also have some form of purpose and meaning behind the data, with a possibility of others being able to relate to the information, dependent on if the data is very personal to myself. This will all come clear when I go into collecting my data and filtering through the collection in order to discover an interesting and engaging subject matter that can be further pursued and discussed to in a aesthetically pleasing manner, with great purpose for others to respond too.
Data Installation Displayed to the right is yet another rather inspiring piece of Data Visualization, with this in particular piece being an installation, using a 3-Dimensional based product in order to represent the data. These visuals are not only satisfying due to the visual outcome, with a key focus based on colour balance, format, layout and structure, but also due to the interaction this has yet again with the audience, in this case being through the sense of touch. It is arguable to say that this data could be interactive even with a person who is blind, with the layered structures being a way for someone to handle the product, and stroke across the installation in order to get a sense of height and scale, with the different heights revealing different pieces of information in the data. However, it is also clear in this design that the colours are a key element, with this gradient tone being used in order to reveal a different area of information and to allow the data to be much more legible and easier to understand. The use of colour is something that I have discovered throughout my research will be a key element when producing my own data visuals, with colour, scale, shape and position being all different ways to take a piece of data and discuss all of the individual components. This visual displayed is a clear example of how some of these elements can be applied successfully in order to discuss different areas of data in a sufficient and an orderly fashion, without interrupting the aesthetics of the installation that has been produced.
Social Networking Social Networking is a vastly growing form of communication and is arguable one of the most commonly used form of interaction between human beings, with the potential to one day perhaps be more common than just simply talking to others. With the succession of several different Social Networking websites around the globe, including Twitter, Facebook, Instagram, Youtube, Skype, Vine, Pinterest etc. The people of todays society have a wide range of different interactive websites to use in order to communicate quickly and sufficiently with other users. This usage has mounted to great levels, with people accessing some of these websites each and every day as a way to communicate with others, discuss their daily activities, expand their networking and discover what other people are doing. This usage is also massively expanding due to the interactive mobile phones of todays society, with a high majority of these websites being accessible through multiple platforms, these could include tablets, mobiles, games consoles and computers. With this wide range of positive attributes towards Social Networking ie. Quick and easy interaction with others, with an opportunity to document daily activities and produce an interactive diary almost, there do come a few negatives. Some of these include pedophilia, bullying and the element of hacking, with an invasion of someones privacy being admitted through improper use of some of these websites. These factors outlined do account strongly for teenagers of todays society, with bullying and pedophilia effecting younger users all across the globe, due to the easy access these youths have to the websites, and the opportunities set for improper use. This is why I am going to undertake a data collection based around Social Networking, and I will explore teenage usage of todays society from a personal perspective, monitoring my own usage over a two week period and reflecting this with my sisters usage over a two week period, with an age gap of 5 years, with myself being 19 years of age, and my sister 14.
Date
Time
Time of Day
Website
Device
Duration (Minutes)
Reason
3 Dec 13
00:33
Morning
Mobile
5
Update
3 Dec 13
00:39
Morning
Mobile
2
Update
3 Dec 13
01:21
Morning
Youtube
Mobile
40
Viewing
3 Dec 13
02:04
Morning
Mobile
5
Update
3 Dec 13
02:11
Morning
Mobile
1
Update
3 Dec 13
11:22
Morning
Mobile
10
Update
3 Dec 13
11:32
Morning
Mobile
5
Update
3 Dec 13
11:38
Morning
Mobile
1
Update
3 Dec 13
11:41
Morning
Youtube
Mobile
2
Update
3 Dec 13
12:03
Afternoon
Laptop
10
Contact
3 Dec 13
12:07
Afternoon
Laptop
5
Update
3 Dec 13
12:13
Afternoon
Laptop
1
Update
3 Dec 13
12:14
Afternoon
Youtube
Laptop
20
Update
3 Dec 13
12:22
Afternoon
Behance
Laptop
5
Browse
3 Dec 13
12:25
Afternoon
Skype
Laptop
70
Contact
3 Dec 13
14:44
Afternoon
Laptop
5
Update
3 Dec 13
14:50
Afternoon
Youtube
Laptop
90
Viewing
3 Dec 13
16:03
Afternoon
Laptop
5
Update
3 Dec 13
16:09
Afternoon
Laptop
15
Update
3 Dec 13
16:14
Afternoon
Laptop
2
Update
3 Dec 13
17:36
Afternoon
Youtube
Mobile
2
Update
3 Dec 13
18:04
Evening
Mobile
5
Update
3 Dec 13
18:11
Evening
Mobile
15
Update
3 Dec 13
18:27
Evening
Mobile
2
Update
3 Dec 13
19:32
Evening
Laptop
5
Contact
3 Dec 13
19:38
Evening
Skype
Laptop
20
Contact
3 Dec 13
21:21
Evening
Youtube
Laptop
30
Viewing
3 Dec 13
21:59
Evening
Laptop
5
Update
3 Dec 13
22:05
Evening
Laptop
5
Update
3 Dec 13
22:08
Evening
Laptop
1
Update
3 Dec 13
22:09
Evening
Behance
Laptop
5
Browse
3 Dec 13
22:20
Evening
Mobile
5
Update
3 Dec 13
22:26
Evening
Mobile
2
Update
3 Dec 13
22:29
Evening
Mobile
5
Update
3 Dec 13
22:49
Evening
Laptop
10
Update
3 Dec 13
23:53
Evening
Laptop
15
Contact
4 Dec 13
00:11
Morning
Youtube
Laptop
20
Viewing
4 Dec 13
00:40
Morning
Youtube
Mobile
5
Viewing
4 Dec 13
00:45
Morning
Mobile
5
Update
4 Dec 13
00:51
Morning
Mobile
5
Update
4 Dec 13
00:56
Morning
Mobile
2
Update
Data Collection Following a long and tedious process of data handling over a two week period, I have collected a sufficient amount of data based upon my Social Networking usage. The results found when reviewing this collection are rather fascinating, with certain patterns being noticed through the process, for example the checking of Facebook, Twitter and Instagram using my mobile device each and every morning soon after I awaken, as well as the same process at night time before I go to sleep. This is something that I was subconsciously aware of, however I was not aware of how frequent I did this and how common this actually is amongst my friends and teenagers around my age gap, this being discovered when discovering this pattern with my fellow peers. With this data collected I believe that I have a sufficient set of data which will now support me to go on to develop some interesting discussion which I can display in an aesthetically pleasing visual aspect. However, in order to ensure my data is more accurate and sufficient, as well as having further elements of context to discuss, I have collected a series of data reflecting on my sisters Networking usage, as this will allow me to compare our data against one another and determine if there are any significant increases, decreases or in particular changes over the five year period that seperates the both of us. I believe that with this idea in mind I can go on to discuss some very interesting facts based around excessive usage, and the distinct changes dependent on ages and perhaps genders of teenagers whom use Social Networking. This discussion could be insufficient due to the fact I have not compared this data over a wide range of people at the same ages, however it is just a personal exploration and even if it does not reflect exactly on global results, it will still have an impact on our own usages, and could be an interesting way for myself to understand if my usage is at a high amount or my sisters is. I will now go on to evaluate my sisters results also, in order to ensure that the data is sufficient and is accurate and there are no mistakes, then I can continue to go on to filtering all of these data sets into percentages, allowing the mass amount to be much easier to handle when creating my visual outcomes.
Date
Time
Time of Day
Website
Device
Duration (Minutes)
Reason
3 Dec 13
07:46
Morning
Tablet
2
Update
3 Dec 13
08:22
Morning
Tablet
5
Post
3 Dec 13
08:27
Morning
Tablet
2
Update
3 Dec 13
12:33
Afternoon
Mobile
2
Update
3 Dec 13
12:36
Afternoon
Youtube
Mobile
10
Viewing
3 Dec 13
12:49
Afternoon
Mobile
10
Contact
3 Dec 13
15:44
Afternoon
Tablet
5
Update
3 Dec 13
15:53
Afternoon
Tablet
2
Update
3 Dec 13
16:22
Afternoon
Mobile
5
Update
3 Dec 13
16:25
Afternoon
Youtube
Mobile
20
Viewing
3 Dec 13
16:50
Afternoon
Snapchat
Mobile
2
Contact
3 Dec 13
17:51
Afternoon
Laptop
25
Contact
3 Dec 13
18:09
Evening
Skype
Laptop
40
Contact
3 Dec 13
19:00
Evening
Laptop
55
Contact
3 Dec 13
19:10
Evening
Laptop
5
Update
3 Dec 13
19:12
Evening
Laptop
10
Update
3 Dec 13
19:13
Evening
Laptop
2
Update
3 Dec 13
19:15
Evening
Youtube
Laptop
2
Update
3 Dec 13
21:21
Evening
Mobile
15
Contact
3 Dec 13
21:38
Evening
Mobile
20
Contact
3 Dec 13
21:49
Evening
Mobile
2
Update
3 Dec 13
21:51
Evening
Snapchat
Mobile
2
Contact
3 Dec 13
22:02
Evening
Tablet
2
Update
3 Dec 13
22:04
Evening
Tablet
2
Update
3 Dec 13
22:06
Evening
Tablet
30
Update
3 Dec 13
22:34
Evening
Mobile
2
Update
3 Dec 13
22:37
Evening
Mobile
10
Contact
4 Dec 13
07:30
Morning
Tablet
5
Update
4 Dec 13
07:33
Morning
Tablet
2
Update
4 Dec 13
08:41
Morning
Tablet
2
Update
4 Dec 13
11:11
Morning
Mobile
15
Update
4 Dec 13
11:17
Morning
Mobile
5
Update
4 Dec 13
11:20
Morning
Mobile
2
Update
4 Dec 13
13:03
Afternoon
Mobile
10
Contact
4 Dec 13
13:41
Afternoon
Mobile
5
Update
4 Dec 13
13:44
Afternoon
Mobile
2
Update
4 Dec 13
13:46
Afternoon
Mobile
2
Update
4 Dec 13
13:59
Afternoon
Mobile
2
Update
4 Dec 13
16:02
Afternoon
Skype
Tablet
55
Contact
4 Dec 13
16:24
Afternoon
Tablet
25
Contact
4 Dec 13
17:11
Afternoon
Insagram
Tablet
5
Update
Data Comparison As discussed in the evaluation of my previous data results, displayed is the other data collection that I will be using in order to reflect on and to allow me to create an intruiging discussion in my data collection. Through me collecting a similar set of data, with a focus on the same discussion I have allowed my existing evidence to be stronger, and my potential context in discussion to be enhanced and more fascinating for the audience to read. The data that I have collected here is my sisters own social networking usage, with a set of similar patterns noticed in reflection to my own data collection, these being recognised after evaluating the data set. Some of these patterns include accessing social networking websites at the immediate beginning of the day as well as at the end of the day, this being a way of myself and my sister getting an ‘update’ on todays happenings. The interesting nature of social networking is the fact it has almost become one of the main forms of communication across all platforms, with a constant update of news events being posted onto existing websites including Facebook and Twitter, this becoming the new way to get a general news update oppose to the more traditional known methods including reading the newspaper and watching the news on television. When comparing my own data set with my sisters, there is an interesting set of comparisons on the five year age gap that we are seperated with, this being an element in which I could discuss on a broader nature, making predictions that could be effective when relating it to teenagers on a global scale. With this five year gap my context in discussion will be re-enforced with a broader target audience to focus on with my further design process’, having the opportunity to interact with the younger audiences as well as the mure mature teens, with even the chance of opening up to an parent based audience, having them take a fascination to my data visualisation due to the impact it could have on their knowledge based on social networking, as well as the obvious teenagers that it would have a direct impact on also.
Statistics Finally with my data collected, I was then able to procede onto the next stage of filtering through all of the statistics that I could find through my research, transforming the bulk of data in percentages, this being a much easier way of reading the information present. When filtering through my data, I decided to look at the statistical figures in relation to three specific things, website usage, device usage and how much social networking is accessed at certain parts of the day. I took out this procedure for both myself and my sisters statistics and when reading them against one another I could see some significant differences, with quite a shocking difference and increase in figures for my sisters usage. When further analysis my results and doing some mathematical equations, I came to an understanding there is almost a 10% increase in my sisters usage, in comparison to my own. This result could be reflected on a global scale, comparing my own results for the older teenage generation and comparing it with the younger teenage generation. With my data finally collected, filtered and analyzed I was now able to produce some fascinating context that I could appeal to a target audience with. This is where I came to the conclusion of taking these results, and expanding them out onto a longer time period, producing the idea of how much of your lifetime you are taking up through using social networking. This is a rather an impacting result on people when I discussed these results with my colleagues, giving users a broader understanding on the great amount they are actually accessing these websites, almost in a manner which is subconscious. I decided to expand these results over a 1 year period, a ten year period and then over the average British lifetime of approximately eighty years, this allowing me to have a much more accurate assumption and a flexible amount of data and results to work with and to discuss with a target audience.
Pie Charts Finally with a sufficient amount of data I was then able to start producing some more aesthetic visuals in order to discuss my data. To begin with, I decided to take a very standard approach with one of the most commonly and frequently noticed forms of data visualisation used on a global scale, pie charts. However, I did not want to conform to the more stereotypical forms of a pie chart and wanted to added a much more creative and aesthically appreciative response through exploring new, interesting ways of producing the chart itself. I decided to use specific areas of information in my data in order to produce a sense of variation in my work, giving off a different set of visual outcomes for myself to analyze and compare the visuals themselves. All of the charts existing here are accurate and do reflect the data correctly, this being an important factor to me as it will support me in my future productions when perhaps taking one of these existing charts and applying it to one of my further designs. For example, I am considering producing an app using my data set, therefore having these existing data designs it will make my process much easier, with existing designs being available making the production of my app much easier to work with. I personally believe that the bottom designs are the most appealing, as they do not only manipulate this stereotypical nature of the pie chart, however they do still conform to the traditional natures, as well as being visually pleasing yet conveying the information necessary in a very clear manner.
YouTube
Skype
Behance
506
256
431
Monday
Tuesday
Wednesday
165
209
298
Friday
Saturday
Sunday
186 Thursday
1000
Monday
Tuesday Wednesday Thursday
Friday
Saturday
Sunday
Friday
Saturday
Sunday
750
500
250
0 Previous Week Current Week
1000
Monday
Tuesday Wednesday Thursday
750
500
250
0 Previous Week
66% 66%
23% 23%
6% 6%
179179 Minutes Minutes
3056 3056 Minutes Minutes
1034 1034 Minutes Minutes
Current Week
66% 66% 3056 Minutes 3056 Minutes
23% 23% 1034 Minutes 1034 Minutes
224224 Minutes Minutes
4% 4%
Further Charts Following my previous designs, I decided to continue onto produce a further set of charts which reflect and discuss my data set. For this approach I continued the pie chart design style, as displayed above, with another accurate set of data scales being used, I find these designs to be much more aesthically pleasing than the previous designs, as they actually deconstruct the pie charts and use colour in a sufficient manner in order to produce a fascinating visual outcome. Also, I find the style of design quite an interest visual response as they do conform to this manner of flat design, a style which I have studied quite a lot in my recent works due to my strong appeal to this style of design. Furthermore, I also produced another visual interpretation of my data using a triangulated bar chart, almost mixing a bar chart with a typical graph, using a block colour and a white line in order to produce a distinct comparison in data, this being in particularly based on my weekly usage, comparing the most recent week with the previous week, this being something that I do personally believe would be interesting to an audience who would access this data.
Dot Data As another form of visually interpreting my data I decided to explore a dot form which I ended up configuring all through my own experimentations. The way that the design works is each individual dot represents the time taken on each social networking website, using the stroke size of each circle in order to determine the time taken whilst accessing a certain website. Another interesting element that can be applied to this design is perhaps the interpretation of interactivity, this being through developing the application into some sort of interactive pdf. perhaps, where the audience would be able to interact the individual circles, and they could expand and highlight what the social networking website is they were using, and for how long etc. with potential for further information to be included. I personally believe this would be a rather suitable approach for this visual, as it brings interactivity, represents the data in a legible and an understanding manner as well as being visually pleasing at the same time. Furthermore, if I was to produce some form of application which all of this context is featured, where the audience would be able to interact and engage further with the context and discussion in my project, they could begin to produce their own ‘dot’ chart, this being determined through their own social networking usage, through using coding and working amognst a programmer in order to incorporate the visual representation through the audiences usage. This could also then become socially interactive as people could compare their charts with one another for visually stimulating the audiences perspective and understanding of others usage.
Cover Research With a healthy set of visuals to work with now, I was able to begin focusing on producing an innovative set of ways of discussing the data in a suitable format, this is where I considered producing a small booklet or maybe a magazine which discusses my data. Booklets and magazines are great, simple ways to take a data set and discuss it in an interactive manner, as well as giving the audience an opportunity to truly engage with the information featured and not feel rushed through the data collection itself. The main function of this sort of material is to by informative and pass over the suitable sources of information intended, in order to inform and impact on the audiences perspective on my discussion. These visual representations that are displayed to the left are perfect examples of how a front cover should look in order to appeal and engage with an audience, with a strong set of intentions noticed by the designers themselves to ensure that the audience to pick up the booklet and begin reading through, this being due to the aesthetically pleasing visual aspect, as well as the sense of enigma created through the minimal information featured on the cover. However, it is still important that there is still some form of information included that will engage with the audience and allow them to actually look through, as if the cover was too bland or not informative enough, it would leave the audience with no reason to look through the book as they have no immediate understanding as to what the product is actually about. This is a key element that I must consider when producing my magazine front cover as engaging with the audience as a very important feature as the context discussed would be greatly impacting to some who pick it up.
Page Spreads The other main feature to a magazine of course, is the inside pages, ensuring that you use the full potential of the double page spread in order to fullfill its space in a professional and suitable manner, and coveying the correct sources of information in a visually pleasing manner across the given space. A perfect example of this is the few designs featured on the right, along with the further designs featured on the next page. I personally find the execution of the designs featured are very professional and have a clear concept and continuation of a design style, with continuous colours and shapes being featured on areas of each page in order to produce some sort of theme in the booklet. The typography used throughout these pages is also very fascinating as they engage with the audience and have a clear and constructive layout, with a very professional piece of composition in order to be easy to read, as well as being in some form of understanding and chronological order. I also find that the use of random shapes in order to compliment the other features are very fascinating as they almost support the composition and layout of the pages, creating opportunity for spacing and filling in empty areas of the page, as well as creating balance across the two pages, another important element I must consider when producing my double page spreads, ensuring that there is a suitable balance across both pages, as this allows a comfortable perspective on the visual outcome through the audiences eyes, and they are not overwhelmed with pieces of information of a single page spread.
Double page spread examples.
Front cover design sketches.
Cover Designs In my first stage of development, I have developed four of my existing sketches into visual interpretations in order to gain an aspect of creavitity and succession. With these four designs, I have come to a conclusion that I will be using the fourth design presented on the far right, with what I believe to be a very simple yet highly effective design. This design represents a simple cover featuring an image of nature, this being a contrast in comparison to the idea of social networking, something that I believe to be quite impacting due to the strong juxtaposition in which it holds. I also find the sleeve that wraps around the cover to be quite a nice feature, with this including the more important, in depth pieces of information. With this choice of design I can now continue on with further development, producing I final design, using variation in images which could be used to portray this juxtaposition, as well as perhaps experimenting with different typefaces and certain colours in order to result in a professional resolution in reflection to my design.
Final Development Following my previous procedure in developing my front cover, I selected a specific choice of design which I wanted to pursuit and perhaps further explore in case their was an opportunity for further variation, producing some successful outcomes. Displayed on the right reveals the collection of designs which I produced, all following the same format as the chosen design, just with an experimentation of colour, photography and tyography. I decided to stick to the same composition and layout as I felt this was professional and suitable and did not require further adjusment, however with an opportunity to expand I decided to take out these new experiments. Following this process I did in fact come to a conclusion that not a single design appealed to me further than my existing design, this being seen as quite an uncommon outcome however in this occassion my existing design is perfect in reflection for what I am looking for. I personally find the image used suitable as it is clear and understanding in what it represents, however it is also visually pleasing, has a nice level of composition and layout, and works well in comparison with the other features on the page. I also decided to use my own typeface in which I created named enigma, as this led to further customization to the cover, as well as being a clean and legible typeface to use. Another feature which I included was a small representation of my logo, this can be seen in the bottom right hand corner area of the photograph featured on the cover.
Double Page Spread Sketches.
Booklet Following my recent design process’ I have come to a final booklet design, this featuring all of the data visuals which I have previously discussed, as well as further fragmants of information which I believe is necessary in reflection to the data represented. I have also used a variety of my own photography all featuring images of nature and forests, this being a way to create a juxtaposition between the idea of social networking, being a very technology based form of communication, oppose to this nature and free element. I personally find this this booklet is quite an effective visual response towards my project, and will be of great support in my later productions, this being a much more in depth response to my data, allowing the audience to engage and discuss the results as they would be able to have a stronger understanding due to the closer analyitical results. I also find that the overall composition and the layout throughout this booklet to be successful, having an equal balance in weight on each of the pages, exploring different forms of layout and combining text, illustration and photography on an even basis in order to have a clean and clear response. It would be of best interest to print this booklet and use it as a device in order to support my further productions in which I will feature in my project. For example, with intentions of producing an animation, limited amounts of information will be able to be conveyed and passed over to the audience, therefore this booklet will be a successful way in responding to my data in a much more in depth response, allowing the audience to take in all of the important pieces of information which I would like to covey.
A clean and clear front cover.
A forest scene is used throughout to juxtapose the idea of social networking. Inside Cover featuring the Addicted Logo, with a minimalist take on the visual.
A page Another spread simple, discussing yet visually the booklet, pleasingfeaturing page, discussing a relevant my figure data to usage. my usage.
Further charts revealing fascinating statstics about my data.
4610, the sum of minutes social networking websites were accessed during my research,
A double page spread discussing my device usage.
A visual representation of my dot data, with a discussion on the reason for this data visualisation.
Future predictions on my usage in reflection to existing data.
A comparison of my sisters usage over the 5 year gap between myself and her.
A simple back cover to comply with the cover.
App Research Displayed is an application in which I found on Behance produce by Jonathan Quintin, this being a beautiful visual response for an iPad application based on the weather. Although this app may not be of any use in reflection to my data in which I am discussing, I personally find the design to be the inspiring element, with a beautiful use of colour, layout, composition, type and compatibility in order to produce an all around successful application. When I am producing my own application these are all very important elements in which I must include, ensuring that my app has a strong level of consistancy, using a balanced level of colour and layout, as well as being compatible and easy to understand from an audiences perspective. This is one of the main features that I must pursuit in my studies, ensuring that the application is easy to navigate through, as this is what ensures the audience can access the necessary pieces of information with ease. In order to ensure that this strong level of compatibility is produced I will explore various different styles of layout and design in order to come to a visual conclusion which will allow me to understand what format works best. I will undertake a series of designs and with this I can then simply input the data which I previously collected and designed, in order to produce a visual mock up on an intended application I would hope to produce in reflection to this project.
ting e
ll
Grouped Table
Inbox
11:56 AM
AT&T
Title
Status Bar 11:56 AM
AT&T
Edit
Mailboxes
Edit
12:05 PM Jonathan Lander Let’s do dinner this weekend Hey man, long time no see. Let’s get the fams together and grill out this weeke...
Table Row Table Row
10:30 AM Saj Kahn Re: Latest Mockups I disagree. I don’t think our audience will necessarily gravitate towards what you...
GROUP LABEL
Table Row
7/20/13 Ivan Tolamachev Fwd: LAUNCH Festival I’m planning to stop by this after work. Do you want to join me?
Table Row Table Row
Víctor Fernández
7/19/13
Happy 4th!! Hope you and your family had a great time. We celebrated a bit belated, but...
Sub Row Sub Row
7/19/13 Laura Williams Re: Meeting w/Dan Anderson I can’t make it. I’ll send Sandeep in my
GROUP LABEL
Table Row
Updated Just Now 2,984 Unread
Collection AT&T
Inbox
AT&T
11:5
AT&T
11:5
Navigation Bar Back
T
Back
T
T
Action Back Action
Tool Bar Action
Ac
Compose 11:57 AM
Select Items
AT&T
Cancel
Cancel
11:57 AM
New Message
Send
Tab Bar
To: Cc/Bcc:
App Proportions
Subject:
Featured is the free iOS 7 Wireframe Kit (Ai & Graffle) by bperdue which I will be using in my design process in order to produce a set of designs which are professional and perfect in reflection to the existing proportions for iPhone applications. It is important that I do this in order to ensure that my application is to a highly professional level, creating Q can W be E R T Y U a sophisticated and clean visual outcome which used on the same market as some of the other great apps featured on the app store. The fortunate nature of this free A S D F G H J kit is that it allows me to easily access these elements with a lack of copyright risks, with this just being a simple adobe illustrator kit to import the proportional wireframes intoZmyX C V B N own designs. Add To
123
space
@
.
Featured
The Charts
Tab 1
Tab 2
Ne
T
Search Bar
S
I O P K L M return
Scope Bar Scope 1 Scope 1 Scope 1
Scope
Progress View
56 AM
Alert
Groupe
AT&T
Downloading 20 of 46
56 AM Downloading 38 of 46
r
Ta
Title
Action
Slider
Ta
Title
Close All Pages?
Title
Action
Tab 3
Keep All
Switch
Close All
Ta
Ta
Auto-Brightness
GROUP
Ta
Action
Glyphs
via Marcos Pagano • bit.ly/iosglyphs
Action Sheet
Collect
AT&T
Search
Updates
Tab 4
Tab 5
Search
e2
Ta
Auto-Brightness
ction
ear Me
Would you like to close your existing pages before turning on Private Browsing?
GROUP
Flag Mark as Unread Scope 2 Scope 2 Scope 3
Move to Junk Cancel
Logo Development Featured to the left is the development of my logo, this being featured in certain areas that have already been discussed in my project, however I have not yet discussed the actual development of my logo. The process of this design can be seen the left, with the certain aspects being decomposed in order to justify my actual reason for design. The starting element which I use in producing my logo is the idea of a loading sign, focusing on existing forms of shape and sign in order to reflect one of the common elements viewed by a social networking user. Following this, I decided to study a few different variations of ways of representing the idea of connection, using triangle shapes and dots as an idea of joining and connecting between one another. With these elements decided, I then chose two of the most successful in which I would believe to combine well together, and then centered them around a circle, this being a representation of the user themselves, being surrounded in these elements which signify social networking. Overall, I believe that this logo is impactful and successful in communication to the context in which I discuss, with the idea of social networking revolving around a the user themselves and almost being a part of them. I also took this design and applied it to an application logo, in order to give a slightly more professional response in perspective of this project. With this, I can now continue in the production of my application, with a basic element of logo design being available now to apply in the necessary areas in which I desire.
Mobile Application Sketches
Design One My first design in response to my mobile application can be seen to the left, with a basic outline of the approach in which I would take for this project, using simple and basic shapes, continuing on with this blue and grey colour scheme which I have previously applied throughout my project in order to create a sense of continuity. I personally find this design to be quite suitable in response to my project, as it does have a very basic and clear understanding to the navigational issue in the application, as well as having a professional visual interpretation to the intended solution. This individual page featured is infact the home page that I would use, being a profile page for the audience to customise and make their own, this being a way to engage and interact with the audience on a more personal level, enhancing the audiences enjoyment and interactivity with the application.
A visual interpretation to each individual page featured on the app.
Mobile Application Sketches
Design Two My second design continues the previous colour scheme in which can be seen in the previous design, however does following a different interface and layout for the audience to interact with. I personally find this design to be much more interesting and successful due to the fact the menu is used as a swiped out feature, allowing myself as the designer to have access to the full page allowing me to add more detail oppose to if the menu bar is featured at the bottom. In my own personal opinion I also have a preference towards this design due to its interesting layout and design, using a suitable choice of logos, a variety of colours and a simple yet effective layout. Also, the navigation and the interactivity with the audience seems to be quite clear and easy to understand, this being a very important feature in order to interact with an audience appropriately.
A visual interpretation to each individual page featured on the app.
Mobile Application Sketches
Design Three My third design takes on a completely new design concept, exploring different colours and a different interactive layout. Even though there are interesting qualities towards this app design, I do still personally find it to be quite poor due to the fact it lacks continuity in reflection to my previous designs, this including my booklet and my data visuals. Even though it is easy to change colours, I also find the the general layout could be viewed upon as quite poor in certain aspects, with the idea of the profile page being featured on every page, this leaving a lack of space for myself to expand my design and utilise a full screen measurement, with this restricted size being available now due to the intrusion of the profile image, even though this can be removed, I still believe that design two is most suitable and relevant to procede with as it already conforms to the suitable aspects I want it to.
A visual interpretation to each individual page featured on the app.
Final Application Sketch Development.
Application Following my sketch development, I chose to develop my application digitally in order to produce a realistic visual outcome, each design being featured on an iPhone 5c visual, this creating a further professional and realistic value. The process will take you through each page individually, discussing the features on each page and the purpose for each one, all linking back to the tab page which can be accessed on any interface. I decided to design this application specifically for iPhones only, as this is one of the most well known products globally for using mobile applications, and I would use this platform as an opportunity to gain and understanding on the success rate of the app, this then giving me the opportunity to further distance my product across further platforms. I personally believe that this application has fascinating features and the general context and meaning of the application would be quite successful in capture the target audiences attention. Also, with this being only a mock up, I will perhaps discuss the product with an application developer and see if the product can be produced physically. Another aspect to be discussed in this product is one of the main features on the profile page, where the audience will have the opportunity to interlink the application with the users social networking websites they use, and download the app on all of their other devices in order for the app to track all of their social networking usage and produce a strong and accurate data set, which I can then further analyse and through the apps configuration it will be able to predict a set of results to a high and accurate standard.
Addicted loading page when accessing the application.
The main profile page, where the audience will interlink their Social Networking Websites.
Slide out tab feature, where the audience will be able to select their desired page.
A page featuring all of the statistical features in response to their usage.
A more in depth discussion on their usage with reflection of device etc.
A page where individual dots will gather, being produced due to time accessed on websites.
A predictions page, giving the audience and accurate idea of how much they are using these websites.
A settings page where the audience may customise and secure their application.
Reflection Following my recent display of application design I do find that the overall product is successful and is professional, with a production that conforms to all of the necessary components in which I intended it to do so, with a strong sense of interactivity, a clean, clear and controlled state of navigation as well as a strong reflection in design and style for the app. I personally find that through the smaller, move intrecate features found within the design are what allow this to be so professional and such a successful product, with features such as the ‘settings’ page being available, a feature that will be commonly used on mobile applications. I found it important to add these features as these are what would allow my application to be professional, howeve also they give the audience that further sense of security as well as customisation through their ability to personalise the app, using a colour scheme option, as well as adding their own profile image and caption, almost in a similar manner to existing social networking applications such as twitter. I also believe that my previous decisions in my data visuals in my project have worked successfully in response to my application, with the visuals fitting well to each page, and working well in response to colour scheme and the layout of the application. I also find that the way I have displayed the dot data feature is interesting as it gives a simple taster to an ongoing data collection, giving the audience a basic understanding as to how this feature within the application will develop and would work.
Addicted App printing advertisement campaign.
Animation Research
Flat Design
iOS 7 Apple is one of todays most rapidly growing companies, with a very strong design team behind them they are renoundly known for producing some of the most visually pleasing, interactive mobile interfaces that is available. Recently, the new iOS 7 software update was released, with a brand new interface being featured. I personally find that the style of design itself is very fascinating in reflection to the style of work I would like to convey in my animation. Even though this may be confused with application research, I am in fact focusing strictly on the visual aspect in response to the app, with the ‘flat design style’ which is featured throughout. Not only do Apple use their interface as an opportunity to produce beautiful visual outcomes, but they also use the actual product itself, such as the new iPhone 5c which can be seen to the right, having a minimalist and simple approach, with a very clean and a beautiful visual response.
A video discussing the journey of life through the use of jelly beans
Inspirational to myself through journey, music and speech in order to produce impact.
Animation storyboard sketches.
Animation Tests With the hopes for producing an animation, it was important that I increased my knowledge based on suitable software in order to produce a professional animation. I started by exploring Adobe After Effects, this being the software that I chose to use in order to develop my animation. I started off by taking simple procedures in order to understand small areas of the software which could support me further in my works. To the left is a small diary of my works and progress of my animation practice, focusing on small effects such as wipe effects, animating in and out of the screen and experimenting with the different ways of animating type. I found this a very fascinating process and through doing these small experiments, I was then able to quickly gather an understanding on how to use After Effects. I also have previously used this website during University studies, with a tutorial lesson being attended each week which allowed me to further my undestanding and give me a basis on how to approach the animation process. Overall, I found this process quite enjoyable, exploring a new method of design, something which is quite commonly used across the media and advertising industry, becoming more and more popular each and every day. The following pages will analyse and reflect on my process for producing my animation, screenshotting the process which I took out for producing my final animation.
Animation Process Displayed to the right hand side and on the ongoing pages is the process in which I took out in order to produce my animation. The screenshots were taking in order to reflect the individual steps that were taken out in order to produce the animation, with a tedious and over whelming amount of layers, shapes, sound files and external files in order to complete this animation. I did find that the process was overall quite an enjoyable process and was in fact pleasing to see a visual response with some form of movement and functionality to it, oppose to a static image. I did find it difficult to stay on top of the heavy duty files, however when finding out the ‘group’ feature it made the process much quicker and easier to handle. Once I had produced the animation, I found it was lacking personality without sound, so I revisited the animation and added simple swoosh, wipe and whistle effects in order to create a sense of character in the movements, as well as making the piece much more interesting and interactive with the audience. I also included a music file of just a simple whistling sound, as this allowed a sense of rhythm and a relaxed journey throughout the viewing of the animation.
Final Animation