The making of the Abinsk Electric Steel Works website

Overview• Process

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.

aemz process 01

Creating sketches for various scales. Listing major export destinations, comparative price quotes, marking the location of the plant.

aemz process 02

Showing the objects of the plant on the next zoom level.

aemz process 03

Using the final shop level to show a sped-up video and to list prices of the shop’s production.

aemz process 04

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.

aemz process 06

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.

aemz process 07

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.

aemz process 15

Starting detailed work on pages.

Putting the prepared graphic elements together and working on page layout.

aemz process 09

Transition between screens is performed by scaling of two maps. Adding an intermediary state for a better zoom effect.

aemz process new 01

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.

aemz process new 02

The plant is actively involved in construction of the bridge across the Kerch Strait. Deciding to mention this fact on the main page.

aemz process new 03

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.

aemz process 07

Working on internal pages. Assembling a lorem ipsum page.

aemz process 10

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.

aemz process 11

Adding beautifully treated photos to the products page.

aemz process 13

All that’s left is a preloader animation.

aemz process 14

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.

aemz process 13