• Websites
  • Tetra Pak
  • Container   Campaign identity   Flyer   Website  

    The making of the Tetra Pak website

    Overview   Process  

    Starting to work on the concept. Getting inspired by infographics and trying to tell the story of cartons using an informative illustration.

    tetrapak site process 01

    Building the design around the shape of a carton.

    tetrapak site process 02

    Returning to the colorful illustrated story.

    tetrapak site process 03
    tetrapak site process 04
    tetrapak site process 05

    Working on the page about forest harvesting. Drawing a prototype on the wall and testing the format of a video story.

    Taking pictures of the wall and assembling a page with the illustration.

    tetrapak site process 06

    Noticing that an air-filled carton makes a nice bang when popped.

    Laying the concept aside for a while and assembling a site map in the form of a sequential story of packaging life cycle.

    tetrapak site process 08

    What if we loop it?

    tetrapak site process 09

    Assembling the first page based on this idea.

    tetrapak site process 10

    Working on the life cycle illustration.

    Putting a carton in the center, folding its corner, planting a coniferous tree, making the packaging material rolls smaller.

    Considering the menu design, searching for metaphors and drawing icons.

    tetrapak site process 11 a

    Assembling the page about the composition of the packaging.

    tetrapak site process 12

    The client asks to fill the carton with juice. Doing it.

    Drawing the right cap.

    tetrapak site process 14

    Working on the page about carton paper manufacturing. Preparing a diagram.

    tetrapak site process 15

    Listening to the client’s comments and making changes.

    tetrapak site process 16

    Placing the result on the page. Since the diagram came out too large, adding horizontal and vertical scrolling.

    tetrapak site process 17

    Drawing the final version of the diagram and reversing the direction of the process.

    tetrapak site process 18

    Getting further comments.

    tetrapak site process 19

    Finalizing the page and adding new content.

    tetrapak site process 20

    Starting to work on the page about polyethylene.

    tetrapak site process 21

    Creating an approximate production diagram.

    tetrapak site process 22
    tetrapak site process 23

    Placing it on the page and emphasizing the fact that Tetra Pak uses as much green polyethylene as possible.

    tetrapak site process 24

    Even while we work on the website, more and more polyethylene is being produced from sugar cane. Trying to hide the traditional petroleum process behind a teaser.

    tetrapak site process 25

    It doesn’t work. Making adjustments to the drawing, replacing petroleum with the renewable source.

    tetrapak site process 26

    Retypesetting the page with the new illustration.

    tetrapak site process 27

    Assembling the page with the aluminum production diagram. Since the company itself does not manufacture aluminum, the page gets dropped from the final version of the website so as not to cause any confusion.

    tetrapak site process 28

    Understanding the manufacturing process of the packaging material.

    tetrapak site process 29
    tetrapak site process 30

    Checking out how the diagram will look on the page.

    tetrapak site process 31

    It does not correspond with reality. Trying to simplify.

    tetrapak site process 32

    Doesn’t work either. Studying the process more carefully.

    tetrapak site process 33

    Getting the client’s approval for the alternative.

    tetrapak site process 34

    Drawing the new diagram and finalizing the page.

    tetrapak site process 35

    Creating the page on responsible forest management.

    tetrapak site process 36

    Working on the illustration.

    Following the evolution of the page on packaging systems.

    tetrapak site process 38

    Thinking about what the carton of the future might look like.

    tetrapak site process 39
    tetrapak site process 40

    The client would like to emphasize their dedication to sustainability. Developing this theme.

    tetrapak site process 41

    The idea does not work. Showing possible alternative directions.

    tetrapak site process 42

    Drawing the new variant of the illustration and retypesetting the page with the new content.

    tetrapak site process new 01

    Starting to work on the page on transportation. Using an interactive switch to show how fewer trucks are needed to transport Tetra Pak packaging.

    tetrapak site process 44

    Drawing the trucks.

    tetrapak site process 45

    Filling the page about carton contents with juice, milk and wine.

    tetrapak site process 46

    Drawing what’s inside.

    tetrapak site process 47

    Ultimately removing the corn and typesetting the page over again.

    tetrapak site process 48

    Assembling the page on product treatment.

    tetrapak site process 49

    The illustration does not match the description of the process. Assembling a new page with a new diagram.

    tetrapak site process 50

    The packaging meets the product.

    tetrapak site process 51

    Finalizing the diagram.

    tetrapak site process 52

    Assembling the history page from newspaper cutouts of different periods.

    tetrapak site process 53

    For the page on product transportation we decide to weigh two trucks carrying products packed in two kinds of packaging to see which is heavier.

    tetrapak site process 54

    Drawing the trucks.

    tetrapak site process 55

    Moving on to the page about profits for retail networks.

    tetrapak site process 56

    Comparing the packaging on store shelves. Clicking replaces the losing shelf with the description of pictrograms on Tetra Pak cartons.

    tetrapak site process 57

    The idea doesn’t make the cut. Removing the carton comparison and showing the pictograms information right away.

    tetrapak site process 58

    Talking about collection and sorting of used packaging. First we decide to make an illustration with three ways of waste handling.

    tetrapak site process 59

    Assembling the page.

    tetrapak site process 60

    Replacing the shared illustration with three separate pictures on ways of handling waste.

    tetrapak site process 61

    The client asks to cover the truck bed and remove the factory on fire.

    tetrapak site process 62

    Creating an approximate plan of the recycling process.

    tetrapak site process 63

    Drawing and typesetting the page.

    tetrapak site process 64

    The client sends a new vision of the recycling diagram. Changing the illustration and retypesetting the page.

    tetrapak site process 65

    Working on the page about recycling results.

    tetrapak site process 66

    Moving on to the page about people who consume the products in cartons. Unfortunately, the page does not make it to the final version of the website.

    tetrapak site process 67

    Now the page about the life of a carton at home.

    tetrapak site process 68

    Changing the refrigerator perspective. Ultimately, the page doesn’t make the cut either.

    tetrapak site process 69

    Creating the page about recycling companies in Russia and in the world. Deciding to abandon it right before the launch.

    tetrapak site process 70

    Making a page on quality control. It also doesn’t go through to the final.

    tetrapak site process 71

    Drawing icons.

    tetrapak site process 72

    Polishing teasers for all pages.

    tetrapak site process new 01

    Making final corrections.

    tetrapak site process 73


    © 1995–2019 Art. Lebedev Studio



    Order a design...