• 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.

    Transforming this information into ideas.

    Drawing the main page.

    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.

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

    Preparing the performance page and the actor page.

    Presenting the concept to the client as a prototype.

    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.

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

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

    Starting to work on the cards.

    Trying different proportions and color schemes.

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

    Simultaneously making visits to the theater to take live photos.

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

    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.

    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.

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

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

    Next, copying the group.

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

    The chairs are aligned with the diagram one by one.

    Comparing the chairs before and after alignment.

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

    Next is the ticket purchase screen.

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