Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to the "PFD Equipment Icons Design Challenge". In this challenge, we need your creative thoughts to create a new icon set consisting of 10 equipment symbols that will be used in a Process Flow Diagram (PFD) to show the general flow of plant processes and equipment to our external customers via digital devices.

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
  • A process flow diagram (PFD) is a diagram commonly used in chemical and process engineering to indicate the general flow of plant processes and equipment. The PFD displays the relationship between major equipment of a plant facility and does not show minor details such as piping details and designations 
  • You can read more details about PFD general definition from this Wikipedia Link
  • In General, PFD is:
    • a process flow diagram includes process piping, major equipment, connections with other systems, control valves, major bypass and recirculation streams, and operational data
    • All the major equipment in the process will be displayed on the diagram together with a description of the equipment
    • All process flow streams will be shown with a number, together with a description of the process conditions and chemical composition of each stream
    • All utility streams supplied to major equipment that provides a process function will be shown
    • Basic control loops will be displayed to indicate the control strategy for operating the process

CHALLENGE GOAL
  • Create a set of icons that will be used as a representation for equipment symbols in our Process Flow Diagram application

PFD ICON SYMBOLS REQUIREMENTS
General Icon Usage Considerations:
  • This icon set will be used as part of design elements in the drawing feature of our app which enables users to manage a natural resources production site (think of Visio app look-alike, check our Existing Diagram App.png and use it as references on where the icons will be used)
  • User will easily drag n drop these icons from a toolbar navigation menu to the canvas and build/create a Process Flow Diagram
  • These icons will be added to the Process Flow Diagram, exported, and then presented in various digital devices (Desktop, Tablet, Mobile, Touch Screen)

General Icon Design Considerations:
  • Clarity: the icon should be able to communicate the concept quickly
  • Readability: The icon with or without a label should be readable
  • Alignment: Icon needs to be balanced, align its elements optically
  • Brevity: Short visual, but efficient and elegant
  • Consistency: Achieve harmony for the icon set family
  • Personality: Each icon should have its own personality
  • Ease of Use: Organized, well-documented, and tested in the context

Icon Scalability Considerations:
  • The icons will be animated in the future, for example, we may want to change the line and the fill color of a “Loading Arms” icon symbol or show the fills at different heights. So the style needs to work with that idea
  • Outline and fill style of the icons can be created in a single color or a few simple colors 
  • It would also be good to consider depth either through the use of tones or layers and shadows as some other features of our diagram application use 3D elements
  • The icon base shapes need to be able to be expanded into a different type of equipment symbols that share similar function for future use, for example, there are many variants of “Valve” symbol in Process Flow Diagram, see this link as the reference: https://www.edrawsoft.com/images/shapes/pfd-valves.png  
  • Feel free to go beyond requirements and create the icon variations to your design submission for each equipment symbols mentioned below and show us how your icon basic shapes can be used in any symbol variations

Create your icon set design in the following requirements:
  • These icons will be used as a graphical representation of physical equipment installed on the field.
  • Follow the Best Practice for icon design creation and put them into this Sample Diagram.png so we can check how your icons merged with the Process Flow Diagram (feel free to recreate the diagram to match the style of your icons)
  • Show the icons with and without label/title
  • Create the icon set in the following sizes: 
    • For Toolbar Navigation: 30x30px 
    • For Canvas: 75x75px and 125x125px 

You will need to create a set of icons that able to represent the following PFD symbols:
01) Icon for “Pump” Symbol
  • Description: Pumps are used to manage flow or raise a liquid from a low level to a high level.  A pump is a device that uses suction or pressure to raise, compress, or move fluids in and out of other objects. 
  • Visual sample reference: See Topcoder Icon Examples.pdf

02) Icon for “Turbine” Symbol
  • Symbol Description: a rotary mechanical device that extracts energy from a fluid flow and converts it into useful work.
  • Visual sample reference: See Topcoder Icon Examples.pdf

