SlideShare a Scribd company logo
Differences in User Interface - Super Mario Bros vs. Super Mario World

Coin Indicator
This element of the UI displays the amount of coins the
player has. This is important to the player as the
amount of coins the player has can be a measurement
of how well they are doing. The coin icon is a simple,
brown hexagon, along with the coin counter.
Character Indicator
This element of the UI displays what
character is currently being used. The simple,
white, low resolution font is used mainly
because of the year in which the game was
created. Back in 1985, the TVʼs these games
were played had low pixel dimensions and the
consoles were not capable of displaying high
definition, detailed textures like todayʼs
consoles, so textures and fonts were simple.

Level Indicator
This element of the UI displays what level/
world the player is in. This helps the player
keep track of what level they are currently
on and how many level they have
completed or have left to complete. The font
style is the same as the other elements of
the UI.

Time Indicator
This element of the UI displays the time the
player has spent in this level. It can be
important for players who want to beat their
personal best times. The same font style is
used throughout the UI.

Score Indicator
This element of the UI displays what score the
player currently has. It is used by the player to
keep track of how many points they have,
which can be useful if the player is trying to
beat their personal best score or if they are
competing with another player on multiplayer.
The font style is the same as the other
elements of the UI.

Positioning
All of the UI elements are located along the top of the
screen, out of the way and easily seen with the blue
backdrop behind it.
Differences in User Interface - Super Mario Bros vs. Super Mario World

Coin Counter
This element of the UI displays the amount
of coins a player has. This element is vastly
different from the 1985 Super Mario Bros.
The coin counter has itʼs own style from the
other elements of the UI, gold/yellow font fits
well with the coin icon next to it. The size is
large enough for the player to quickly glance
to see how many coins they have. The font
matches with the time indicator and the
score counter.

Player Indicator
This element of the UI displays the characters currently
playing. This element is a lot different from the 1985 Super
Mario Bros (SMB). In SMB, the character is displayed by
the name, however in Super Mario Worlds (SMW) the
characters are displayed by an icon of their face.

Time Indicator
This element of the UI displays the time
spent on the level. It is different from the
1985 SMB as the counter sits next to a clock
icon in SMW and is a grey colour now. The
font matches the coin counter and the score
counter.
Score Counter
The score counter displays the playerʼs
current score. It is located under the time
indicator in the same colour and font.

Star Counter
The star counter displays how many stars
the player currently has. The dotted outline
of the star represent the stars left to find.
There were no stars in the 1985 SMB so
there is nothing to compare, however if there
was a star counter in SMB, it would most
probably fit the same style as the other
element of the UI as they all look the same.

Positioning
The positioning has changed, All the UI elements are now aligned in the top
corners of the screen, not at the top. This is due to the with the fact that in the
1985 SMB, the top of the screen would always stay blue due to the Y axis
being fixed, meaning the white coloured UI elements will always be seen,
however in SMW, the game is 3 dimensional, meaning the X, Y and Z axises
are always changing and so lining all the elements at the top of the screen
could cause some of the screen to be obstructed. For example, if all of the
elements were lined up the top in the screenshot above, princess peachʼs face
would be covered, obstructing the important parts of the game.

Graphical Styles
All of the UI elements in the 1985 SMB were identical in graphical style, they
were all white and used the same font. However, in SMW, each element has a
unique style to differentiate from one another. This helps make glancing at
certain parts of the UI easier to understand, meaning if I wanted to check how
many coins I had, I would look over and clearly see what element indicates
how many coins I have due to the graphical style.

More Related Content

Similar to Smb vs smw

1 c – graphic designs (1)
1 c – graphic designs (1)1 c – graphic designs (1)
1 c – graphic designs (1)
Haseeb Patel
 
Warhammer Online UI
Warhammer Online UIWarhammer Online UI
Warhammer Online UI
Albert Holaso
 
3. research
3. research3. research
3. research
Leah Ellis
 
User interface Mario
User interface MarioUser interface Mario
User interface MarioJosh Matthews
 
Chapter 08 GAME 100
Chapter 08 GAME 100Chapter 08 GAME 100
Social game UX test ( with Gameloft)
Social game UX test ( with Gameloft)Social game UX test ( with Gameloft)
Social game UX test ( with Gameloft)XiaoyeLainLin
 
User Experience 4: Usable User Interface
User Experience 4: Usable User InterfaceUser Experience 4: Usable User Interface
User Experience 4: Usable User Interface
Marc Miquel
 
