• Websites
  • Federation
  • 1.0   2.0  

    The making of the Federation complex website 2.0

    Overview   Process  

    Before we start, we jump in a car and go for a tour of the object. As we explore the 50th floor, we see the designer’s car being towed away. We walk back.

    federationtower site3 process 01
    federationtower site3 process 26

    Making the first approach.

    federationtower site3 process 02

    Art director: The tower is barely visible. Also, there is no feeling of the image of the project. Keep trying, it really has to be staggering.

    Thinking about the image. Showing the tower in all its glory. The smart filter remains on the main page.

    federationtower site3 process 03

    Art director: The tower has been shown like this numerous times. The filter is too complex. Simplify it down.

    Starting the idea generation stage. Let’s illustrate each offer with a slice of the skyscraper. Clicking on it will take it apart.

    federationtower site3 process 04

    This way the skyscraper will become a huger tower of offers. Scrolling to the very bottom.

    federationtower site3 process 05

    Searching the studio’s Brain Storage and adapting an idea for our task.

    federationtower site3 process 06

    Art director: The tower slice is more or less fitting, let’s create the design around it. But the rest of it is too farfetched.

    Exploring the slice direction. Estimating what can be done.

    federationtower site3 process 07

    Meanwhile new photo-based concepts are born.

    federationtower site3 process 08
    federationtower site3 process 09

    Approaching from the typography angle.

    federationtower site3 process 10

    Art director: We’ll bury ourselves deep with the slices and floor plans and miss all the deadlines. The panoramas are OK, but not in this time of year. Let’s think about the typography. What if we use large digits to mark floors with available spaces? We’ll use your idea of a tower of offers which will be scrolled from top to bottom.

    federationtower site3 process 11

    Sketching a concept and showing it to the client.

    federationtower site3 process 12

    The client likes it all. Getting a series of comments.

    federationtower site3 process 13

    Deciding on the typefaces, going through different types of image rotators.

    federationtower site3 process 14

    Checking out how the page behaves when scrolled.

    federationtower site3 process 15

    Testing the adaptive design and populating the page with real offers.

    federationtower site3 process 16

    Showing the evolution of floor plans according to the changes of the official description of the project.

    federationtower site3 process 17

    To make the scrolling neater, coming up with a panoramic parallax effect.

    Floor plans evolve as project information gets updated.

    Starting to assemble the website.

    federationtower site3 process 18

    Writing bug reports.

    federationtower site3 process 19

    Experimenting with the surroundings.

    federationtower site3 process 20

    Making certain architectural and climatic changes to the drawings.

    federationtower site3 process 21

    Photoshopping the stylobate.

    Illuminating the top of the tower with the setting sun.

    Realizing that at one point there will be no more offers to show, they will all be bought out.

    federationtower site3 process 22

    Inserting the helicopter from the previous version of the design which says hi to Vasily Dubovoi.

    federationtower site3 process 23


    © 1995–2019 Art. Lebedev Studio



    Order a design...