Challenge Summary
Welcome to "GUARD - SDK Tool Kit Creation And Web Showcase Design Challenge". We need to create a set of Mobile Tool Kit Design Elements that having GUARD branding guidelines added to the design so our developer can use it in any mobile development process in our company.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
- GUI TOOL KIT (Created in PSD/AI/Sketch/XD)
- Web Showcase: Show the Tool Kit using web design so our developer can easily check each Tool kit. It needs to explain how to properly use buttons, forms, styles, icons, fonts, etc.
1. GUI TOOL KIT (Created in PSD/AI/Sketch/XD)
2. Web Showcase: Show the Tool Kit using web design so our developer can easily check each Tool kit. It needs to explain how to properly use buttons, forms, styles, icons, fonts, etc.
Background Overview
The primary goal of this challenge is to Design a set of React Native component elements with GUARD branding implemented on those components which will be used for iOS and Android platform. Such components include FAB (Floating Action Buttons, Modals, Popover, Search Bar etc). In addition, we're gonna need you to create one single website screen to be developed to showcase the React Native components that you created.
Challenge Goals
- Create UX/UI design of React Native components with GUARD branding implemented
- Create Website to showcase the React Native components
General Guidance
- Group/package each of UI elements in its own PSD/AI/Sketch/XD folder layer with an appropriate name.
- Categorize your source files based on specific UI elements (Basic, User Interface, List, etc)
- You might need to create some new graphics if the visual preview is not available.
Supporting Documents
- GUARD Branding Guidelines
- Screenshot of GUI ToolKit for Web
Design Requirements
1. GUI Tool Kit (iOS and Android)
- You need to create design style for the following 28 Mobile GUI Tool Kit while having our GUARD Branding Guidelines style implemented to them (Create it for iOS and Android):
-- Label Text
-- Text Input (autocomplete, auto correction, auto capitalization, have placeholder text)
-- Textarea
-- RadioBox
-- SelectBox (Picker Style)
-- DatePicker
-- TimePicker
-- Switch Toggle
-- CheckBox
-- Slider and Range Slider
-- Upload
-- Link
-- Table
-- Tabs
-- Accordion
-- Snackbar
-- Text
-- FlatList
-- SectionList
-- Button
-- Alert
-- Modal
-- Image
-- Content Slider
-- Progress View
-- Notification
-- Toolbar
-- Permissions
- The look and feel of the GUI Kit should complement the GUARD Branding Guidelines (see our branding guidelines and our GUI for web)
2. Web Showcase
- We need to create one web design to showcase and explains the common usage of the GUI Tool Kit elements, so it can be gathered properly organized and easy to understand/apply.
- Imagine you're designing pages from the new GUARD App. What information do you need to properly follow the same branding guidelines? Think about the best way to deliver this information.
- Here is an example of web view that we liked in terms of layout and design and keen to see our web showcase view have similar lines: https://ionicframework.com/docs/components/#action-sheets
- Put your GUI Tool Kit items into the web design for display purpose
- For iOS device mockup, use "iPhone-X" screen device
- For Android device mockup, use "Samsung 9" screen device
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.
MarvelApp Prototype
- We need you to upload your screens to Marvel App
- Please send your Marvel app request to fajar.mln@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL in notes /comments while uploading (in your marvel app prototype, click on share and then copy the link & share it within your notes while you upload).
References
- Notice these are just for reference. DON'T COPY ANYTHING
- React Native Training Tool Kit
- Ionic Tool Kit
Target Audience
- GUARD Developer
Judging Criteria
- How well you design, plan and develop your GUI Tool Kit design
- Cleanliness of your graphics and design
- Overall design, UI and user experience
- Consistency across the UX/UI
- Cleanliness of your graphics,, design and ability to stay within the given design reference.
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
Add the PNG/JPG screens and any notes to your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as an editable file.
Final Fixes
As part of the final fix 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.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Round 1
Submit your design for a Checkpoint feedback:- GUI TOOL KIT (Created in PSD/AI/Sketch/XD)
- Web Showcase: Show the Tool Kit using web design so our developer can easily check each Tool kit. It needs to explain how to properly use buttons, forms, styles, icons, fonts, etc.
Round 2
Final design plus any Checkpoint feedback:1. GUI TOOL KIT (Created in PSD/AI/Sketch/XD)
2. Web Showcase: Show the Tool Kit using web design so our developer can easily check each Tool kit. It needs to explain how to properly use buttons, forms, styles, icons, fonts, etc.
Background Overview
The primary goal of this challenge is to Design a set of React Native component elements with GUARD branding implemented on those components which will be used for iOS and Android platform. Such components include FAB (Floating Action Buttons, Modals, Popover, Search Bar etc). In addition, we're gonna need you to create one single website screen to be developed to showcase the React Native components that you created.
Challenge Goals
- Create UX/UI design of React Native components with GUARD branding implemented
- Create Website to showcase the React Native components
General Guidance
- Group/package each of UI elements in its own PSD/AI/Sketch/XD folder layer with an appropriate name.
- Categorize your source files based on specific UI elements (Basic, User Interface, List, etc)
- You might need to create some new graphics if the visual preview is not available.
Supporting Documents
- GUARD Branding Guidelines
- Screenshot of GUI ToolKit for Web
Design Requirements
1. GUI Tool Kit (iOS and Android)
- You need to create design style for the following 28 Mobile GUI Tool Kit while having our GUARD Branding Guidelines style implemented to them (Create it for iOS and Android):
-- Label Text
-- Text Input (autocomplete, auto correction, auto capitalization, have placeholder text)
-- Textarea
-- RadioBox
-- SelectBox (Picker Style)
-- DatePicker
-- TimePicker
-- Switch Toggle
-- CheckBox
-- Slider and Range Slider
-- Upload
-- Link
-- Table
-- Tabs
-- Accordion
-- Snackbar
-- Text
-- FlatList
-- SectionList
-- Button
-- Alert
-- Modal
-- Image
-- Content Slider
-- Progress View
-- Notification
-- Toolbar
-- Permissions
- The look and feel of the GUI Kit should complement the GUARD Branding Guidelines (see our branding guidelines and our GUI for web)
2. Web Showcase
- We need to create one web design to showcase and explains the common usage of the GUI Tool Kit elements, so it can be gathered properly organized and easy to understand/apply.
- Imagine you're designing pages from the new GUARD App. What information do you need to properly follow the same branding guidelines? Think about the best way to deliver this information.
- Here is an example of web view that we liked in terms of layout and design and keen to see our web showcase view have similar lines: https://ionicframework.com/docs/components/#action-sheets
- Put your GUI Tool Kit items into the web design for display purpose
- For iOS device mockup, use "iPhone-X" screen device
- For Android device mockup, use "Samsung 9" screen device
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.
MarvelApp Prototype
- We need you to upload your screens to Marvel App
- Please send your Marvel app request to fajar.mln@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL in notes /comments while uploading (in your marvel app prototype, click on share and then copy the link & share it within your notes while you upload).
References
- Notice these are just for reference. DON'T COPY ANYTHING
- React Native Training Tool Kit
- Ionic Tool Kit
Target Audience
- GUARD Developer
Judging Criteria
- How well you design, plan and develop your GUI Tool Kit design
- Cleanliness of your graphics and design
- Overall design, UI and user experience
- Consistency across the UX/UI
- Cleanliness of your graphics,, design and ability to stay within the given design reference.
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
Add the PNG/JPG screens and any notes to your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as an editable file.
Final Fixes
As part of the final fix 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.