Interaction - Interactive Design 112

Editing Process...

Theme Testing:

I wanted to include themes into my application to make it more interesting for its users. I have discussed these themes earlier in my blog. I tried it out and decided that I didn't like it as it was way too cluttered for my liking and it just didn't feel right to me. So I won't be including such detailed themes but rather only colour themes, which will be 3 coloured combinations.

Icons:

I made my own application icons on illustrator and photoshop. I wanted to include one consistent style throughout my interface and so I made my own style. (This was probably my favourite part of the project =D)

Row 1

Home, back/forward/directional arrows, favourites, timetable (TT) and cafés/food areas.

Row 2

Customise, toilets, tracking, settings and friends.

Row 3

Pin Point Location, zoom, destination locator, stairs (going down) and drop down tab.

Row 4

Elevator Level 1, elevator level 3, typing bar.

Home icon takes you back to the main menu.
The Favourites icon shows your favourite routes and colour combinations for quick selection.
Timetable icon where you can enter in class details and locations.
Customise icon includes default colour combinations and an option to make your own.
The tracking icon is to turn on to see the path needed or to turn off so the device tracks your route.
Friends icon shows which of your friends are on campus and it will show you where they are.
Pin point location icon is to pin the icon on the campus map to indicate your starting point.

Interaction - Creative Coding 142

A Work in Progress...

The Bubbles:

+ Code so far...

My idea when starting this code off was to make the bubbles fall at different rates. I done this with the help of my friend who talked me through the process of floats and now I understand it a bit better than before. I made my idea happen and thought that I didn't want my bubbles to disappear off screen so I gave my bubbles boundaries. At this stage though the bubbles were just moving up and then down and then up and so on. Then all of a sudden it hit me that bubbles don't float down but up. So I adjusted my code so that the bubbles would come up out of the screen. I then also made my bubbles move and bounce off the side boundaries as bubbles have no real direction but up. The bubbles are still moving to fast which is a problem I still need to fix.

Interaction - Creative Coding 142

Experimentation Cont...

Rain:

While looking on the Open Processing site I came across this loop where the circles fall and pop at the bottom and more falls down from the top. I used this persons code and changed it so that the circles are bigger and come down more slowly. I want to experiment a similar thing into my code design.

Rows:

Firstly I wanted to make my circles drop and so I made a loop for more circles and then used the same code as earlier when I made the 1 circle drop. I got that working and wondered whether I could do the same but only across the screen. So adapted my code and got it to move across too.

Interaction - Creative Coding 142

Experimentation Cont...
Movement:

In class we were showed how to make a shape follow your mouse and so I tried it out myself. However it made several circles as I had not redrawn the background in void draw function.

So added in the background under the void draw function and so now only the on ellipse is following my mouse because the background is redrawn in 60 frames per second.

Interaction - Creative Coding 142

Experimentation...

Spherical:

After researching bubbles I wondered whether i could make a sphere on processing rather than a circle, as bubbles are usually spheres. So I played around and made a sphere that was able to move down the screen. But before being able to move the sphere down the screen I needed to create the code first and so I created an ellipse first to get the code right...

Once I figured out how to make the circle drop I introduced that piece of code to the sphere.

Interaction - Interactive Design 112, Part A

Themes...

Pirate Maps:

This is not as such a pirate map where "x marks the spot" but does show how the general idea of a map where ships are situated, etc...
Also the idea that when there were lots of bands of pirates ages ago there was not such a thing as a GPS nor electronics and so compasses were used to navigate both land and sea.

Pirate Maps 2.0:

This might look familiar as it is the Neverland Island map. Anyway as a pirate map it indicates where what is and also with the use of a compass for navigation. It also gives off the authentic coffee stained look which makes it look worn and torn as it must have been used many times.

To conclude my pirate theme I had the idea of using a compass instead of arrows and making it look authentic like map 2.0 as well as technical like the first map.

Underwater:

For those who prefer something more tranquil I wanted to add in a underwater theme. Just because we are above land does not mean we can also explore underwater. For this theme I want to highlight the colours that are seen underwater and use those colour for this themes colour combination. These colours will mainly be blue, purple and pink.

Underwater 2.0:

Just another idea for the underwater theme. I had the idea that different creatures and plants could represent different thing on the map to make it more enjoyable to follow.

The underwater theme could be a fun for both guys and girls as it is not gender specific.

Space Age:

For another theme I thought of space. Seeing as space is so humongous I could so much with the theme. I could use a star instead of an x and  use galaxies (clumped stars) as the path that should be followed to your destination. I could also use a little mini spaceship to indicate where you are on the map and different coloured ones to indicate where your friends are on campus.

Space Age 2.0:

I was also thinking that I could include the planets into the map as to show different things like the planet Uranus for the toilets and Saturn for cafes.

For the colour scheme for this theme I could use Yellow, Black and Dark blue.

Royalty:

The idea of royalty is prestige as shown in the image above with the intricate working of the design. Also the colours of silver and gold gives it that high quality feel to it. So for royalty as a theme the interface design would be intricate and delicate. For example the buttons linking to the next section would be banners and your destination could be a crown and to show where your are could be a diamond.

Royalty 2.0:

This pattern looks very prestige, like something you might see in some wealthy persons home. The colours of deep blue and gold suggests the idea royalty too. This would be a good pattern to have in the background of the interface, but saturated down to only be there but not to be seen.

Together these two image brings some quality to the theme choices as it is so different. The colours that I would use would be deep blue, gold and silver.

Interaction - Interactive Design 112, Part A

Wireframe & Prototype

Wireframe:

My interface is called 'X Marks the Spot'. I decided to include images as to what each main connection in my interface could look like into my wireframe.

Prototype:

This is my prototype model where I only used a few of the interface images. The first screen that you will see when opening the interface will be a log in screen as each interface is unique to its user due to certain applications that it includes (i.e. friends setting). After the loading screen you will enter into the main menu page which is 'Home'. This screen has four main applications. These are 'Destination Locator' which is how you will find your way around campus, then there is the settings which is explanatory in the name itself, then there is a customisation application that goes into my fourth prototype screen shot which include things such as 'Colour Combo's', 'Themes', 'Favourites' and a 'Store'. The lastly on the 'Home Page' there is a 'Timetable' application that allows the user to type in their course information that would later be used to enter into the third prototype screen shot into the destination box where the interface application would find that classroom/lecture theater. After that the fifth prototype screen shot will appear on screen to highlight the path and the room. Along with each screen in the prototype except the 'Home Page' and those before will have a drop down menu bar that will all have a back and forward button as well as a home button. However in the 'Destination Locator' application there will be more buttons in the menu bar on from the birds eye view map. These include a tracking (to make new routes), favourites (saved routes), customisation (leads back to original application), cafes (locates nearby or on route eating places), toilets and friends (finds those who are on campus). Thus concluding my main ideas with this interface.