Date post: | 13-Apr-2017 |
Category: |
Design |
Upload: | konner-howell |
View: | 70 times |
Download: | 1 times |
SUSHIGO!
Sushi Go! Game DesignKonner Howell
Introduction
The purpose of this project is to take an existing card or board game and create a mobile version of it. I chose to make an iPad version of Sushi Go!, a four-player pick and pass card game with adorable artwork. All characters and cards used in these images do not belong to me, they belong to the creators and owners of the handheld game.
Contents:
2 Competitive Research3 Flowcharts6 Sketches8 Wireframes12 Final Design
Sushi Go! Game DesignKonner Howell
Competitive Research Hearthstone
One of the most useful pieces of information I got from looking at this game was the relationship between the size of the cards and the size of the interface. The cards in your hand are extremely important to gameplay but they take up a very small part of the screen.
Subtle shadows add a slight touch of 3-D to make the game board a little bit more dynamic.
Sushi Go! Game DesignKonner Howell
Flowcharts Turn Flow
Sushi Go! Game DesignKonner Howell
Flowcharts Menu Flow
Sushi Go! Game DesignKonner Howell
Flowcharts App Flow
Menu
LoginPlay How to Play Options
Online Solo Tutorial
Add Friends
Round 1 Begins
Player selectsa card.
Player con�rms ordeclines selectedcard.
Selected card is placedface-down. Player waitsfor other players to selecttheir card.
All face-down cardsare revealed. Immediatepoints are scored.
Played cards are addedto the respective players’collections.
Hands are automaticallypassed to each player’sleft.
Repeat steps until allcards are played.
End of round 1. All pointscollected so far are totalledand current places are shown.
Round 2 begins, plays the same as round
1. After round 3, the game is over and �nal places
are shown.
Play Again Rematch Menu
Sushi Go! Game DesignKonner Howell
Sketches
Sushi Go! Game DesignKonner Howell
Sketches
Sushi Go! Game DesignKonner Howell
Wireframes
SUSHIGO!
PLAY
HOW TO PLAY
OPTIONS
IMAGE
LOGIN
Menu
The user logs in through Facebook or Game center. If the user is already logged in, this would show their profile picture and name or username.
Sushi Go! Game DesignKonner Howell
Wireframes Menu > Play
PLAY
ONLINE
SOLO
TUTORIAL
IMAGE
Back button, takes the user back to the previous page.
Sushi Go! Game DesignKonner Howell
Wireframes Menu > Play > Online
Search bar allows the user to search through their friends list for specific people.
ADD FRIENDS
SUSHI GO!
IMAGE
SEARCH
PROFILEPICTURE
PROFILEPICTURE
Profile pictures of the users who have joined the party appear here.
Friends who have been invited appear above the dark line.
Friends who have not been invited yet appear in order of importance and then alphabetically.
Begins the game or starts the play queue.
Sushi Go! Game DesignKonner Howell
Wireframes Menu > Play > Online > Sushi Go!
ADD FRIENDS
SUSHI GO!
IMAGE
SEARCH
PROFILEPICTURE
PROFILEPICTURE
Display from last screen is overlayed by a 75% opacity grey screen.
Shows a fun fact or gameplay tip that changes each time you search for a match.
This screen shows when a user starts a game but not does not have enough users in their party for a complete game.
ADD FRIENDS
SUSHI GO!
IMAGE
SEARCH
PROFILEPICTURE
PROFILEPICTURE
SEARCHING FORA MATCH...
TIP:
Sushi Go! Game DesignKonner Howell
Final Design Menu
SUSHIGO!
PLAYPLAY
PLAYHOW TO PLAY
PLAYOPTIONS
LOGIN
Purple used to represent title text and words or buttons that are not interactive.
Titles and buttons in blue are interactive.
Sushi Go! Game DesignKonner Howell
Final Design Menu > Play
PLAYTUTORIAL
PLAYSOLO
PLAYPLAY
PLAYONLINE
PLAYADD FRIENDS
PLAYSUSHI GO!
Jordan Howell
Taylor Howell
Randy Howell
Nancy Howell
Charlotte Monthye
Emily Riley
Users that have joined your party appear here.
Search bar searches the user’s entire friend list. Invited players are listed above the brown line.
Checkmarks indicate accepted invites. 3 dots indicates an invite is still pending. Blue squares with plus marks allow the user to invite other players.
Pressing Sushi Go! begins the match or the queue for a match.
Sushi Go! Game DesignKonner Howell
Final Design Menu > Play > Online
Sushi Go! Game DesignKonner Howell
Final Design Menu > Play > Online > Sushi Go!
PLAYADD FRIENDS
PLAYSUSHI GO!
Jordan Howell
Taylor Howell
Randy Howell
Nancy Howell
Charlotte Monthye
Emily Riley
SEARCHING FORA MATCH...
TIP: Keep track of how many puddings your opponents are collecting. You don’t wantto have the fewest at the end of the game!
This screen would only appear if the user did not have a complete party. Otherwise, the match would start immediately.
Different tips would appear each time the user enters the search queue.
Sushi Go! Game DesignKonner Howell
Final Design Gameplay
ROUND
1/3
SUSHI GO!
SUSHI GO!
SUSHIGO!
SUSHIGO!
SUSHI
GO! SUSHI
GO! SUSHI
GO!SUSHI
GO!
SUSHIGO!
SUSHIG
O!
SUSH
IG
O!
SUSH
IG
O!
SUSH
I
GO
!SU
SHI
GO
!SUSHI
GO!
SUSHI
GO! SUSH
IGO
!
SUSH
IG
O!
SUSH
IG
O!
SUSH
IG
O!
SUSH
I
GO
!SU
SHI
GO
!SU
SHI
GO!
SUSH
I
GO!
SUSHIGO!
:150
00
0
Opponents’ hands are shown on the other sides of the board. The active user cannot interact with them.
This is the active user’s hand.
The user’s current score.
Time remaining for this turn.
In-game settings.
Sushi Go! Game DesignKonner Howell
Final Design Gameplay
ROUND
1/3
SUSHI GO!
SUSHI GO!
SUSHIGO!
SUSHIGO!
SUSHI
GO! SUSHI
GO! SUSHI
GO!SUSHI
GO!
SUSHIGO!
SUSHIG
O!
SUSH
IG
O!
SUSH
IG
O!
SUSH
I
GO
!SU
SHI
GO
!SUSHI
GO!
SUSHI
GO! SUSH
IGO
!
SUSH
IG
O!
SUSH
IG
O!
SUSH
IG
O!
SUSH
I
GO
!SU
SHI
GO
!SU
SHI
GO!
SUSH
I
GO!
SUSHIGO!
:150
00
0
This menu would appear if this options button is tapped. It would also minimize by the tap of the same button. Tapping the green box would cause it to slight to the left to appear like the red box below and vice versa.
Sushi Go! Game DesignKonner Howell
Final Design Gameplay
ROUND
1/3
SUSHI GO!
SUSHI GO!
SUSHIGO!
SUSHIGO!
SUSHI
GO! SUSHI
GO! SUSHI
GO!SUSHI
GO!
SUSHIGO!
SUSHIG
O!
SUSH
IG
O!
SUSH
I
GO
!SU
SHI
GO
!SUSHI
GO!
SUSHI
GO! SUSH
IGO
!
SUSH
IG
O!
SUSH
IG
O!
SUSH
IG
O!
SUSH
I
GO
!SU
SHI
GO
!SU
SHI
GO!
SUSH
I
GO!
SUSHIGO!
:090
00
0
SUSH
IG
O!
When a card from the user’s hand is tapped, it slides up and appears at large. Two buttons allow the user to either confirm the card and play it face down OR to cancel and select another card.
The active user can see when anotherplayer chooses a card. Cards are placedface down in the middle as shown bythe player on the left.
Sushi Go! Game DesignKonner Howell
Final Design Gameplay
ROUND
1/3
SUSHI GO!
SUSHI GO!
SUSHIGO!
SUSHIGO! SUSHI
GO! SUSHI
GO!SUSHI
GO!
SUSHIGO!
SUSHIG
O!
SUSH
IG
O!
SUSH
I
GO
!SU
SHI
GO
!SUSHI
GO!
SUSHI
GO! SUSH
IGO
!
SUSH
IG
O!
SUSH
IG
O!
SUSH
I
GO
!SU
SHI
GO
!SU
SHI
GO!
SUSH
I
GO!
SUSHIGO!
:000
00
0
SUSHIGO!SUSHIGO!
SUSH
IG
O! SU
SHI
GO
!
In the image above, all cards are chosen and placed face down.
Sushi Go! Game DesignKonner Howell
Final Design Gameplay
ROUND
1/3
SUSHI GO!
SUSHI GO!
SUSHIGO!
SUSHIGO! SUSHI
GO! SUSHI
GO!SUSHI
GO!
SUSHIGO!
SUSHIG
O!
SUSH
IG
O!
SUSH
I
GO
!SU
SHI
GO
!SUSHI
GO!
SUSHI
GO! SUSH
IGO
!
SUSH
IG
O!
SUSH
IG
O!
SUSH
I
GO
!SU
SHI
GO
!SU
SHI
GO!
SUSH
I
GO!
SUSHIGO!
:000
00
0
+3+3+3+3
+0+0+0+0 +0+0+0+0+3+3+3+3
All cards are flipped over and immediate points are scored above the respective card. Not all cards are worth immediate points so often times users will receive 0 points on a turn.
Sushi Go! Game DesignKonner Howell
Final Design Gameplay
ROUND
1/3
SUSHIGO!
:150
33
0
SUSHI GO!
SUSHI GO!SUSHIGO!
SUSHIGO!
SUSHI
GO! SUSHI
GO! SUSHI
GO!
SUSHIGO!
SUSHI
GO
!SU
SHI
GO
!SU
SHI
GO
!SU
SHI
GO
!SU
SHI
GO
!SUSHI
GO! SUSH
IGO
!
SUSH
IG
O!
SUSH
IG
O!
SUSH
IG
O!
SUSH
I
GO
!SU
SHI
GO
!SU
SHI
GO!
Each player passes their previous hand to the left and receives the hand from the person to their right. The user then picks a card, plays it face down, revealls, and swaps hands until all of the cards have been played.
Icons appear on the board to represent the previous cards each user has played.
Sushi Go! Game DesignKonner Howell
Final Design Gameplay
END OF ROUND 11
2
3
4
2
23 2
2
2 3
15
9 3
2 2 211
3
CONTINUE
Each match consists of 3 rounds. At the end of each round, points are scored and running totals as well as cards played in the previous round are shown.
Sushi Go! Game DesignKonner Howell
Final Design Menu
FINAL SCORES1
2
3
54
32
38
Nancy Howell
Jordan Howell
Taylor Howell
4 27Konner Howell
PLAY AGAIN REMATCH Menu
Play again takes the user back to the “Play” screen. Rematch invites all users in the active user’s party to another match. Menu takes the active user back to the main menu.