Available translations
loading results
How to Contribute Icons
Summary: Superalgos visual interface features hundreds of icons and many more icons are required with each release, as new functionality is rolled out. Designing icons is a great way to leave your mark, as it puts your work directly in front of every user!
Foundations->Concept->Reusable Snippets->Contributions Reminder
Switch Branches and Update Before You Start
Warning: The Plugins-Docs Branch has been deprecated. All contributions now go to the Develop branch.
Switch Branches
To switch to branches:
- Go to the footer of this page (scroll down).
- Follow the instructions to close and restart the app.
Update to the Latest Version
- Run the App Update Command by typing it into the search field at the top of the Docs
app.update- Now close the app and restart.
Beyond the Basics Tutorial
Before you go any further, do the Beyond the Basics tutorial in the Getting Started Native Workspaces so that you learn the basics on how to deal with contributions from within the app. The tutorial will help you get your setup right so that contributions are seamless.
Attribution
The original set of icons is a web design pack made by Freepik and is available at:
The rest of the series is inspired in the design style developed for the original set.
The authorship of each icon not in the original series may be tracked in the repository's history.
Coordination
Join the following group to coordinate works:
Please, introduce yourself and get up to speed with the group currently doing the work. The main coordination task is keeping track of who will block what part of the pending work so that we don’t duplicate efforts.
Design Brief
Color Palette
We use a restricted palette, with a playful selection of colors that work well both over a black background—on the Design Space — and a white background — on the Docs and the Charting Space.
Look & Feel
Superalgos is a large and rather complex system aimed at all sorts of user profiles. The ultimate goal of the project is to massify the use of the system, thus, Superalgos should be accessible to a wide user base: from professional traders to crypto-holders, and everything in between.
The choice of a playful look and feel responds to the underlying strategy to achieve massification: to gamify the user experience, in the sense that building profitable trading strategies may be turned into a strategy game in and of itself.
We choose to depart from realistic or corporate styles and lean towards cartoonish, joyful, and spirited ideas instead.
What we Like
The following are examples of icons we like among the existing batch.
Abstract Icons
The group above features icons representing ideas that directly or indirectly remind of the underlying concept they represent. However, icons may also be abstract, and have a loose or no obvious connection with the concept being represented:
Figurative Icons
Sometimes, the relationship between the drawing and the actual concept being represented may be figurative, such as when the icon illustrates an alternative interpretation of the word:
Design Tips
Several design tricks make up the character of the collection of icons. The more of these tricks you use in your creations, the better they will integrate with the rest, and resonate with users.
Split Colors
A stylistic resource that we favour and that helps to create depth and richness in the composition is the split in half of the drawing, giving each half a slight shift in color, using adjacent colors in the palette on each half:
Non-Realistic Proportions
It’s one of the characteristics of the cartoonish look and feel:
Rounded Corners
Again, one other typical characteristic:
Highlights
Occasionally, a simple drawing may be embellished with a playful highlight effect that brings light to the creation. Notice how an otherwise flat drawing comes to life with the simple light-reflection effect on the right hand side.
Cutouts
When multiple elements lie on top of each other, the drawing may loose clarity, probably due to the restricted color palette. In such cases, a cutout on the background object that creates a slight separation with the foreground object can look cool and help the visual interpretation. Notice the 20 pts wide cutout around the red arrow.
Level of Detail
It is important to notice that icons must work well when used in small sizes. Too much detail may create alias and artifacts when the icon is reduced in size.
Tip: As a rule of thumb, try to avoid lines or shapes smaller than 20 pt in the original composition.
Full Size and Centered
Ideally, icons occupy the whole canvas, either in the horizontal or vertical dimension, or both. Save from exceptions, this is a requirement, as any departure from this standard is quite noticeable.
Technical Requirements
Icons are created and maintained in vectors, in the SVG format, but are used in the system and documentation—the current two main use cases—as raster images in the PNG format, for technical reasons.
Important: You must provide both types of files.
Vector Source Files
| Criterion | Details |
|---|---|
| Format | SVG |
| Width | 512 pt |
| Height | 512 pt |
| Extension | svg (lower-case) |
Tip: Add vector files in the Icons-SVG-Sources folder under the corresponding project.
In the case of the Superalgos project, SVG source files are organized in subfolders, under the following directory:
\Projects\Foundations\Icons-SVG-Sources\| Folder | Description |
|---|---|
| assets | Assets listed at exchanges |
| color-palette | A reference color plette |
| docs-menu | Options in the floating Docs menu |
| exchanges | Crypto exchanges |
| flags | Round flags used to identify languages |
| layers | Types of layers represented in a Layer Manager |
| menu | The options in the menu of nodes |
| mouse | Mouse and keyboard graphics used on video captures |
| nodes | Icons of nodes |
| various | Items that do not fit into the rest of the categories |
Raster Images
| Criterion | Details |
|---|---|
| Format | PNG |
| Application Size | 512 x 512 px |
| Color Depth | 24 bits (PNG-24) |
| Transparency | Yes |
| Interlaced | No |
| Extension | png (lower-case) |
Tip: Add all PNG files in the Icons folder.
Naming Convention
Files inherit the name of the node, asset, exchange, or whatever the icon represents, and are named in lower case, each word separated by a hyphen, and with a lower-case extension.
For example:
- In the case of nodes, the PNG file for the Managed Take Profit node is managed-take-profit.png
- In the case of assets, the name of the file must is the literal name of the asset. For instance, for Bitcoin, it is bitcoin.png; for Tether it is tether.png; and so on...
- In the case of an exchange, again, the literal name of the exchange is used, as it is listed in the CCXT library. for instance, Binance is
binance.png.
Contributing to Superalgos — TOC
You just read page 3 in the topic.
1. How to Contribute to Superalgos
2. How to Contribute a Trading System
4. How to Contribute to the Docs
5. How to Contribute Translations