Challenge Summary
Welcome to the Topcoder Newsletter Template Design Challenge!
Are you reading the weekly design newsletter? Now you can design its look!
In this challenge we are looking to create a template for all newsletters we have today: design, development, data science, etc. Right now they have different styles and we are looking to standardize them.
Read the challenge specification carefully and watch the challenge forums for any questions or feedback concerning this challenge. Feel free to ask any questions in the challenge forum!
1. Topcoder Newsletter Template (desktop)
2. Sections banners: Latest promotion, Featured challenge, TCO Update (desktop)
- As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
1. Topcoder Newsletter Template (desktop + mobile)
2. Sections banners: Latest promotion, Featured challenge, TCO Update (desktop + mobile)
- As part of your Final submission, you must replace your checkpoint submission with the final submission into Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
- TC Design Newsletter
- TC Development Newsletter
- TC Data Science Newsletter
- TCO Weekly Digest
- Algorithm Newsletter
- Marathon Match Newsletter
The newsletter will have a couple of areas: the main banner, the intro text and the different content sections. The main sections include 4 types:
1: Promo sections (short content) which have: a banner, title, description and link to read more. (for eg.: “Topcoder will be at IBM Index in February” from design newsletter) - part of content is displayed only with link to read more
2: Descriptive sections (long content): which have: a banner, title, and a long text (for eg.: “Member Spotlight” from design newsletter) – the entire content is displayed here
3: Active challenges: check design and TCO newsletter to see the examples
4: Leaderboards: check TCO newsletter to see how the leaderboards look now
We want to see your creative ideas for designing different layouts for these sections. You should take into consideration the amount of text we usually have, so you can use any text from newsletters as content. Look not to design a classic layout, but a fresh and modern one. Do your research and think how can you use typography, colors and grid in a meaningful way.
Besides the template, we’d like to have some of the banners designed. So far we have:
- Latest promotion
- Featured challenge
- TCO Update
Show us some cool designs that our tech community would love! You can use stock images, photos from our Flickr album or you can create your original artwork.
Make sure everything you design can be implemented in the email format. You can read more about the limitations here.
Other useful links to go over:
https://www.campaignmonitor.com/blog/email-marketing/2017/05/the-really-good-guide-to-email-design-bonus-checklist/
https://insights.newscred.com/successful-email-marketing-design/
Branding
- Colors: it is mandatory that you follow the TC colors from here
- Fonts: use Roboto font as that is the standard font we are using for the new Topcoder site and have text only in the TC colors (shades of gray).
- Icons: you are free to use stock icons.
- Buttons: check the attached html specifications to see the colors and padding you should use for them
- If there is something else you need or have questions, ask away in the forum.
Stock Artwork & Icons
- Stock photos and icons are allowed, but we would prefer if you would use photos from our Flickr album.
- Make sure to declare all your assets properly or you might fail screening
Target Devices
Responsive web:
- Desktop: newsletter content width(text) is 600px as it will be displayed in email and height will be adjusted accordingly
Newsletter banners: if the banners are as wide as the content, we need them to be designed to look good on retina size as well, so design them at 1200px, but show them in your template at 600px (always plan for double resolution image) .
- Mobile: 750px x 1334px (height can adapt as needed)
Marvel Prototype
- Request a Marvel Prototype on forums or email keyla.blue1@gmail.com
- Provide clickable spots (hotzones) to link your screens and show the interactivity.
- We need you to upload your screens to Marvel App.
- You MUST include your Marvel App URL on your notes during submission upload (in your Marvel App prototype, click on share and then copy that link)
Target Audience
- Topcoder members
- Topcoder staff
- Topcoder clients
Judging Criteria
- Cleanliness of your graphics and design
- Creative, graphics appeal, originality
- Hierarchy and organization of content
- Overall design aesthetics
Submission Deliverables
Preview Image
Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place your submissions within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections.
Submission File
All requested Contest Deliverables in JPG or PNG file format in RGB color mode at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator or Sketch. Layers should be named and well organized.
Are you reading the weekly design newsletter? Now you can design its look!
In this challenge we are looking to create a template for all newsletters we have today: design, development, data science, etc. Right now they have different styles and we are looking to standardize them.
Read the challenge specification carefully and watch the challenge forums for any questions or feedback concerning this challenge. Feel free to ask any questions in the challenge forum!
Round 1
Submit your initial design for a Checkpoint Feedback1. Topcoder Newsletter Template (desktop)
2. Sections banners: Latest promotion, Featured challenge, TCO Update (desktop)
- As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your Final Design plus Checkpoint Updates1. Topcoder Newsletter Template (desktop + mobile)
2. Sections banners: Latest promotion, Featured challenge, TCO Update (desktop + mobile)
- As part of your Final submission, you must replace your checkpoint submission with the final submission into Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Design Problem
The purpose of this challenge is to come up with an updated, fresh layout for our Topcoder newsletter template which will help readers to navigate through the content better. If you are not getting our newsletters, here’s how they look:- TC Design Newsletter
- TC Development Newsletter
- TC Data Science Newsletter
- TCO Weekly Digest
- Algorithm Newsletter
- Marathon Match Newsletter
The newsletter will have a couple of areas: the main banner, the intro text and the different content sections. The main sections include 4 types:
1: Promo sections (short content) which have: a banner, title, description and link to read more. (for eg.: “Topcoder will be at IBM Index in February” from design newsletter) - part of content is displayed only with link to read more
2: Descriptive sections (long content): which have: a banner, title, and a long text (for eg.: “Member Spotlight” from design newsletter) – the entire content is displayed here
3: Active challenges: check design and TCO newsletter to see the examples
4: Leaderboards: check TCO newsletter to see how the leaderboards look now
We want to see your creative ideas for designing different layouts for these sections. You should take into consideration the amount of text we usually have, so you can use any text from newsletters as content. Look not to design a classic layout, but a fresh and modern one. Do your research and think how can you use typography, colors and grid in a meaningful way.
Besides the template, we’d like to have some of the banners designed. So far we have:
- Latest promotion
- Featured challenge
- TCO Update
Show us some cool designs that our tech community would love! You can use stock images, photos from our Flickr album or you can create your original artwork.
Make sure everything you design can be implemented in the email format. You can read more about the limitations here.
Other useful links to go over:
https://www.campaignmonitor.com/blog/email-marketing/2017/05/the-really-good-guide-to-email-design-bonus-checklist/
https://insights.newscred.com/successful-email-marketing-design/
Branding
- Colors: it is mandatory that you follow the TC colors from here
- Fonts: use Roboto font as that is the standard font we are using for the new Topcoder site and have text only in the TC colors (shades of gray).
- Icons: you are free to use stock icons.
- Buttons: check the attached html specifications to see the colors and padding you should use for them
- If there is something else you need or have questions, ask away in the forum.
Stock Artwork & Icons
- Stock photos and icons are allowed, but we would prefer if you would use photos from our Flickr album.
- Make sure to declare all your assets properly or you might fail screening
Target Devices
Responsive web:
- Desktop: newsletter content width(text) is 600px as it will be displayed in email and height will be adjusted accordingly
Newsletter banners: if the banners are as wide as the content, we need them to be designed to look good on retina size as well, so design them at 1200px, but show them in your template at 600px (always plan for double resolution image) .
- Mobile: 750px x 1334px (height can adapt as needed)
Marvel Prototype
- Request a Marvel Prototype on forums or email keyla.blue1@gmail.com
- Provide clickable spots (hotzones) to link your screens and show the interactivity.
- We need you to upload your screens to Marvel App.
- You MUST include your Marvel App URL on your notes during submission upload (in your Marvel App prototype, click on share and then copy that link)
Target Audience
- Topcoder members
- Topcoder staff
- Topcoder clients
Judging Criteria
- Cleanliness of your graphics and design
- Creative, graphics appeal, originality
- Hierarchy and organization of content
- Overall design aesthetics
Submission Deliverables
Preview Image
Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place your submissions within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections.
Submission File
All requested Contest Deliverables in JPG or PNG file format in RGB color mode at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator or Sketch. Layers should be named and well organized.
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.