The Prepper Web-App provides overview over food supplies of families by listing different food items next to each other. Also their expiration date and their storage location is shown.
Currently an intuitive way of showing the nutrition information for each food item is missing.
The nutrition information is stored in a database as X g fat/protein/carbohydrates per 100 g. This is equivalent to X% fat, Y% protein and Z% carbs.
A icon/non-interactive UI shall be designed, which shows nutrition information intuitively. The format shall be roughly quadratic (circular is also possible). At least the fat, protein, and carbohydrates content shall be depicted. Optionally also water content and fiber content is possible. The icon must be different when nutrition values differ.
I am looking for a small / icon-like / thumbnail representation of the nutrition values that can be presented within a table, not a feature-rich detailed table-like view.
High fat content for example should be recognized from the icon intuitively, by giving the fat representation in the icon more space than the other values.
In the same manner high carbohydrates and high protein content shall be visualized.
Using the icon a food product with 50% carbs shall be distinguishable from a food product with 40% carbs.
The representation of each of fat, protein, and carbohydrates content shall be roughly in the same area/region in the logo, so that different foods can be compared easily using the logo.
This programmatic interface is not part of this job.
The following example icons showing nutrition information shall be illustrated:
100% fat, 0% protein, 0% carbs (Oil)
0% each (Salt)
3% fat, 3% protein and 5% carbs (Milk)
2% fat, 5% protein and 41% carbs (Corn)
An indication of vegetarian/vegan food is a bonus. Also an indication of water and fiber content.
The designer is free in shape, colors and style.
I am looking forward to your designs!