Challenge Summary
Welcome to Topcoder Learn Salesforce Apex Storyboards Design Challenge. We need to design two responsive pages that will hold information and tools to compete in an educative challenge. We’re looking forward to see a simple design that follows the topcoder branding.
Best of lucks!
Round 1
For your R1 deliverables please submit the requested screens design under “Design Requirements” section.
1) Welcome
2) Learn Apex
Round 2
Final design will contain all the requested screens under “Design Requirements” section plus any updates from client feedback.
1) Welcome
2) Learn Apex
The primary goal of this challenge is to design brand new web pages that define the look and feel of two simple responsive pages that contain information about the “Learn Apex” challenge held by topcoder. This challenge allows developers to actually learn to code in Salesforce Apex by doing actual coding with tool that has a console and test environment. You will design how this tool looks and works.
Branding and Guidelines
- Provide desktop and mobile view of the screens. Specific limitations 1010px wide for desktop and 320px wide for mobile.
- Follow the provided Website PSD GUI Kit. The design needs consistency among all the features you create.
- Follow the flat design theme in the storyboard and please consider great use of white space.
- You are encouraged to create icons and quality graphics for your design to standout where you think appropriate. Keep in mind your graphics should follow the look and feel of the site.
Design Requirements
Follow the provided wireframes to design the responsive pages (mobile and desktop). Keep in mind these are just rough drafts, you’re encouraged to rethink the layout, positioning and add your own thoughts to the mockups.
1) Welcome
- Design a landing page that explains what this challenge is about and has a link to use the learning tool.
- Create a header area with topcoder logo, log in and log out buttons. Show an scenario when the user is logged in (with handle).
- Title of the page is “Learn Apex”.
- Add a “How it works” description (lorem ipsum).
- Add the Salesforce logo.
- Design some imagery representing the education tool (code, console, learning).
- Add a “Start now” button, very attractive.
- Create a footer area.
2) Learn Apex
- Re-use global header/footer from #1.
- Add a tabbed interface or step-by-step controller to navigate through the code exercises. It should be fun to use overall.
-- Each tab contains Instructions specific to the tab (e.g., “Here is what this class should do….”):
-- Add a code editor that allows to write formatted code. See the programming console here for reference (log in).
-- Each tab shows an exercise that developers can commit to be compiled and processed.
-- Each tab will have a “Save and Compile” button.
- Design a notification area to display success/failure messages. All messages from the tabs or any other part of the application should display here.
- Design a hint interface where we can provide instructions. Imagine an integrated “?” icon that a user can show/hide to see useful tips.
- Design a “Submit” button in a global position. The user will click this button once he/she finished the code and wishes to test it.
References
There are websites that work as education center for learning programming languages. Please take a look for inspiration, try them out, but DO NOT COPY ANYTHING.
- Codecademy.
- Codeschool.
Target Audience
- Potential new members and current community members.
Judging Criteria
- Originality.
- Quality of design execution.
- Consistency. Design must feel part of the branding.
Submission File
Submit JPG/PNG image files based on challenge submission requirements stated above.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD files.
Preview Image
Create one 1024x1024 JPG or PNG file in RGB color mode and place a screenshot from your submission within it.
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.