Top Eleven - Be a Football Manager is an online football manager simulation developed and published by Nordeus.
TUTORIAL WELCOME SCREEN
The objective here was to create a welcome screen when you come to the game for the first time. Location is the manager's office. After seeing this illustration and reading short text bellow it, it needs to be clear that user's job is to manage a football club.
Since the image is going to be displayed on various devices, all visual elements were placed having other UI elements and various screen aspect ratios in mind.
Hierarchy of elements is of paramount importance here: whiteboard represents player's input and actions, ball represents the game itself and the trophies, pictures and certificates on the red wall are the product of these two. 6 vertical file binders? They represent 6 years of Top Eleven. Lastly, the stadium takes a huge part in the scene mainly because it's where everything happens, where all of the user's actions count. The scene was set during an evening practice to further emphasize team building which is one of the key aspects in this game.
The image is a combination of modeled 3D office set as foreground and composited pictures as background. Additionally, some textures and objects for office elements were also composited into the scene to allow easy changes if neccessary.
Simplified breakdown of compositing the artwork elements is shown below.
Simplified breakdown of compositing the artwork elements is shown below.
PLAYER PROGRESS POPUP NOTIFICATION
Popup images are used in game to notify the user something important happened. Task here would be to make an image which will show that your player (from your football team) made a progress and went up from 4 to 5 stars.
The camera is placed very low to make the player bigger. It suggests that the player has grown, bigger and stronger than before. Foot on the ball represents player's mastery of the game. Also, he is in the spotlight, brighter than anything else in the scene, putting significance to his success even more. Wide angle of the camera encompassing the stadium crowd, confetti walling down and bright, dreamy colors should suggest to user that he needs to share his player's success on social media with everybody- just like the player in the scene.
Since the graphics should work well with the team emblem (which is mainly custom made by the users), neutral colors were chosen for the player's equipment. Golden details on the ball are supporting the stars on the right, suggesting that it's all about the game.
Since this is a dynamic piece, meaning that it changes depending on player name and his team, it's broken it into editable layers. Emblem should change depending on the team. Stars have 2 states- ones that are behind and one that is in front (in case there is the need to use this piece for players reaching 2,3,4 stars...). Glow behind the last star is also a different layer if there's a need to animate it. The jersey is also a dynamic element like the emblem, changing in accordance to team's jerseys.
This artwork was created entirely of composited images. Simplified breakdown of key visual elements is shown below.
POSTER DESIGN FOR LIVE MATCH FEATURE
The objective was to create a poster that represent a new feature in Top Eleven 2015 - Live match. That is section of the game where player can see the match that is currently in progress.
Since this is a feature that is aimed at users and the game has a social character, i wanted to include a wider portion of the stadium. The point was to create a feel that this is a game for everyone, that is played all around the World. The ball is in focus here, representing that it's all about the game. Two players- Stonaldo and Gdesi are runnig towards the ball and represent two teams competing. Central part is reserved for the device with a screenshot of the actual live match feature- i wanted to make sure this is the most visible element.
I wanted to create a poster that is simple, clean and easily readable. Image compositing was used to create this artwork, and breakdown of key visual elements is shown below.
