About the project
About the project
Topic selection
About us
In this section of our website you can see a brief summary of the many ideas that went into creating all the content. But first of all, why did we choose to inform about indirect soy consumption?
During our research we realised that almost no one, including us, knows how much soy they actually consume and how much CO2 is emitted by the trade and production.
What we do know is that the use of soy as animal feed has risen sharply, which is why soy imports from Brazil and the USA to Europe have also risen sharply. Animals in Europe eat this soy and people who consume the products of these animals unconsciously support climate change and get a worse personal carbon footprint.
Based on this information, we would like to provide information on three key points:
1. Why is soy increasingly being used as animal
feed?
2. How much soy do we consume indirectly
through animal products?
3. What is the carbon footprint of soy and how is
it changing as a result of soy cultivation
in the EU?
In this section of our website you can see a brief summary of the many ideas that went into creating all the content. But first of all, why did we choose to inform about indirect soy consumption?
During our research we realised that almost no one, including us, knows how much soy they actually consume and how much CO2 is emitted by the trade and production.
What we do know is that the use of soy as animal feed has risen sharply, which is why soy imports from Brazil and the USA to Europe have also risen sharply. Animals in Europe eat this soy and people who consume the products of these animals unconsciously support climate change and get a worse personal carbon footprint.
Based on this information, we would like to provide information on three key points:
1. Why is soy increasingly being used as animal feed?
2. How much soy do we consume indirectly through animal products?
3. What is the carbon footprint of soy and how is it changing as a result of soy cultivation in the EU?
Graphics
Graphics
After we had selected the data and completed our research, we gathered some visual inspiration and tried out some graphics. These ranged from simple sketches to very detailed visualisations. However, we decided to go for the graphics with a lot of details. These look best on the black background which we chose to match our theme. In addition, however, we used the abstracted graphics for a subpage.
After we decided on the type of graphics we wanted, we created all the graphics we needed for our website.
After we had selected the data and completed our research, we gathered some visual inspiration and tried out some graphics. These ranged from simple sketches to very detailed visualisations. However, we decided to go for the graphics with a lot of details. These look best on the black background which we chose to match our theme. In addition, however, we used the abstracted graphics for a subpage.
Font types
Font types
For headlines we used the font Montserrat and for body text fonts Open Sans. We used both fonts in different weights to achieve a hierarchy of the texts.
Open Sans
Bold
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
Regular
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
Open Sans
Bold
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
Regular
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
Montserrat
Bold
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
Medium
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
Storytelling
Storytelling
Homepage
- Plates with animal products showing how much soy we eat indirectly (attract attention)
Soybean
- Structure of the soybean (ingredients)
- How do soybeans grow
- Underside (structure of the soybean plant)
Soy producers in Europe
- who grows how much soy?
Soy as animal feed
- 80% of soy products are used for animal feed
- How much soy is used as animal feed for
which animal?
- Why soy as animal feed
- How soy becomes animal feed
Indirect consumption
- The journey of soy
- Indirect consumption of soy by animal products
- Meat consumption in Germany
Chance for Europe
- How much CO2 is caused by importing
soy compared to growing it in Europe?
- More cultivation of soy in Europe instead of import
- Soy as a chance for better biodiversity?
Information architecture
Information architecture
We built our website as a one pager. However, there are a few sub-pages in the one pager to learn more about certain topics.
For example, we have built up the structure of the soy plant, why soy is used as animal feed and meat consumption in Germany as subpages. This way, the user has the possibility to learn more about it.
One Pager
Sub-sides
Navigation
First we had the idea to start our homepage with
a 3 dimensional farm. The farm should represent the navigation of the website. However, this led to irritation and we discarded this idea. We decided to use a navigation which is displayed at the top of the website after scrolling.
However, the user has the possibility to navigate immediately to a specific content on the start page. There are 5 different buttons available for this.
First idea: 3D farm
Final: On the Startpage the user can instant change to a specific content
Interactions
For some graphics we have added small animations or interactive elements to make the website more fun for the users.
Plate
The first animation is on the home page. On the plate there are animal products that turn into soy. In addition, texts appear to explain the whole thing. This small animation should attract the attention of the users.
Globe
The next animation and interaction is at the graphic "Soy producers in EU" The user must first click on a globe to activate the animation. Then the globe is zoomed in until only Europe is visible. Then the percentages of the respective countries are displayed and the respective tons are calculated.
Soy as feed
We have created a slider to show which animal eats how much soy. The slider automatically changes the slides. However, the user can also operate the slider himself and switch to the next slide.
38%
11.780.000 tons
broiler chicken
16%
4.960.000 tons
milk cow
4%
1.240.000 tons
fish
16%
4.960.000 tons
pig
11%
3.410.000 tons
chicken
3%
930.000 tons
cattle
2%
620.000 tons
others
38%
11.780.000 tons
broiler chicken
16%
4.960.000 tons
milk cow
4%
1.240.000 tons
fish
16%
4.960.000 tons
pig
11%
3.410.000 tons
chicken
3%
930.000 tons
cattle
2%
620.000 tons
others
38%
11.780.000 tons
broiler chicken
16%
4.960.000 tons
milk cow
4%
1.240.000 tons
fish
16%
4.960.000 tons
pig
11%
3.410.000 tons
chicken
3%
930.000 tons
cattle
2%
620.000 tons
others
38%
11.780.000 tons
broiler chicken
16%
4.960.000 tons
milk cow
4%
1.240.000 tons
fish
16%
4.960.000 tons
pig
11%
3.410.000 tons
chicken
3%
930.000 tons
cattle
2%
620.000 tons
others
Final: On the Startpage the user can instant change to a specific content
Final: In addition, there is a navigation at the header of the website. This is only displayed when the navigation on the main page is no longer visible.
The user can thus navigate to any chapter at any time. Depending on where the user is, the buttons are highlighted so that the user knows where their are.
About us
Hi everyone!
We are Natalie Gröner and Carina Martz and we both study communication design together at the HfG in Schwäbisch Gmünd.
This website is a project for the Information Design course and has challenged us to present data sets and complex content in a simplified and visual way.
Natalie Gröner
Carina Martz
click
If you eat
100 g milk
There is an indirect consumption of soy, because the cow is additionally fed with
3 g soy
Only the soy, the cow eats, produces
17 g CO2
Indirect consumption
We have created an interactive version for our main graphic. The user can select an animal product (food) and the graphic changes accordingly.
Chance for Europe
To illustrate the CO2 saved by growing more soy, we have created an animation. The animation shows an aeroplane flying around the earth. In this animation we show how often a plane can fly around the earth with the saved CO2.
CO2 neutralisation
Trees are needed to neutralise the CO2. We have made a quiz out of it. The user has three answer options and then receives the correct answer. With a small animation we illustrate the number of trees that are needed. They are created bit by bit. Do you want to try? Click on an answer! How many trees are needed to neutralise 16.320.000 tons of CO2?
5.800.000 trees
204.200.000 trees
1.305.600.000 trees
A:
B:
C:
Soy plant
For the "soy plant" subpage, we decided to use an interactive graphic. The user can discover more information by clicking on the individual buttons.
The buttons open up to reveal further graphics and information.
pods
blossom
leaves
roots
stem
leaves
blossom
pods
stem
roots
5.800.000 trees
204.200.000 trees
1.305.600.000 trees
A:
B:
C:
leaves
pods
blossom
stem
roots
Conclusion
Conclusion
In conclusion, we are glad that we chose this topic because we had never heard of indirect consumption before. As you can see, it is essential to consume animal products consciously and care about your personal carbon footprint.
In the beginning, we both had some struggle to visualize the data that informs about the indirect consumption, of soy because there were so many embedded misunderstandings we had to eliminate of our final graphic.
Another challenge for us was that we had to learn the application “Framer” from scratch, which therefore cost us a lot of time that we couldn’t invest in our graphics. In general, we had to work many hours per week on our project because “Framer” included a lot of systemic faults we couldn’t always fix. But in general, even if it was a huge project, we are really happy with our final result and our teamwork worked very well and harmoniously.
In conclusion, we are glad that we chose this topic because we had never heard of indirect consumption before. As you can see, it is essential to consume animal products consciously and care about your personal carbon footprint.
In the beginning we both had some struggle to visualize the data that informs about the indirect consumption of soy because there were so many embedded misunderstandings we had to eliminate of our final graphic.
Another challenge for us was that we had to learn the application “Framer” from scratch, which therefore cost us a lot of time that we couldn’t invest in our graphics. In general we had to work many hours per week on our project because “Framer” included a lot of systemic faults we couldn’t always fix. But in general even if it was a huge project, we are really happy with our final result and our teamwork worked very well and harmoniously.
Hi everyone!
We are Natalie Gröner and Carina Martz and we both study communication design together at the HfG in Schwäbisch Gmünd.
This website is a project for the Information Design course and has challenged us to present data sets and complex content in a simplified and visual way.
Natalie Gröner
Carina Martz
Topic selection
After we decided on the type of graphics we wanted, we created all the graphics we needed for our website.
For headlines we used the font Montserrat and for body text fonts Open Sans. We used both fonts in different weights to achieve a hierarchy of the texts.
Open Sans
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
Montserrat
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
Homepage
- Plates with animal products
showing how much soy we eat
indirectly (attract attention)
Soybean
- Structure of the soybean
(ingredients)
- How do soybeans grow
- Underside
(structure of the soybean plant)
Soy producers in Europe
- who grows how much soy?
Soy as animal feed
- 80% of soy products are used for
animal feed
- How much soy is used as animal
feed for
which animal?
- Why soy as animal feed
- How soy becomes animal feed
Indirect consumption
- The journey of soy
- Indirect consumption of soy by
animal products
- Meat consumption in Germany
Chance for Europe
- How much CO2 is caused by
importing soy compared to
growing it in Europe?
- More cultivation of soy in
Europe instead of import
- Soy as a chance for better
biodiversity?
We built our website as a one pager. However, there are a few sub-pages in the one pager to learn more about certain topics.
For example, we have built up the structure of the soy plant, why soy is used as animal feed and meat consumption in Germany as subpages. This way, the user has the possibility to learn more about it.
One Pager
Sub-sides
Navigation
First we had the idea to start our homepage with
a 3 dimensional farm. The farm should represent the navigation of the website. However, this led to irritation and we discarded this idea. We decided to use a navigation which is displayed at the top of the website after scrolling.
However, the user has the possibility to navigate immediately to a specific content on the start page. There are 5 different buttons available for this.
First idea: 3D farm
Final: In addition, there is a navigation at the header of the website. This is only displayed when the navigation on the main page is no longer visible.
The user can thus navigate to any chapter at any time. Depending on where the user is, the buttons are highlighted so that the user knows where their are.
Interactions
For some graphics we have added small animations or interactive elements to make the website more fun for the users.
Plate
The first animation is on the home page. On the plate there are animal products that turn into soy. In addition, texts appear to explain the whole thing. This small animation should attract the attention of the users.
Globe
The next animation and interaction is at the graphic "Soy producers in EU" The user must first click on a globe to activate the animation. Then the globe is zoomed in until only Europe is visible. Then the percentages of the respective countries are displayed and the respective tons are calculated.
click
Soy as feed
We have created a slider to show which animal eats how much soy. The slider automatically changes the slides. However, the user can also operate the slider himself and switch to the next slide.
38%
11.780.000 tons
broiler chicken
16%
4.960.000 tons
milk cow
4%
1.240.000 tons
fish
16%
4.960.000 tons
pig
11%
3.410.000 tons
chicken
3%
930.000 tons
cattle
2%
620.000 tons
others
38%
11.780.000 tons
broiler chicken
16%
4.960.000 tons
milk cow
4%
1.240.000 tons
fish
16%
4.960.000 tons
pig
11%
3.410.000 tons
chicken
3%
930.000 tons
cattle
2%
620.000 tons
others
38%
11.780.000 tons
broiler chicken
16%
4.960.000 tons
milk cow
4%
1.240.000 tons
fish
16%
4.960.000 tons
pig
11%
3.410.000 tons
chicken
3%
930.000 tons
cattle
2%
620.000 tons
others
38%
11.780.000 tons
broiler chicken
16%
4.960.000 tons
milk cow
4%
1.240.000 tons
fish
16%
4.960.000 tons
pig
11%
3.410.000 tons
chicken
3%
930.000 tons
cattle
2%
620.000 tons
others
Indirect consumption
We have created an interactive version for our main graphic. The user can select an animal product (food) and the graphic changes accordingly.
If you eat
100 g milk
There is an indirect consumption of soy, because the cow is additionally fed with
3 g soy
Only the soy, the cow eats produces
17 g CO2
Chance for Europe
To illustrate the CO2 saved by growing more soy, we have created an animation. The animation shows an aeroplane flying around the earth. In this animation we show how often a plane can fly around the earth with the saved CO2.
CO2 neutralisation
Trees are needed to neutralise the CO2. We have made a quiz out of it. The user has three answer options and then receives the correct answer. With a small animation we illustrate the number of trees that are needed. They are created bit by bit. Do you want to try? Click on an answer! How many trees are needed to neutralise 16.320.000 tons of CO2?
Soy plant
For the "soy plant" subpage, we decided to use an interactive graphic. The user can discover more information by clicking on the individual buttons.
The buttons open up to reveal further graphics and information.