Task 4 of gears of war
Task 4 of gears of warTask 4 of gears of war
Task 4 of gears of warelliottickle
 
Task 4 of gears of war
Task 4 of gears of warTask 4 of gears of war
Task 4 of gears of warelliottickle
 
4. Pre Production
4. Pre Production4. Pre Production
4. Pre Production
RebeccaEdwards79
 
Video Game Research
Video Game ResearchVideo Game Research
Video Game Research
JayWood13
 
Mdc2010 Casual Game Dev
Mdc2010 Casual Game DevMdc2010 Casual Game Dev
Mdc2010 Casual Game Devmomobangalore
 
3. research
3. research3. research
3. research
HarryAllinson2
 
Task 4 of gears of war
Task 4 of gears of warTask 4 of gears of war
Task 4 of gears of warelliottickle
 
Games design notes
Games design notesGames design notes
Games design notesamme77
 
When Games Go Small
When Games Go SmallWhen Games Go Small
When Games Go Small
Sharon Boller
 
3. research
3. research3. research
3. research
Tommy Lister
 

Similar to Smb vs smw (20)

1 c – graphic designs (1)
1 c – graphic designs (1)1 c – graphic designs (1)
1 c – graphic designs (1)
 
Warhammer Online UI
Warhammer Online UIWarhammer Online UI
Warhammer Online UI
 
3. research
3. research3. research
3. research
 
User interface Mario
User interface MarioUser interface Mario
User interface Mario
 
Chapter 08 GAME 100
Chapter 08 GAME 100Chapter 08 GAME 100
Chapter 08 GAME 100
 
Social game UX test ( with Gameloft)
Social game UX test ( with Gameloft)Social game UX test ( with Gameloft)
Social game UX test ( with Gameloft)
 
User Experience 4: Usable User Interface
User Experience 4: Usable User InterfaceUser Experience 4: Usable User Interface
User Experience 4: Usable User Interface
 
Task 4 of gears of war
Task 4 of gears of warTask 4 of gears of war
Task 4 of gears of war
 
Task 4 of gears of war
Task 4 of gears of warTask 4 of gears of war
Task 4 of gears of war
 
4. Pre Production
4. Pre Production4. Pre Production
4. Pre Production
 
1. case study
1. case study1. case study
1. case study
 
Video Game Research
Video Game ResearchVideo Game Research
Video Game Research
 
Mdc2010 Casual Game Dev
Mdc2010 Casual Game DevMdc2010 Casual Game Dev
Mdc2010 Casual Game Dev
 
Mario UI
Mario UIMario UI
Mario UI
 
3. research
3. research3. research
3. research
 
Game keynote
Game keynoteGame keynote
Game keynote
 
Task 4 of gears of war
Task 4 of gears of warTask 4 of gears of war
Task 4 of gears of war
 
Games design notes
Games design notesGames design notes
Games design notes
 
When Games Go Small
When Games Go SmallWhen Games Go Small
When Games Go Small
 
3. research
3. research3. research
3. research
 

More from Ryan Worcester

111 physicsdynamics research
111 physicsdynamics research111 physicsdynamics research
111 physicsdynamics researchRyan Worcester
 
Marketing keynote finished
Marketing keynote finishedMarketing keynote finished
Marketing keynote finishedRyan Worcester
 
Graphic design evaluation
Graphic design evaluationGraphic design evaluation
Graphic design evaluationRyan Worcester
 
Target audience profile
Target audience profileTarget audience profile
Target audience profileRyan Worcester
 
Comic panels transitions
Comic panels transitionsComic panels transitions
Comic panels transitionsRyan Worcester
 
Mag ownership and distribution
Mag ownership and distributionMag ownership and distribution
Mag ownership and distributionRyan Worcester
 
Total film page furniture
Total film page furnitureTotal film page furniture
Total film page furnitureRyan Worcester
 
History of film magazines
History of film magazinesHistory of film magazines
History of film magazinesRyan Worcester
 
Draft designs feedback
Draft designs feedbackDraft designs feedback
Draft designs feedbackRyan Worcester
 

More from Ryan Worcester (20)

Graphic design
Graphic designGraphic design
Graphic design
 
111 physicsdynamics research
111 physicsdynamics research111 physicsdynamics research
111 physicsdynamics research
 
Graphic design
Graphic designGraphic design
Graphic design
 
Marketing keynote finished
Marketing keynote finishedMarketing keynote finished
Marketing keynote finished
 
Animation evaluation
Animation evaluationAnimation evaluation
Animation evaluation
 
