Creating a more consistent UI for OSRS (modern/compact style & osrs style)

Oct 8, 2020 12:57 PM

2A1R1O1N

Views

753

Likes

3

Dislikes

1

modern/compact consistent UI

accept aid button moved just for fun. Makes more sense to me to have a combat toggle on the combat menu. But what do I know.

scroll bar in skill menu was too try and see what it'd look like if OSRS had 2 or more extra skills (to the point where it wouldn't fit on one panel)

SEE END FOR MORE INFO

modern/compact consistent UI VS in-game UI

osrs-style consistent UI

osrs-style consistent UI VS in-game UI

-------------------------------------------------------------------------------------------------------------------------
I started off making this redesign because I really dislike the settings/options menu in the game. It's very cluttered and hard to find things. Buttons are used as tabs, and it all just looks confusing at first.

NOTE: I moved accept aid and run button, obviously this would be a very controversial change, I just took some liberties with it for fun.

Some other UI inconsistencies are:

-The icons on the stone tabs are often horizontally misaligned.

-Font sizes and use of bold text vary wildly throughout the UI. I didn't address this.

-Lots of UI elements differ in size based on what tab, and they are never aligned
properly. Often hugging the top or bottom of a previous UI element.

-New subtabs were introduced in the quest tab, yet they're not used in the friends tab or the settings tab. Also in the Account management tab the subtabs are slightly taller than in the quest tab. WHY.
(FEATURE REQUEST: add right click to stone tab to instantly jump to the right tab. e.g. Right click>Ignore List, instead of opening the friend list and having to click the sad face, just let me right click the stone tab)

-The styling of lists (with and without columns) is very inconsistent.
Some examples:
-Quest list has its scrollbar OUTSIDE a DARK border.
-CC list has its scrollbar INSIDE a LIGHT border. (WITH column sort header)
-Minigames list has its scrollbar INSIDE a orange border. (WITHOUT column sort
header)
-Friends list has its scrollbar INSIDE a DARK border (WITH column sort header)

-The styling of buttons (as well as their user feedback) is very inconsistent.
Some examples (brace yourself):
-Combat tab, GRAY is used for toggle buttons. When hovering, a tooltip appears
after some time. When pressed the button goes RED.
-Skills tab, GRAY is used for buttons. When hovering, a tooltip appears,
notably, a lot faster than in the combat tab. No feedback when clicked despite
being a button to open the guide, it's near impossibly to tell it's a button.
-Minigame tab, GRAY is used for buttons. When hovering, the background goes
RED. No tooltip.
-Favour tab, GRAY is used for buttons. When hovering, the foreground (text
colour) goes WHITE. When pressed, the button blinks RED.
-Equipment tab, BROWN is used for buttons. When hovering a pressed state is
shown.
-Magic tab, GRAY is used for toggle buttons. When hovering, the foreground
goes WHITE. When pressed, the button goes RED.
-Friends tab, GRAY is used for buttons, there is no feedback at all.
-Account Management tab, GRAY is used for buttons. When hovering, the
foreground goes slightly transparent? or just GRAY. No feedback when pressed.
-CC tab, BROWN is used for buttons. When hovering a pressed state is shown.
-Settings tab, GRAY is used as subtabs, as well as buttons as well as toggle
buttons. Some buttons give feedback through means of making the foreground
go white. Others give none at all.

Do you see what I'm getting at? there is a LOT of inconsistency in the UI deign.
OLDSCHOOL != BAD. These kind of things should be addressed imo, The UI is the one part of the game people look at constantly. Why has it been neglected for so long. :(

Jagex, please fix.

runescape

ui

gamedev

osrs

2007_runescape