Challenge Summary
Welcome to the Umbrella City Builder Game - Illustration Challenge 2.
This is an employee-facing game that will be viewed on desktop and mobile devices. This challenge covers designing the game piece illustrations which will live inside the previously designed desktop views. The game is a light hearted take on the classic city builder game however it becomes an analog to building a modern IT ecosystems and it will serve as a corporate IT training tool.
This is the second challenge for this project. Please review the first challenge details, on order to get a very clear undertsanding of the project scope and goals:
https://www.topcoder.com/challenge-details/30052817/?type=design
Round 1
One screen is required at checkpoint:
- Screen #1. Full City View
Notes.jpg: Please include any comments about your design for the Client.
Feel free to add additional views showing alternate states (drop select, hover states, etc).
Make sure all pages have a logical flow / Use correct file numbering (01, 02, 03)
Round 2
Four screens are required at final deadline:
- Screen #1. Full City View
- Screen #2. Neighborhood View A
- Screen #3. Neighborhood View B
- Screen #4. Individual Block Pieces
Notes.jpg: Please include any comments about your design for the Client.
Feel free to add additional views showing alternate states (drop select, hover states, etc).
Make sure all pages have a logical flow / Use correct file numbering (01, 02, 03)
Design Considerations:
The high level for the game is this:
City: user sees a view of a large city. The city consists of 8-16 neighborhoods, each of which can be individually clicked (highlight state on hover) on to view more details (click goes to neighborhood view)
--> user selects one of the 8-16 neighborhoods in the large city and clicks on it..
Neighborhood: and now sees that neighborhood. The neighborhood consists of 4 areas (blocks) , which are grouped together but each of which can be individually clicked (highlight state on hover) on to view more details (click goes to block view)
--> user selects one of the four blocks in the large city and clicks on it..
Block: and now sees the first version of the block piece (before improvement)
-- > and a related question.. he then answers a question and ..
Block improvement: if his answer is great he sees an improvement (change) to that block graphic (if not, no change)
--> user goes back to neighborhood view and..
Neighborhood improvement: user sees that one of the four blocks in the neighborhood have been improved (new graohic for this piece)
--> user goes back to city view
Included Assets:
- view of question screen
- concept sketch (for better understanding)
- PSD template for city view PNG submission
Colors Allowed:
Black, white, and (any shade of) gray, and any of these colors, listed below(including lighter or darker versions):
Purple (HEX=B1*05*9D)
Orange (HEX=FF*6D*22)
Green (HEX=00*AF*3F)
Red (HEX=D5*2B*1E)
Blue (HEX=00*A1*DE)
Dark Green (HEX=27*5E*37)
Design Size:
- All source graphics work in RBG mode at 72 dpi (OR vector graphics)
- City view must fit within the defined area of the provided PSD.
- Neighborhood view must also be able to fit inside the defined area of the provided PSD.
- Block graphics are just the individual block graphics, which make up the neighborhood view.
Required Screens:
Screen #1. Full City View
City view as seen in the provided template - all neighborhoods defined and put together as a “city” but able to be individually selected. There must be between 8 and 16 neighborhoods (no less than 8 / no more than 16).
How the city is viewed is up to you (ie from above / map style, from an angle (above and slanted) and flat / from the side are all acceptable options. Be creative!
NOTES:
- Source of this city should have each individual neighborhood as an independent group, which can be individually selected (and we show a hover state - this will be an adjustment to opacity or color or some other change, but NOT an entirely different graphic. so you do are not required to show the hover state - only to make sure the individual pieces can be selectable / individually change on hover or select ). Note that the neighborhoods here will NOT match the individual neighborhood (nor block) views.. The city view should be a city concept, where the individual neighborhoods will have much more detail.
- We are including a view that shows (roughly) what the question screen looks like (with a placeholder for the block graphic included by the question). The blue sky seen in the background here will remain. We want to make sure your designs work well with these colors / the style of this screen -- but you do NOT have to match the style of the city background (we can remove the background piece from the city view, if it looks better that wa, but the blue sky must remain.)
Screen #2. Neighborhood View A - BEFORE Improvement
Neighborhood view - with four (4) city blocks defined and put together as a “neighborhood” but able to be individually selected. These will also need to be grouped together but the individual game pieces that make up the neighborhood view MUST be detailed and look the same in both neighborhood and block views.
Please also place this view into the provided template area (same area the city view fits into).
Screen #3. Neighborhood View B - AFTER Improvement
This will be where we show improvement / change in block graphics details from “default (not improved) state” to “improved!” state. Ideas for this:
- One idea may be that the original blocks are run down and old looking in View A, but are beautiful and new looking in view B.
- One idea may be the the original blocks contain images like a small swing-set in View A and a new beautiful park (with lake /benches / playground equipment, or whatever) in View B,
It is up to you how to show “improvement” but keep in mind that in some cases the user will see a neighborhood view where some of the blocks have been improved and some have not (so - still individually changeable!)
Please also place this view into the provided template area (same area the city view fits into).
Screen #4. Individual Block Pieces - Both BEFORE and AFTER Improvement states
Please provide a single screen that shows each of the individual four (4) blocks in both default (before) and improved (after) states so we can see what the pieces look like when they are not grouped together in a neighborhood.
This screen does NOT need to go into the template but is just so we can see how the pieces look, when standing alone / not grouped together in the neighborhood view.
Target Audience:
- Work force / employees.
Judging Criteria:
- Completeness (design includes all required elements).
- Cohesiveness (how well all elements work together, seamlessly).
- Cleanliness (successfully engage users in a simple way / ease-of use).
Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Illustrator OR Adobe Photoshop - make sure its layered!
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.