Interface Design Project @milan9104933-blog - Tumblr Blog

Reflection:

I started making smaller infographic charts that would appear depending on the state that was click. The data breaks the bubble chart data further, into age groups and genders.

Reflection:

After getting the bubble chart to work I found that it was not dramatising the issues of homelessness enough. So I started exploring playing around with more data and making icons to help bring the issue forward.

Reflection:

I changed some of the background colours to help break up the site and pop certain sections out better.

#reflection

Future Application: Connecting to other organisation

An idea I had for future application is to allow small social services organisations to post images in the slideshow and use it as a platform to inform local audiences that are interested in volunteering and live in that particular area to get involved.

#futureIdeas

UI Explanation: The use of the slideshow

I wanted to showcase smaller organisations that also work with homeless and disadvantage people in Australia but in a more engaging way then just presenting a list of organisations. So I used the slideshow with images that encompass the type of area those smaller organisations cover. For example I have an image of a phone to represent counselling , and a pop-up list of organisations that provide counselling for free in some way when users hover over the image.

#smallerGroups

UI Explanations: Breaking stereotypes

The original hero image had a bearded man however after further consultation with social worker informed me that everyday people are always sometimes at risk of being homeless. So I decided to show a young man, as the largest homeless population are young males and this would discourage further stereotypes of homeless people being represented by a bearded man visual.

#visualStereotypes

UI Experiments: Animated sequence

I been playing with different visual cues to ensure the message is not lost visually. I’ve added captions and text to reinforce the idea behind the visuals incase users mis-interpret the visuals in the animated sequence.

#captionsnVisuals

UI Experiment: Call to Action section

I’ve been working with different ways of how I could make the call to action section more responsive when its pushed down to the mobile layout. Originally I was thinking it would be collapsable but since it doesn’t take up much room I’ve been using float to just make them sit on-top of one another.

#floatingBoxes

UI Experiments: Data visuals with jQuery

Since the info-graphic map contains a number of interactive elements I used some jQuery plug-ins to test a few ideas of how I could get users to access the data. Buttons seems to work well but I’m still working on how they can reveal more then one circle at a time to capture the data across each state.

#experimentingInfo-graphics

UI Experiment: Info-graphic Interactive Map

One of the most challenging aspects of the map was lining up the states and having them together when users flex the viewport. I used absolute positioning to help contain the states together. I designed the sprites carefully to put the map together effectively.

#interactiveMapDesign

UI Experiments: Info-graphic sprite design

I started experimenting with sprites to make my interactive info-graphic map more dynamic and engaging. The idea was to break up the map of Australia into its states and when users hover over a state some facts reveal itself.

#interactiveMap

UI Experiments: Sprites

Since a flat design was adopted, I created a number of sprites for the navigation bar and other elements to help add dimension to the site to engage users to hover over the images.

#spritesFlatDesign

UI Development: Parallax Scrolling

Since I started stripping back some of the visual details on the site, I re-designed the animated scenes to show the most vital visuals so the message is not lost.

#ParallaxscrollingVisuals

UI Development: Desktop Layout

Despite the change in colour scheme and visuals the site remains very similar to its original layout.

#desktop version

Trending Blogs

Recently Viewed Blogs

Interface Design Project