03) Icon for “Vessel” Symbol
  • Symbol Description:  A vessel is a container that is used to store fluid. It may also alter the characteristics of the fluid during storage. The vessels category includes tanks, cylinders, columns, bags, and other vessels.
  • Visual sample reference: See Topcoder Icon Examples.pdf

04) Icon for “Valve” Symbol
  • Symbol Description: A valve is a device that regulates, directs or controls the flow of a fluid (gases, liquids, fluidized solids, or slurries) by opening, closing, or partially obstructing various passageways.
  • Visual sample reference: See Topcoder Icon Examples.pdf

05) Icon for “Loading Arms” Symbol
  • Symbol Description: An articulated pipe system for then transfers of liquids or gases. This may be maneuvered manually or hydraulically
  • Visual sample reference: See Topcoder Icon Examples.pdf

06) Icon for “Compressor” Symbol
  • Symbol Description: A compressor is a mechanical device that increases the pressure of a gas by reducing its volume
  • Visual sample reference: See Topcoder Icon Examples.pdf

07) Icon for “Heat Exchanger” Symbol
  • Symbol Description: A fluid-based heat exchanger system uses fluids to transfer heat. Heat exchangers are used in both cooling and heating processes.
  • Visual sample reference: See Topcoder Icon Examples.pdf

08)Icon for “Heat Exchanger” Symbol
  • Symbol Description: An air-based heat exchanger system uses air to transfer heat. Heat exchangers are used in both cooling and heating processes.
  • Visual sample reference: See Topcoder Icon Examples.pdf

09) Icon for “Column” Symbol
  • Symbol Description: an essential item used in the distillation of liquid mixtures to separate the mixture into its component parts, or fractions, based on the differences in volatilities.
  • Visual sample reference: See Topcoder Icon Examples.pdf

10) Icon for “Fin Fan” Symbol
  • Symbol Description: Fans used to cool electrical equipment or in engines or other machines do cool the equipment directly by forcing hot air into the cooler environment outside of the machine
  • Visual sample reference: See Topcoder Icon Examples.pdf

PFD REFERENCES
DOCUMENTATION
BRANDING GUIDELINES
  • Fonts are open to designers
  • Colors are open to designers
  • General Icon Style: Open to Designers (Flat, Filled, Colors, Outline, Glyph, Dotted, Rounded, Etc)
  • Style: We prefer a modern style using Design Systems like Google Material Icons or Microsoft Fluent Icons, At the moment the app will mostly use a Material design but we may move towards Fluent design, so it would be good if the icon design is sympathetic to both styles

TARGET AUDIENCE
  • The users of the icons will be our external customers and internal employees

JUDGING CRITERIA
  • Your submission will be judged on the following criteria:
    • Relevance: Does your icon reflect the description provided above?
    • Quality: Do your icons look fresh, professional, and clean? Is the composition/layout well done? Does your icon able to maintain its visual quality as it scales from small to large and vice versa?
    • Concept: Needs to be aligned with the “ISO 10628-2:2012(en)”– i.e. a cooling tower can be identified as a cooling tower. Do your icons present a new and interesting visual and concept? Is it simple, yet memorable and still align with our objectives?
    • Presentation: How do your icons displayed in various mockups or sample diagram?
    • Scalability: Do you icon able to scale up as requested?
    • Metadata: Does your icon include a title reflecting the item type?

FINAL DELIVERABLES
Declaration Files
  • Create a text, word, pdf, or RTF document contains all declaration about fonts, artwork, or icons in your design

Submission File
  • Export your icons set to an SVG (Important!) and PNG format
  • Place those image files into a "Submission.zip" file

Source Files
  • All source files of all graphics created in vector tools, either in Adobe Illustrator (Client Recommendation) or Sketch (in a format that can be edited and opened in Adobe Illustrator)
  • Please use separate artboard for each icon
  • Place all of your source files into a "Source.zip" file
  • 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 icon 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.

Stock Photography

Stock photography is not allowed in this challenge. All submitted elements must be designed solely by you. See this page for more details.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2020 Topcoder(R) Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • AI files created in Adobe Illustrator or similar
  • EPS files created in Adobe Illustrator or similar
  • Sketch
  • SVG

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30126204