User Interface Re-design
Hi everyone not sure where I'd post but this area seems to be for 2D art as well XD
For part of a University project I'm re-designing an N64 interface to create an effective PC style interface while keeping to the theme of the original game.
The game that I have used as a base for the items/spec list is The Legend of Zelda - Ocarina of Time. The screens I will be re-designing are just the equipment, items, quest and map screens.
A simple paper prototype has already been created of the interface which highlighted several issues. These design issues were resolved before beginning work in Photoshop. The Photoshop assets will be put together and animation added in Flash, the final interface will be displayed in UDK using Scaleform.
A video will be posted shortly to explain the path through the interface in more detail and clearly explain each section.
The following images are the current screens and assets for the interface in Photoshop. Any suggestions and critique would be most appreciated
Inventory Screen:
This is a combination of the original equipment and items screens. Depending on which wooden/brown tab is selected it will be highlighted (button highlights/variations shown below). If equipment is selected then only a specific group of items would be visible.
The inner window around the green tunic icon shows that it would be currently selected and its description would appear in the box below. The arrows and items along the second line will be hidden initially as they will be under the items tab. While the top row would be under the equipment so they will be separate.
The character model is included as it would be updated when suitable equipment is selected.
Quest Screen:
This includes the main quest items and ocarina song notes and the tune you should play. The highlight around the note would only be applied to the currently selected song note. The required keys for the song would then be shown.
Map Screen:
This would simply be the map screen. The location name would change depending on the players location.
Button Variations:
These are simply the button variations that would be used to add animation in flash.
Custom Cursor:
This is the custom cursor that will be used for the interface.
For part of a University project I'm re-designing an N64 interface to create an effective PC style interface while keeping to the theme of the original game.
The game that I have used as a base for the items/spec list is The Legend of Zelda - Ocarina of Time. The screens I will be re-designing are just the equipment, items, quest and map screens.
A simple paper prototype has already been created of the interface which highlighted several issues. These design issues were resolved before beginning work in Photoshop. The Photoshop assets will be put together and animation added in Flash, the final interface will be displayed in UDK using Scaleform.
A video will be posted shortly to explain the path through the interface in more detail and clearly explain each section.
The following images are the current screens and assets for the interface in Photoshop. Any suggestions and critique would be most appreciated
Inventory Screen:
This is a combination of the original equipment and items screens. Depending on which wooden/brown tab is selected it will be highlighted (button highlights/variations shown below). If equipment is selected then only a specific group of items would be visible.
The inner window around the green tunic icon shows that it would be currently selected and its description would appear in the box below. The arrows and items along the second line will be hidden initially as they will be under the items tab. While the top row would be under the equipment so they will be separate.
The character model is included as it would be updated when suitable equipment is selected.
Quest Screen:
This includes the main quest items and ocarina song notes and the tune you should play. The highlight around the note would only be applied to the currently selected song note. The required keys for the song would then be shown.
Map Screen:
This would simply be the map screen. The location name would change depending on the players location.
Button Variations:
These are simply the button variations that would be used to add animation in flash.
Custom Cursor:
This is the custom cursor that will be used for the interface.
Replies
I talk industry minimum standard now
Scrolls and paper need a remake, check some references and paint them instead using layer styles.
Remove the bevel and emboss on your frames alltogether.
Dont try mixing minimalistic WEB2.0 styles with the pseudo-realistic leather etc parts. Forget gradients unless you really know what youre doing. Make them REALLY subtle so theyre nearly not visible at all.
choose better fonts, do not emboss into the buttons
Dont make the hover get a border hiding the depth of the button, make it inside.
Give them a proper decent drop shadow
The Triforce Hexagon looks decent, but the rest needs lots of work
Your layout needs lots of work too :P
Apologies for not posting a walk through video yet. I've been busy re-designing the interface.
The design has been changed to create a UI more suitable for the games genre that fits in with the world, instead of just something that would appear over the screen. Feedback and suggestions would be much appreciated
The custom Photoshop brushes that were used can be found here on Obsidian Dawn:
http://www.obsidiandawn.com/vector-foliage-photoshop-gimp-brushes
http://www.obsidiandawn.com/foliage-swirls-photoshop-gimp-brushes
http://www.obsidiandawn.com/water-stains-photoshop-gimp-brushes