Challenge Summary
Welcome to Anemoi - Additional UI Elements F2F Design Challenge!
This challenge goal is to design additional UI elements and components that are missing from the current designs that we want to include in the CSS library.
Note: Your designs must be consistent with the style and guidelines of the existing screen designs.
IMPORTANT NOTE:
We found out that members from certain countries are restricted from working on this challenge, due to the client’s company policies. Challenge submissions cannot be accepted from members registered in a country with a score of 37 or less according to Transparency International's Corruption Perception Index 2015.
If your country is highlighted in red in the following sheet your submission WILL NOT be accepted, unfortunately. This is NOT a new Topcoder policy or something that will become a normal part of future challenges. This is an isolated policy and requirement for this specific client and their challenges. Thank you for your understanding.
https://drive.google.com/file/d/0B9lpcmurgZ35WlkyWUV2OW9IRjQ/view
Challenge Description:
The goal of this challenge is to design additional UI elements and components that are missing from the current designs that we want to include in the CSS library.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Design Considerations:
- Please use the existing styling found in the existing screen designs
- The designs colors need to be easily editable via css. For Example: All CTAs should have the same colors, etc. Think about easy updatability when designing.
- It will be best to keep a clean neutral color scheme to allow for future branding updates and changes.
- We need to make sure there is good contrast between font colors on their background. This is for accessibility reasons. A 20% difference in contrast is a good rule to follow.
Screen Size Requirements:
Desktop Responsive:
-- Small Desktop: 1280px wide (Height can expand)
-- Large Desktop: 2560px wide (Height can expand) This larger size may affect some component designs like Tables and Pagination. If 2 versions (responsive) of any components are needed, please show that in your designs.
UI Elements Requirements:
- Forms:
-- Radio Buttons.
-- Check Boxes.
-- Text Area.
-- Multiple Select.
- Buttons:
-- On <a>, <button> and <input>.
-- Options for colour and size, disabled etc.
-- Various states: Active, hover, current, visited, etc.
- Pagination controls:
-- Page numbers
-- How to deal with lots of pages (skip numbers, show first 5 page numbers then last page, etc.)
-- Show all
-- User controlled how many results are shown (10, 20, all, etc.)
-- Any additional functionality that would be useful to the user
- Tables:
-- Hover behavior.
-- Striped rows
-- Contextual rows (e.g. bootstrap has active ,success ,info, warning, and danger)
-- Sorting
-- Any additional functionality that would be useful to the user
NOTE: The new components don’t need to fit into/ be designed into the current designs. The new components can just be as a standalone document, white background, etc. Just organized the components on the screen like a style guide with labels, notes, options, etc.
Additional Input and Resources:
Existing screen designs
- The main source of input for this challenge
- Use this as your guide for functionality, features, UX, and UI
- Your new components should MATCH the existing designs, colors, and UI that's already been established
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
- Keep your designs open, modern and clean
- Make sure you are colors and styles in a way that allows for each updates in the future via CSS styles. For example: all CTAs should use the same color.
- Use the wireframes as your base structure for features, functionality, UX and user flows.
- DO NOT show us a colored in version of wireframes. We want to see high-fidelity, thoughtful UI designs.
Target Audience:
Anemoi employees who are going to manage components and are familiar with the data and information
Judging Criteria:
- Overall User Experience and UI design
- Completeness and accuracy of the designs as defined in the attached requirements.
- How well your designs provide a consistent user flow and style
- How well your designs captures all the requirements.
- Any suggestions, interactions and user flows you recommend (provide any notes or comments for the client)
- Wow factor! We want to be impressed with the overall design and execution.
- Innovative ideas and ways to interact and handle the content. This could be via functionality and/ or UI elements.
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. See more information about Final Fixes
This challenge goal is to design additional UI elements and components that are missing from the current designs that we want to include in the CSS library.
Note: Your designs must be consistent with the style and guidelines of the existing screen designs.
IMPORTANT NOTE:
We found out that members from certain countries are restricted from working on this challenge, due to the client’s company policies. Challenge submissions cannot be accepted from members registered in a country with a score of 37 or less according to Transparency International's Corruption Perception Index 2015.
If your country is highlighted in red in the following sheet your submission WILL NOT be accepted, unfortunately. This is NOT a new Topcoder policy or something that will become a normal part of future challenges. This is an isolated policy and requirement for this specific client and their challenges. Thank you for your understanding.
https://drive.google.com/file/d/0B9lpcmurgZ35WlkyWUV2OW9IRjQ/view
Challenge Description:
The goal of this challenge is to design additional UI elements and components that are missing from the current designs that we want to include in the CSS library.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Design Considerations:
- Please use the existing styling found in the existing screen designs
- The designs colors need to be easily editable via css. For Example: All CTAs should have the same colors, etc. Think about easy updatability when designing.
- It will be best to keep a clean neutral color scheme to allow for future branding updates and changes.
- We need to make sure there is good contrast between font colors on their background. This is for accessibility reasons. A 20% difference in contrast is a good rule to follow.
Screen Size Requirements:
Desktop Responsive:
-- Small Desktop: 1280px wide (Height can expand)
-- Large Desktop: 2560px wide (Height can expand) This larger size may affect some component designs like Tables and Pagination. If 2 versions (responsive) of any components are needed, please show that in your designs.
UI Elements Requirements:
- Forms:
-- Radio Buttons.
-- Check Boxes.
-- Text Area.
-- Multiple Select.
- Buttons:
-- On <a>, <button> and <input>.
-- Options for colour and size, disabled etc.
-- Various states: Active, hover, current, visited, etc.
- Pagination controls:
-- Page numbers
-- How to deal with lots of pages (skip numbers, show first 5 page numbers then last page, etc.)
-- Show all
-- User controlled how many results are shown (10, 20, all, etc.)
-- Any additional functionality that would be useful to the user
- Tables:
-- Hover behavior.
-- Striped rows
-- Contextual rows (e.g. bootstrap has active ,success ,info, warning, and danger)
-- Sorting
-- Any additional functionality that would be useful to the user
NOTE: The new components don’t need to fit into/ be designed into the current designs. The new components can just be as a standalone document, white background, etc. Just organized the components on the screen like a style guide with labels, notes, options, etc.
Additional Input and Resources:
Existing screen designs
- The main source of input for this challenge
- Use this as your guide for functionality, features, UX, and UI
- Your new components should MATCH the existing designs, colors, and UI that's already been established
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
- Keep your designs open, modern and clean
- Make sure you are colors and styles in a way that allows for each updates in the future via CSS styles. For example: all CTAs should use the same color.
- Use the wireframes as your base structure for features, functionality, UX and user flows.
- DO NOT show us a colored in version of wireframes. We want to see high-fidelity, thoughtful UI designs.
Target Audience:
Anemoi employees who are going to manage components and are familiar with the data and information
Judging Criteria:
- Overall User Experience and UI design
- Completeness and accuracy of the designs as defined in the attached requirements.
- How well your designs provide a consistent user flow and style
- How well your designs captures all the requirements.
- Any suggestions, interactions and user flows you recommend (provide any notes or comments for the client)
- Wow factor! We want to be impressed with the overall design and execution.
- Innovative ideas and ways to interact and handle the content. This could be via functionality and/ or UI elements.
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. See more information about Final Fixes
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.