Challenge Summary
Welcome to [serenity] - New Topcoder-branded AAF Header Design Challenge. In this challenge, we would like to have a 'flavor' or a style of the AAF header that -- rather than being branded Appirio, instead displays the topcoder logo and brand. It should also add some navigational capabilities.
You are provided with wireframes, AAF storyboard and [topcoder] branding guidelines for you as guidance for branding and visual reference. Come and join us!
Round 1
For your R1 deliverables please submit the following screens:
- Desktop, Tablet and Mobile (Landscape) screen sizes for:
1) New AAF Header – Navigation Option 1
2) New AAF Header – Navigation Option 2
3) Signed Out State
- Readme.jpg: Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Final Design plus any Checkpoint feedback:
- All required screen sizes for:
1) New AAF Header – Navigation Option 1
2) New AAF Header – Navigation Option 2
3) Signed Out State
- Readme.jpg: Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Details:
The primary goal of this challenge is to update the Appirio Application Framework header and display [topcoder] logo and brand. We need you to follow the branding guidelines for [topcoder] and follow the wireframes to complete the requirements.
Supporting Documents:
- Wireframes (wireframes.zip)
- Branding Guidelines (TC-Logo-NEW-FINAL.zip)
- AAF Storyboard (AAF Storyboard.zip)
Required Screen Sizes:
- Desktop & Tablet (Landscape) page of size 1024px width and height as required.
- Tablet (Portrait) page of size 768px width and height as required.
- Mobile (Portrait) page of size 320px width and height as required.
- Mobile (Landscape) page of size 480px width and height as required.
Design Considerations:
- Your design should start from AAF header found in the storyboard attached.
- We need to replace the Appirio logo with [topcoder] logo.
- We need to design the new mega menus.
- Please keep search location in its place.
- Please keep the identity reflector, application switcher and notification area as it is.
Storyboard Requirements:
- The Topcoder brand. Should be present as a logo.
- My account menu.
1) Navigation Option 1:
- Reference: nav_option1.html
- Menu Options:
-- Challenges
-- Community
-- Education & Help
-- Blog
- Reference the wireframe for the options under each menu.
2) Navigation Option 2:
- Reference: nav_option1.html
- Menu Options:
-- Challenges
-- Community
-- Education & Help
-- Forums
-- Blog
- Reference the wireframe for the options under each menu.
3) Signed Out State
- How does design change when user it not signed in? Primary calls-to-action are 'Sign In' and 'Sign Up'
Examples of Mega Menus:
- Example 1 (we like how they are doing it for mobile, please do the same thing)
- Example 2
- Example 3
- Example 4
Target Audience:
- Stakeholders inside Appirio
Judging Criteria:
- Cleanliness of your graphics and design.
- Your design should possible to build and make sense as a desktop or mobile application.
- Quality.
- User Experience.
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 Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
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.