Learning Series - Grid and Libraries for Faster and Efficient Design

Welcome back to the Topcoder Learning Series Challenges. Each month, we launch a design learning series challenge to help our new and existing members improve their design skills and get familiar with our Design Challenge process.

Layout consistency is one of the most important things we need to consider when we design a web or mobile interface. In this challenge, we will learn how to make layouts and components consistently and efficiently using grid systems and libraries. This challenge is the 2nd challenge of the series, and we are going to learn together and also do some quick practice to learn Grid and Libraries for Faster and Efficient Design by creating a Web Dashboard for Universities to Monitor Online Classes. 

This challenge is open for all members who are looking to enhance their design skills. We have 5 x $25 cash prizes to award for the first time submitters in the design track, who complete the guidelines in an article or video tutorial and pass the screening phase. If there are more than 5 members who meet the above criteria, the submissions with the best quality and innovation will be chosen.

Read the challenge specification below carefully and let us know in the forum if you have any questions!
PROJECT DESCRIPTION

• The "Learning Series" is a brand new Topcoder program that has a goal to help members to be successful in Topcoder Design track by learning about UI/UX design via videos or article tutorials created by our top design members 

BACKGROUND OVERVIEW

• When competing in a design challenge, you need to be fast because challenges usually have a short timeline and at the same time you also need to be efficient too because there might be several design screens that need to be created and including the screen interactions to explain any feature in your design.
• In this 2nd learning series challenge, we are going to guide you to learn some tips on how to create a fast and efficient design utilizing GRID and LIBRARIES that available in modern design tools. 
• To help you become better at it we have a preparatory tutorial article on Grid and Libraries followed by a hands-on video tutorial creating a Sales Dashboard that explains how to set up a GRID in your artboard and use LIBRARIES features inside your design tools to create a faster and efficient design. Later for practice and submission, we are looking for you to create a Web Dashboard for Universities to Monitor Online Classes by learning the concept from this article and the video.
• We are using Sketch in this tutorial (article and videos), but the technique should be available and easy to be applied in any modern design tool nowadays.
• As an additional goal for this challenge, we also want you to get familiar with our challenge process, so please don't hesitate to ask questions in the forum, requesting a marvel app project, and submitting your design to this challenge. Our Design Copilot will help you through the process in the challenge forum, so don't hesitate to ask anything there!

CHALLENGE GOALS

• Learn how to use GRID and LIBRARIES properly
• Able to create a faster and efficient design screen 
• Get familiar with Topcoder Challenge Process

CHALLENGE LEARNING REQUIREMENTS
1) Read the Tutorial and Watch the Videos

• GRID and LIBRARIES definitely will help you a lot when designing a lot of screens for a design challenge at Topcoder. Using these two features, you can easily create a number of screens faster and efficiently, which will benefit when you are competing against the time. Read and learn more about GRID and LIBRARIES feature and how to use it in your design from the following article and video:
  • THRIVE Article 
  • YOUTUBE Video

2) Create a Web Dashboard Screen

• After understanding how to applying GRID and LIBRARIES in your design, it is time to practice these features by creating a new design that will use these two features 
• For this challenge, we are going to create a Web Dashboard for Universities to Monitor Online Classes
• The web dashboard design should contain the following information and content:
  • Ability to see all active classes, it can be various classes available (Maths, Physics, Economy, etc), probably 5-10 classes at one time, including all students that registered to the class and their progress (attendance, class activity, homework, etc)
  • Ability to see all students and lecturer that registered in the platform
  • Ability to track and compare students progress in a graphical chart
  • Feel free to add more features to the dashboard, show us your creativity!

3) Register to the Challenge

• Once you are done with the design, please register to the challenge and send your design attempt to us so we can review and provide feedback to you
• Make sure to register within the registration phase. This challenge has 14 days registration and submission phase (Start on "12th May 2020 8 AM EST" and ends on "26th May 2020 8 AM EST").
• You can see the deadline from this challenge page, and there is a link called 'Show Deadlines' at the above of this page, click that link and see the 'Registration' deadline time there, it's crucial to make sure yourself registered before that date and time arrived. 

4) Ask Questions in Forum

• If you're having any problem understanding the video tutorial or got any questions about this learning series challenge, make sure to address your questions in the challenge forum.
• Once you are successfully registered to the challenge, you will be able to see a link called 'Challenge Forum' at the top area of the page, click that link and you will be redirected to the challenge forum, ask any questions there, don't hesitate at all!

5) Request the Marvel App Project

• In all UI Design challenge related at Topcoder, you will need to request a Marvel Project/Prototype to the Design Copilot
• In the Marvel Project/Prototype, you will need to upload your JPG/PNG screen design to Marvel so the client can review and provide feedback to your design online
• There are various ways of requesting Marvel project, but the most common way to do this will be by asking it in the challenge forum thread that already being prepared by the Design Copilot

6) Submit Your Design to Challenge Page

• This is the most important/crucial moment when participating in a Topcoder challenge
• You will need to submit all complete design deliverables to the challenge before the challenge deadline come
• Prepare zip files contains 3 items in it:
  • Declaration.txt file 
  • Submission folder
  • Source folder  
• More information about how to submit in a challenge can be found from this LINK
• Failure to submit before challenge deadline come will make your design cannot be accepted/acknowledged and cannot be sent to the client for review

IMPORTANT

• Keep things consistent. This means all graphics styles should work together
• All of the graphics should have a similar feel and general aesthetic appearance

MARVEL PROTOTYPE

• We need you to upload your screens to Marvel App
• Please send your marvel app request in the forum 
• You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link and share it with your notes/comment this link while you upload)

 
BRANDING GUIDELINES

• Open To Designers (Colors, Font, Style, etc)

TARGET DEVICES

• Web/Desktop Size: 1400px Width with Height adjusted accordingly

TARGET AUDIENCE

• Topcoder Members

JUDGING CRITERIA

• Your submission will be judged on the following criteria:
  • Complete Design Submission Deliverables (Submission Folder, Source Files Folder, Declaration Files)
  • The Overall design and user experience
  • How well your design attempt to create the web dashboard screen using GRID and LIBRARIES

 
SUBMISSION AND SOURCE FILES
Declaration Files

• Please create your declaration files (TXT, PDF, Word, RTF, etc) contains all information about Font, Artwork, Photos, and Icons name and source link used in your design 

Submission File

• Submit JPG/PNG image files based on Challenge submission requirements stated above
• MarvelApp link for review and to provide feedback

 
Source Files

• All source files of all graphics created in either Adobe XD or Sketch and saved as an editable layer

 
FINAL FIXES

• As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors