Diving deep into the task. Realizing that the plant’s major advantage is its geographic location, deciding to emphasize this fact.
Coming up with an idea of a three-level zoom. On each level, new details will be revealed to the viewer: the world → bird’s eye view of the plant → specific plant shop.
Creating sketches for various scales. Listing major export destinations, comparative price quotes, marking the location of the plant.
Showing the objects of the plant on the next zoom level.
Using the final shop level to show a sped-up video and to list prices of the shop’s production.
Polishing the zoom level transition animation, presenting the resulting video to the client.
Getting the client’s approval and sketching the internal pages of the catalog.
Going to the plant to take photographs and videos. First, going to the warehouse to take photos of the final products, we will need them later to draw and assemble images for the website.
Now we need to go through all the shops and shoot videos. Putting on protective gear and going in.
Creating a sped-up video requires either a set of photos or several video clips, depending on the case. In case of photographs, we need to compensate the movement of the camera that can be caused by wind or vibration of the surface under the tripod. Next, performing batch treatment of all photos: correcting perspective and adjusting shadows.
Writing a custom action in Photoshop.
Assembling shop videos in After Effects.
As it turns out, the client has chosen an angle for the oxygen plant that is represented by only one photo. Waiting for a nice day, climbing up on a roof and shooting a timelapse with clouds.
Starting detailed work on pages.
Putting the prepared graphic elements together and working on page layout.
Transition between screens is performed by scaling of two maps. Adding an intermediary state for a better zoom effect.
We need to unblur the background in the footer to make the text more readable. While we wait for all the browsers to support the required function, adding an unblurred layer in the mask.
The plant is actively involved in construction of the bridge across the Kerch Strait. Deciding to mention this fact on the main page.
A small internal trial shows that people don’t click the plant image and fail to follow the main scenario on the main page. Adding a button that can’t be missed.
Working on internal pages. Assembling a lorem ipsum page.
Creating a successful completion screen for forms with a smiling plant.
The art directors suggests to maintain the graphic rhyme with the plant’s logo on the contacts page. Doing so.
Adding beautifully treated photos to the products page.
All that’s left is a preloader animation.
The art director chooses a sparkler rebar.
Which turns out to be a bit disquieting. Deciding to go with a simple piece of rebar with moving notches.
Done.
