Challenge Summary
Welcome to "Config Editor Tool - Logo and Branding Design Challenge". In this challenge, we need your creative thoughts to create a new logo, name, and branding material for our configuration editor application. The new logo will be used as a branding guideline for the application when being released to the public as an open source app.
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!
BACKGROUND OVERVIEW
This project purpose is to create a tool to help both technical and non-technical people manage external configuration files for deployed web applications. This Application Configuration Editor will also be a web application hosted by a NodeJS server running in a docker container.
This Editor will be released as an open source app. We want this app to have a cool name and sophisticated, good-looking branding materials ready when it is opened to the public.
In this challenge, we need your help to create a great logo and propose some cool and good name for the application. Also, we're gonna need to generate branding and marketing material (colors, typography, etc) that suitable for the app and will stand out for the open source community.
The logo and branding material will be used as main guidelines for this app (public facing websites, future development, and other branding material). We want it to be very good looking and easily recognizable.
ABOUT "Config Editor Tool"
"Configuration as code" is a technique to store environmental variables, feature flags, and other configuration items in an SCM the same way the code is stored. When the code is deployed, the CI process generates the specific configuration for the proper environment from the config SCM. Then the CD process deploys it to the appropriate hosts alongside the new code. The significant advantage of this approach is that configuration changes are tracked over time which is critical to support.
Our client desires to build a configuration app that allows developers and DevOps a standard and hierarchical approach and intuitive form like User Interface for managing and maintaining complex configuration environments.
This app would be called by the DevOps pipeline to generate YAML configurations for deployment to environments. Spring Cloud Config project will serve as inspiration for this project.
Application Consideration
- This App created using Typescript, GIT, Node10+, and Angular 6+
- This App sponsored by T-Mobile
- This App will be released as an Open Source application
Why We Build This App?
- When we build an application (in enterprise scale), we expect to deploy that application to a number of environments:
-- Local dev workstation
-- QA testing
-- Performance testing
-- Staging
-- Production
- Each of these environments will have different run-time characteristics, for example:
-- In QA Testing, the application will access JSON Web service endpoints from http://pd01.domain.com/api
-- In Staging, the API services are at http://staging.domain.com/api
-- Etc
- These API URLs need to be configurable after the application has been compiled and deployed "build once, run anywhere"
- There may be other settings that change across environments. for example:
-- in Production we want the console logger to skip logging any info, debug or trace logs — we only care about "warn" and "error"
-- In Performance testing, we want to run with special UI theme to highlight the purpose of the run-time environment
-- In QA labs we may want to turn off caching (temporarily). The testers should be able to toggle certain settings to modify the behavior of the app
- In Addition, we are using "feature toggles" - these are simple config files that list strings (property names || keys ) with a 'true' | 'false' value. The application would load this file at runtime and reference the key-value pairs to determine which features and UI elements to display or make active. This allows us to push pre-release code out to production without making it accessible to the user
- These "feature.toggle.yaml" files need to be edited on the fly after the application has been deployed and is live
- The solution "that we want" is to have a separate application that allows semi-technical people to load and edit these external configuration files in a simple interface. They do not need to know JSON or YAML or any other mark[up|down] formats. The UI enforces structural and syntactical rules so that the final output config files are compliant and can be efficiently consumed by the running application[s]
- This is similar to the "Spring Cloud Configuration Server" application - although this service is based in Java and highly focused on Java services implemented with the "SpringBoot" framework
- We are using primarily javascript with NodeJS and some client-side framework (Angular/React/Vue)
- While we 'could' hack SCCS, or our applications to talk to SCCS, why should we have to do so? Let's create a solution that allows us to manage the configuration of our deployed applications
- Again, we want a non-technical people to be able to make simple changes to configurations for applications running in various environments. The use of YAML as the base config format is following an industry pattern (swagger, open API etc) that choose YAML for metadata files. The purpose of YAML is that it allows easy inclusion of comments in the file that we can use to help explain rules and purpose of specific properties within each configuration file that we publish. We ‘could’ use a modified form of JSON where we strip the comments out before we transmit to the client, this is how VSCode IDE handles config and settings files, but this seems like a hack
CHALLENGE GOAL
Create a new logo, name, and branding material for this Application Config Editor that are able to reflect the app purpose and will stand out for the user.
LOGO CONSIDERATIONS
- Feel free to explore any possibility for the logo shape and design (Check Here to see different types of logo creation for your references)
- The logo needs to be related to Open Source Community audiences and Technology world, for example: Application Config Editor shortened as 'ACE' with a logo that matches with that name, etc.
- This app is focused on Web 3.0 applications - These are primarily Javascript Application running in a browser (SPA) that connect to a backend data web service
- Consider these phrases when creating the logo: Technology, Editor Tool, 'Build Once, Run Anywhere', Application Configuration made easy, Developer, Modern Software, etc
- The logo needs to consider how it can be fit into any non-technical user (even though the majority user will be DevOps position and IT related person)
WHAT WE NEED YOU TO DO IN THIS CHALLENGE:
- Create a new logo for this Configuration Editor App using Adobe Illustrator or Sketch (vector tools)
- Propose a good name that able to reflect the application purpose
- Create a "Full Color" and "Black and White" version for the logo
- Create a favicon for the browser tab
- Create an outlined version for the logo
- Showcase the new logo in Black and White background
- Create a branding guideline marketing asset document (PDF) that explain your Logo creation, including:
-- Colors schemes for the logo
-- The concept behind the logo creation
-- Minimum and Maximum size for the logo
-- Font that you use in the logo (if you use any font)
-- How the logo will look like in various position (for example, as a header in mobile site/app, in a poster, in a promotional banner for social media, etc)
-- How the logo will look like in several background variation (different background colors, behind an image, etc)
-- Showcase the logo in several mockups (T-shirt, Letterhead, App Mockup, etc) that relatable for open source community, more mockup sample is better.
DOCUMENTATION
- Existing App Screenshots: https://drive.google.com/drive/folders/1Kna4mQL2M0RyxBIxOxKomEwX6ZK_MuQJ?usp=sharing
- You can check the existing apps LIVE from the link below:
-- URL: https://obscure-harbor-17450.herokuapp.com
-- Username: standlove
-- Password: topcoder
-- RepoURL: https://bitbucket.org/standlove/yaml-editor
FONTS and COLORS
- Fonts are open to designers, make sure to check our 'design consideration' section first to find out the perfect and balance font for the logo
- Colors are open to designers, needs to have tech-savvy, open source community, IT related environment in feel.
- The branding, iconography, colors, typography — all of this needs to make the application more approachable and promote greater adoption.
- Check here for some inspiration
MOCKUP REFERENCES
- https://www.google.co.id/search?q=branding+mockup+free&oq=branding+mockup&aqs=chrome.1.69i57j0l5.6579j0j7&sourceid=chrome&ie=UTF-8
- https://www.webpagefx.com/blog/web-design/free-branding-identity-mockups/
- https://graphicburger.com/tag/branding/
- http://graphicdesignjunction.com/2016/07/50-free-branding-identity-stationery-mockups/
- Feel free to find and create another mockup to showcase your logo, but make sure to check the mockup license first (it needs to be free and can be used for commercial purpose)
DESIGN INSPIRATIONS
- Explore some logo design inspiration websites, look for simple images or typography that convey a sense of modern Software, Technology or Open Source Community/Company. A good logo should be; simple, distinctive, relevant, memorable, timeless, and versatile - and most importantly your own design. Use these references as inspirations only.
- https://www.logolounge.com/trend-reports
- https://www.crowdspring.com/blog/logo-trends-2018/
TARGET AUDIENCE
- The users of the logo and branding material will be Open Source Community, Non-technical User and also DevOps position from IT department
- Your Logo Needs to be something that these users can be proud of
JUDGING CRITERIA
Your submission will be judged on the following criteria:
- Relevance: How does your logo "fit" into the brand?
- Quality: Does your logo look fresh, professional and clean? Is the composition/layout well done? Have you used typography in a meaningful way?
- Concept: Does your logo present a new and interesting concept? Is it simple, yet memorable?
- Presentation: How does your logo displayed in various of mockup?
FINAL DELIVERABLES
Preview Image
- Create a preview image as one (1) 1024px by 1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
- Create/Export a JPG/PNG image file(s) of your logo and branding creation submission
- The PDF branding guideline marketing asset document (to explain and showcase your logo)
- Place those image files into a "Submission.zip" file.
Source Files
- All source files of all graphics created in vector format in either Adobe Illustrator or any similar software should be saved as editable files. Place all of your source files into a "Source.zip" file.
- The PDF branding guideline marketing asset document (to explain and showcase your logo)
- Your source files must meet these requirements:
-- The AI/EPS logo file with text intact (not outlined)
-- The AI/EPS logo file with text in an outlined format
- For additional instruction about the submission file and how to submit, kindly visit THIS PAGE
FINAL FIX
If your submission wins, you may be asked to modify your design, graphics (sizes or colors) or modify overall colors.
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 initial logo design, app name idea and branding materials for a Checkpoint FeedbackRound 2
Submit your final logo design, app name idea and branding materials for a Final ReviewBACKGROUND OVERVIEW
This project purpose is to create a tool to help both technical and non-technical people manage external configuration files for deployed web applications. This Application Configuration Editor will also be a web application hosted by a NodeJS server running in a docker container.
This Editor will be released as an open source app. We want this app to have a cool name and sophisticated, good-looking branding materials ready when it is opened to the public.
In this challenge, we need your help to create a great logo and propose some cool and good name for the application. Also, we're gonna need to generate branding and marketing material (colors, typography, etc) that suitable for the app and will stand out for the open source community.
The logo and branding material will be used as main guidelines for this app (public facing websites, future development, and other branding material). We want it to be very good looking and easily recognizable.
ABOUT "Config Editor Tool"
"Configuration as code" is a technique to store environmental variables, feature flags, and other configuration items in an SCM the same way the code is stored. When the code is deployed, the CI process generates the specific configuration for the proper environment from the config SCM. Then the CD process deploys it to the appropriate hosts alongside the new code. The significant advantage of this approach is that configuration changes are tracked over time which is critical to support.
Our client desires to build a configuration app that allows developers and DevOps a standard and hierarchical approach and intuitive form like User Interface for managing and maintaining complex configuration environments.
This app would be called by the DevOps pipeline to generate YAML configurations for deployment to environments. Spring Cloud Config project will serve as inspiration for this project.
Application Consideration
- This App created using Typescript, GIT, Node10+, and Angular 6+
- This App sponsored by T-Mobile
- This App will be released as an Open Source application
Why We Build This App?
- When we build an application (in enterprise scale), we expect to deploy that application to a number of environments:
-- Local dev workstation
-- QA testing
-- Performance testing
-- Staging
-- Production
- Each of these environments will have different run-time characteristics, for example:
-- In QA Testing, the application will access JSON Web service endpoints from http://pd01.domain.com/api
-- In Staging, the API services are at http://staging.domain.com/api
-- Etc
- These API URLs need to be configurable after the application has been compiled and deployed "build once, run anywhere"
- There may be other settings that change across environments. for example:
-- in Production we want the console logger to skip logging any info, debug or trace logs — we only care about "warn" and "error"
-- In Performance testing, we want to run with special UI theme to highlight the purpose of the run-time environment
-- In QA labs we may want to turn off caching (temporarily). The testers should be able to toggle certain settings to modify the behavior of the app
- In Addition, we are using "feature toggles" - these are simple config files that list strings (property names || keys ) with a 'true' | 'false' value. The application would load this file at runtime and reference the key-value pairs to determine which features and UI elements to display or make active. This allows us to push pre-release code out to production without making it accessible to the user
- These "feature.toggle.yaml" files need to be edited on the fly after the application has been deployed and is live
- The solution "that we want" is to have a separate application that allows semi-technical people to load and edit these external configuration files in a simple interface. They do not need to know JSON or YAML or any other mark[up|down] formats. The UI enforces structural and syntactical rules so that the final output config files are compliant and can be efficiently consumed by the running application[s]
- This is similar to the "Spring Cloud Configuration Server" application - although this service is based in Java and highly focused on Java services implemented with the "SpringBoot" framework
- We are using primarily javascript with NodeJS and some client-side framework (Angular/React/Vue)
- While we 'could' hack SCCS, or our applications to talk to SCCS, why should we have to do so? Let's create a solution that allows us to manage the configuration of our deployed applications
- Again, we want a non-technical people to be able to make simple changes to configurations for applications running in various environments. The use of YAML as the base config format is following an industry pattern (swagger, open API etc) that choose YAML for metadata files. The purpose of YAML is that it allows easy inclusion of comments in the file that we can use to help explain rules and purpose of specific properties within each configuration file that we publish. We ‘could’ use a modified form of JSON where we strip the comments out before we transmit to the client, this is how VSCode IDE handles config and settings files, but this seems like a hack
CHALLENGE GOAL
Create a new logo, name, and branding material for this Application Config Editor that are able to reflect the app purpose and will stand out for the user.
LOGO CONSIDERATIONS
- Feel free to explore any possibility for the logo shape and design (Check Here to see different types of logo creation for your references)
- The logo needs to be related to Open Source Community audiences and Technology world, for example: Application Config Editor shortened as 'ACE' with a logo that matches with that name, etc.
- This app is focused on Web 3.0 applications - These are primarily Javascript Application running in a browser (SPA) that connect to a backend data web service
- Consider these phrases when creating the logo: Technology, Editor Tool, 'Build Once, Run Anywhere', Application Configuration made easy, Developer, Modern Software, etc
- The logo needs to consider how it can be fit into any non-technical user (even though the majority user will be DevOps position and IT related person)
WHAT WE NEED YOU TO DO IN THIS CHALLENGE:
- Create a new logo for this Configuration Editor App using Adobe Illustrator or Sketch (vector tools)
- Propose a good name that able to reflect the application purpose
- Create a "Full Color" and "Black and White" version for the logo
- Create a favicon for the browser tab
- Create an outlined version for the logo
- Showcase the new logo in Black and White background
- Create a branding guideline marketing asset document (PDF) that explain your Logo creation, including:
-- Colors schemes for the logo
-- The concept behind the logo creation
-- Minimum and Maximum size for the logo
-- Font that you use in the logo (if you use any font)
-- How the logo will look like in various position (for example, as a header in mobile site/app, in a poster, in a promotional banner for social media, etc)
-- How the logo will look like in several background variation (different background colors, behind an image, etc)
-- Showcase the logo in several mockups (T-shirt, Letterhead, App Mockup, etc) that relatable for open source community, more mockup sample is better.
DOCUMENTATION
- Existing App Screenshots: https://drive.google.com/drive/folders/1Kna4mQL2M0RyxBIxOxKomEwX6ZK_MuQJ?usp=sharing
- You can check the existing apps LIVE from the link below:
-- URL: https://obscure-harbor-17450.herokuapp.com
-- Username: standlove
-- Password: topcoder
-- RepoURL: https://bitbucket.org/standlove/yaml-editor
FONTS and COLORS
- Fonts are open to designers, make sure to check our 'design consideration' section first to find out the perfect and balance font for the logo
- Colors are open to designers, needs to have tech-savvy, open source community, IT related environment in feel.
- The branding, iconography, colors, typography — all of this needs to make the application more approachable and promote greater adoption.
- Check here for some inspiration
MOCKUP REFERENCES
- https://www.google.co.id/search?q=branding+mockup+free&oq=branding+mockup&aqs=chrome.1.69i57j0l5.6579j0j7&sourceid=chrome&ie=UTF-8
- https://www.webpagefx.com/blog/web-design/free-branding-identity-mockups/
- https://graphicburger.com/tag/branding/
- http://graphicdesignjunction.com/2016/07/50-free-branding-identity-stationery-mockups/
- Feel free to find and create another mockup to showcase your logo, but make sure to check the mockup license first (it needs to be free and can be used for commercial purpose)
DESIGN INSPIRATIONS
- Explore some logo design inspiration websites, look for simple images or typography that convey a sense of modern Software, Technology or Open Source Community/Company. A good logo should be; simple, distinctive, relevant, memorable, timeless, and versatile - and most importantly your own design. Use these references as inspirations only.
- https://www.logolounge.com/trend-reports
- https://www.crowdspring.com/blog/logo-trends-2018/
TARGET AUDIENCE
- The users of the logo and branding material will be Open Source Community, Non-technical User and also DevOps position from IT department
- Your Logo Needs to be something that these users can be proud of
JUDGING CRITERIA
Your submission will be judged on the following criteria:
- Relevance: How does your logo "fit" into the brand?
- Quality: Does your logo look fresh, professional and clean? Is the composition/layout well done? Have you used typography in a meaningful way?
- Concept: Does your logo present a new and interesting concept? Is it simple, yet memorable?
- Presentation: How does your logo displayed in various of mockup?
FINAL DELIVERABLES
Preview Image
- Create a preview image as one (1) 1024px by 1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
- Create/Export a JPG/PNG image file(s) of your logo and branding creation submission
- The PDF branding guideline marketing asset document (to explain and showcase your logo)
- Place those image files into a "Submission.zip" file.
Source Files
- All source files of all graphics created in vector format in either Adobe Illustrator or any similar software should be saved as editable files. Place all of your source files into a "Source.zip" file.
- The PDF branding guideline marketing asset document (to explain and showcase your logo)
- Your source files must meet these requirements:
-- The AI/EPS logo file with text intact (not outlined)
-- The AI/EPS logo file with text in an outlined format
- For additional instruction about the submission file and how to submit, kindly visit THIS PAGE
FINAL FIX
If your submission wins, you may be asked to modify your design, graphics (sizes or colors) or modify overall colors.
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.