Graphic design evaluation
Graphic design evaluationGraphic design evaluation
Graphic design evaluation
 
Target audience profile
Target audience profileTarget audience profile
Target audience profile
 
Monty info
Monty infoMonty info
Monty info
 
Comic panels transitions
Comic panels transitionsComic panels transitions
Comic panels transitions
 
Mag ownership and distribution
Mag ownership and distributionMag ownership and distribution
Mag ownership and distribution
 
Total film page furniture
Total film page furnitureTotal film page furniture
Total film page furniture
 
Lwl page furniture
Lwl page furnitureLwl page furniture
Lwl page furniture
 
Total film flat plan
Total film flat planTotal film flat plan
Total film flat plan
 
Shame issue flat plan
Shame issue flat planShame issue flat plan
Shame issue flat plan
 
Page furniture
Page furniturePage furniture
Page furniture
 
History of film magazines
History of film magazinesHistory of film magazines
History of film magazines
 
Draft designs feedback
Draft designs feedbackDraft designs feedback
Draft designs feedback
 
Focus
FocusFocus
Focus
 
Composition
CompositionComposition
Composition
 
Lighting
LightingLighting
Lighting
 

Smb vs smw

  • 1. Differences in User Interface - Super Mario Bros vs. Super Mario World Coin Indicator This element of the UI displays the amount of coins the player has. This is important to the player as the amount of coins the player has can be a measurement of how well they are doing. The coin icon is a simple, brown hexagon, along with the coin counter. Character Indicator This element of the UI displays what character is currently being used. The simple, white, low resolution font is used mainly because of the year in which the game was created. Back in 1985, the TVʼs these games were played had low pixel dimensions and the consoles were not capable of displaying high definition, detailed textures like todayʼs consoles, so textures and fonts were simple. Level Indicator This element of the UI displays what level/ world the player is in. This helps the player keep track of what level they are currently on and how many level they have completed or have left to complete. The font style is the same as the other elements of the UI. Time Indicator This element of the UI displays the time the player has spent in this level. It can be important for players who want to beat their personal best times. The same font style is used throughout the UI. Score Indicator This element of the UI displays what score the player currently has. It is used by the player to keep track of how many points they have, which can be useful if the player is trying to beat their personal best score or if they are competing with another player on multiplayer. The font style is the same as the other elements of the UI. Positioning All of the UI elements are located along the top of the screen, out of the way and easily seen with the blue backdrop behind it.
  • 2. Differences in User Interface - Super Mario Bros vs. Super Mario World Coin Counter This element of the UI displays the amount of coins a player has. This element is vastly different from the 1985 Super Mario Bros. The coin counter has itʼs own style from the other elements of the UI, gold/yellow font fits well with the coin icon next to it. The size is large enough for the player to quickly glance to see how many coins they have. The font matches with the time indicator and the score counter. Player Indicator This element of the UI displays the characters currently playing. This element is a lot different from the 1985 Super Mario Bros (SMB). In SMB, the character is displayed by the name, however in Super Mario Worlds (SMW) the characters are displayed by an icon of their face. Time Indicator This element of the UI displays the time spent on the level. It is different from the 1985 SMB as the counter sits next to a clock icon in SMW and is a grey colour now. The font matches the coin counter and the score counter. Score Counter The score counter displays the playerʼs current score. It is located under the time indicator in the same colour and font. Star Counter The star counter displays how many stars the player currently has. The dotted outline of the star represent the stars left to find. There were no stars in the 1985 SMB so there is nothing to compare, however if there was a star counter in SMB, it would most probably fit the same style as the other element of the UI as they all look the same. Positioning The positioning has changed, All the UI elements are now aligned in the top corners of the screen, not at the top. This is due to the with the fact that in the 1985 SMB, the top of the screen would always stay blue due to the Y axis being fixed, meaning the white coloured UI elements will always be seen, however in SMW, the game is 3 dimensional, meaning the X, Y and Z axises are always changing and so lining all the elements at the top of the screen could cause some of the screen to be obstructed. For example, if all of the elements were lined up the top in the screenshot above, princess peachʼs face would be covered, obstructing the important parts of the game. Graphical Styles All of the UI elements in the 1985 SMB were identical in graphical style, they were all white and used the same font. However, in SMW, each element has a unique style to differentiate from one another. This helps make glancing at certain parts of the UI easier to understand, meaning if I wanted to check how many coins I had, I would look over and clearly see what element indicates how many coins I have due to the graphical style.