• Websites
  • Theatre.ru
  • The making of the Pyotr Fomenko Workshop Theater website

    Overview• Process IProcess II

    Before we begin, going on a detailed tour of the theater and visiting several performances.

    fomenko process 01

    Transforming this information into ideas.

    fomenko process 02

    Drawing the main page.

    fomenko process 03

    To maintain continuity with the first version of the website, coloring many of the images in black and white.
    Deciding to create a unique card for each performance.

    fomenko process 04

    The cards take their place in the mock-up of the performance list and the playbill.

    fomenko process 05

    Preparing the performance page and the actor page.

    fomenko process 06

    Presenting the concept to the client as a prototype.

    fomenko process 07

    Getting the client’s approval, starting to work on the website.
    The next step is to draw performance cards. A theater employee sends lots of materials to help us.

    fomenko process 08

    Creating a check list to make sure we don’t miss anything.

    fomenko process 09

    Choosing a unique shape for each picture. Cutting out the photos, adding special touches to some of them.

    fomenko process 10

    Starting to work on the cards.

    fomenko process 11

    Trying different proportions and color schemes.

    fomenko process 12

    Discussing saving the pictures and placing them in mock-ups with the technologist.

    fomenko process 13

    Simultaneously making visits to the theater to take live photos.

    Starting to work on the ticket purchase service. Studying the competition.

    fomenko process 14

    We want to make the process more fun for visitors. Each hall has to have a unique diagram, a visual photographic image, not a traditional floor plan. We start with the main hall.
    Climbing up high to take shots.

    fomenko process 15

    Looks good, but some retouching won’t hurt. Main problems: distracting details, distortions, lack of symmetry, unevenness and blurry silhouettes of chairs.

    Making changes in stages.

    Starting to work on the seat choice mechanism. SVG masks of available seats will be overlaid on top of the photo. Moving the final picture into Illustrator and starting to create the masks.

    fomenko process 16

    The vector diagram has to be absolutely precise and symmetric; all discovered irregularities in the raster image are immediately fixed in Photoshop.

    fomenko process 17

    Moving on to the amphitheater. Using shapes created for the ground floor. Bending shapes along a curved arc.

    fomenko process 18

    Next, copying the group.

    fomenko process 19

    Then using the Blend tool to fill all the rows in between.

    fomenko process 20

    The chairs are aligned with the diagram one by one.

    fomenko process 21

    Comparing the chairs before and after alignment.

    Finalizing the diagram and sending it to the technologist for typesetting.

    fomenko process 22

    Next is the ticket purchase screen.

    fomenko process 23

    Preparing images of the Small, Gray and Green halls in a similar fashion.

    fomenko process 24