Archive for the ‘Design for the user’ Category

Ululu GUI Improved.

Posted: May 1, 2013 in Design for the user
Tags: , ,

I took the feedback for my Ululu GUI and made improvements to the menu adding all the options. I also tweeked the health bar to make it more subtle and added an energy bar and equipment slots.

Ululu GUI Improved screen 1

Ululu GUI Improved screen 2

Most of the menu optopns are just place holders. when you hover over an icon, text appears in the centre explaining what the option is.

Ululu GUI Improved screen 3

Ululu GUI Improved screen 4

The swf file can be found here.

Advertisements

I took the feedback for my mech GUI and made improvements to the information desplay so it shows what you have equiped and the characters face aswell as a mini map and an energy bar for the mech.

Mech GUI Improved screen 1

The swf file can be found here.

I then decided to remove the crosshair because it seemed out of place.

Mech GUI Improved screen 2

The swf file can be found here.

Rabbit Mech GUI.

Posted: May 1, 2013 in Design for the user
Tags: , ,

I started working on the mech GUI by getting setting out the basic layout.

Mech GUI screen 1

I then added an animation to indicate the players health, the swf file can be found here.

Ululu GUI

Posted: May 1, 2013 in Design for the user
Tags: , ,

I started by creating the basic layout and made the gear spin when you mouse over it.

Ululu GUI screen 1

The swf file can be found here.

I then added the start menu and my initial idea for the inventory.

Ululu GUI screen 2

Ululu GUI screen 3

The swf file can be found here.

I gathered user feedback for all of my GUI designs and then used that feedback to refine my idea. The menu had few criticisms besides the lack of a continue tab for quick continuation instead of having to go to load and select the save that you want to load every time. The other critique was to make it more self explanatory so that no one can get confused as to which option does what. Here is my end result:

Main Menu Final 1

Main Menu Final 2

Main Menu Final 3

Main Menu Final 4

Main Menu Final 5

Rabbit Heart Menu.

Posted: April 13, 2013 in Design for the user
Tags: , , ,

I Started by sketching some ideas I had for the start menu:

Menu UI sketch

One was inspired by start menu’s from RPG’s like Final Fantasy were they only have the logo and the options underneath:

430434-final-fantasy-xiii-xbox-360-screenshot-main-menu-s

My other design was inspired by the travel screen on Persona 4 that has images of different things in the location you have selected cycle through like a slide show:

2013-04-12-084456

I then created my design in Photoshop:

Menu ui1

menu ui 2

menu ui 3

menu ui4

menu ui 5

Here is a video of the slideshow in action:

Ui Designs.

Posted: March 31, 2013 in Design for the user
Tags: , , , ,

We were set a task to design a UI for ‘Rabbit Heart‘. I started by doing some quick research into ‘Rabbit heart‘.

  • Exploring the open world as Ululu (over the shoulder, third person)
  • Transposed into the Robot/Rabbit Exo-suit (first person, pilot view).
  • Involve the rucksack and its contents for the inventory.
  • You could only carry so much, and would have to swap items out and leave others behind.

ululuwithbag

I then did some quick idea sketches:

Scan0034

I then worked up these ideas in Photoshop:

UI2 test

UI test1

UI test3

UI test2

UI test4

I then worked up my designs even further by using concept art from the ‘Rabbit Heart‘ site.

UI tests1

UI tests2

UI tests3

UI tests4

I then got some more ideas and sketched them up:

UI designs

I decided to make the health bar have a change in its shape to help indicate when the players health has fallen below a certain percentage.