Week 3 Infographic: Concept and Prototyping

Final Topic: Social Media vs Australian Society (Based on the information from ‘Sensis Social Media Report May 2015’

I went with this topic in the end because all the data was in one place and worked well in terms of comparing social media and Australian society, how this form om communication has been affecting our lives.

14102121_1078416315578348_1852230116_n

 

I have thoroughly planned my layout and transitions:

layout and transition sketchs

Looking at mainly using transitions of screens sliding to give the idea you are still looking at the same environment as well as zooming in and out so it appears that the audience have been looking through computer or phone screens.

Colour Palette (2 colours)

Blue

neon_light_blue_color_palette_by_oceanisuna-d7yczhn

The reason I chose blue as a colour is because most images I have looked at based on technology have used the colour blue as a recurring theme so I decided to stick with this. Also blue will work well in terms of background images due to some of them being set in an outside environment.

 

Yellow

c48358c77fc5781038955dc18c7d7406

The reason I chose yellow was to represent the natural side of social media which of cause is the people in Australian society who use social media.

 

Font

agencyfont

This type portrays a technology atmosphere due to the geometric based shapes. It’s also thin and easy to read making it well suited with the infographic topic and legibility.

 

Practicing with Atomic and Invision

Atomic

Pros

  • Transition actions give you a variety of actions (ie. zoom in or out, slide up & down and side to side) without out too much image pixel problems.
  • Easy to navigate
  • Having layers allows for images, titles and text transition into view at different times and in various ways

Cons

  • Had trouble with hover option in transitions. When the mouse hovered over the button it would go to the next page but would not return to the original page when the mouse hovers off the button
  • In some transition cases I would have to have all the different layers in the next page placed on the outside of the current ‘stage’ causing a large list of layers which may get confusing later in the project.
  • If transition is zooming out from looking into a computer screen the vector figures would have to be enlarged and saved as large images in order to reduce image pixelization.
  • Working on the UNI computers with this program works well however both my UNI computer and home computer come up with a ‘Sorry there has been a problem please refresh’ every 10-20 minutes causing loss of some of my progress when I would refresh. However I my brothers computer works well with the program but he uses the laptop quite often.
  • Can only get a 30 day free trial

(Images shown in prototyping were quickly mocked up for the purpose of practicing with the different programs)

atomic screenshot1

atomic screenshot2

 

Invision

Pros

  • Free to sign up
  • Hover option is easier to work with
  • Drop option allows for easy importing of pages
  • Ability to change device perspectives ie. from computer to tablet to phone.

Cons

  • Not as flexible with transition animations
  • Very simple transitions
  • Prefer Atomic’s way of editing layout

invision screenshot1

 

In all honesty I spent more time in atomic than in invision when practicing with these two programs. I’ve decided to use Atomic over Invision because of its ability of flexible transitioning which is a key component of my infographic as it is apart of reflecting the theme.

With taking into consideration the way both programs work despite what my choice will be I had to make a few changes in my layout and transitioning:

14111980_1078324352254211_39994744_n

The main reasons for making changes is due to either the difficulty of the original transition or the fact that the original transition doesn’t flow thematically well to the next page.

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s