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