Interface Design | Hyperlocal



Technology Used: Javascript and Jquery

This site is also a collection of people’s stories. Some are audio pieces with images and some are text stories with graphics to decorate it.


The Interface:

The main feature here is the background changes when you hover over each story. The background represents what the story is about. I think this idea would work well with my project too. I don’t like the layout that the it’s 1 – 6 are they are in a line just doesn’t seem personal enough. There is also audio when you hover over them there’s  clicky noise, kind of annoying and sounds too techy.  I do like the background idea and that would work well for an interface with a more open layout with boxes etc. So when you hover over the box a screenshot of the media inside becomes the background and the opacity is down a bit too so you can still see your options.

Screen Shot 2015-02-09 at 00.32.43 Screen Shot 2015-02-09 at 00.32.35 Screen Shot 2015-02-09 at 00.32.30

Screen Shot 2015-02-09 at 00.33.30

Screen Shot 2015-02-09 at 00.33.46 Screen Shot 2015-02-09 at 00.33.57


^^ This is a snippet of one of the stories. I really didn’t like it it. The navigation was click click click and it took a while to load. The animated cockroaches running along the screen made it bearable.

Screen Shot 2015-02-09 at 00.39.12 Screen Shot 2015-02-09 at 00.39.03 Screen Shot 2015-02-09 at 00.38.38 Screen Shot 2015-02-09 at 00.38.31


ˆAnother snippet of one of the stories. I found this one interesting because you hover over each images and it moves as you move the mouse. It is a simple idea and is very effective. Could be useful if one of my stories had a lot of photography this would be a good way to display it.


The one thing I am taking away from this interface is the background changing when you hover over a story and the photographic display.


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s