The making of the Pyotr Fomenko Workshop Theater website
Before we begin, going on a detailed tour of the theater and visiting several performances.
![fomenko process 01](fomenko-process-01.jpg)
Transforming this information into ideas.
![fomenko process 02](fomenko-process-02.jpg)
Drawing the main page.
![fomenko process 03](fomenko-process-03.jpg)
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](fomenko-process-04.jpg)
The cards take their place in the mock-up of the performance list and the playbill.
![fomenko process 05](fomenko-process-05.jpg)
Preparing the performance page and the actor page.
![fomenko process 06](fomenko-process-06.jpg)
Presenting the concept to the client as a prototype.
![fomenko process 07](fomenko-process-07.jpg)
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](fomenko-process-08.jpg)
Creating a check list to make sure we don’t miss anything.
![fomenko process 09](fomenko-process-09.jpg)
Choosing a unique shape for each picture. Cutting out the photos, adding special touches to some of them.
![fomenko process 10](fomenko-process-10.jpg)
Starting to work on the cards.
![fomenko process 11](fomenko-process-11.jpg)
Trying different proportions and color schemes.
![fomenko process 12](fomenko-process-12.jpg)
Discussing saving the pictures and placing them in mock-ups with the technologist.
![fomenko process 13](fomenko-process-13.jpg)
Simultaneously making visits to the theater to take live photos.
Starting to work on the ticket purchase service. Studying the competition.
![fomenko process 14](fomenko-process-14.jpg)
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](fomenko-process-15.jpg)
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](fomenko-process-16.jpg)
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](fomenko-process-17.jpg)
Moving on to the amphitheater. Using shapes created for the ground floor. Bending shapes along a curved arc.
![fomenko process 18](fomenko-process-18.jpg)
Next, copying the group.
![fomenko process 19](fomenko-process-19.jpg)
Then using the Blend tool to fill all the rows in between.
![fomenko process 20](fomenko-process-20.jpg)
The chairs are aligned with the diagram one by one.
![fomenko process 21](fomenko-process-21.jpg)
Comparing the chairs before and after alignment.
Finalizing the diagram and sending it to the technologist for typesetting.
![fomenko process 22](fomenko-process-22.jpg)
Next is the ticket purchase screen.
![fomenko process 23](fomenko-process-23.jpg)
Preparing images of the Small, Gray and Green halls in a similar fashion.
![fomenko process 24](fomenko-process-24.jpg)